Question

我正在尝试使用Pure Javascript和CSS完成的幻灯片演示。目前，脚本在单击时运行。我想通过自动化来添加运行它的附加功能。我该怎么做。下面是它工作的小提琴的链接。
Working onclick

var images = document.getElementById('slideshow-wrapper');
var Slideshow = {
    Utils: {
        siblings: function(element) {
            var parent = element.parentNode,
                childs = parent.childNodes,
                sibls = [],
                len = childs.length,
                i;
            for (i = 0; i < len; i++) {
                var child = childs[i];
                if (child.nodeType == 1 && child.tagName.toLowerCase() == 'img' && child !== element) {
                    sibls.push(child);
                }
            }
            return sibls;
        },
        hideAll: function(elements) {
            var len = elements.length,
                i;
            for (i = 0; i < len; i++) {
                var element = elements[i];
                element.className = 'hide';

            }
        },
        show: function(element) {
            element.className = 'show';
        }
    },
    core: {
        displayNavigation: function() {
            var images = document.getElementById('slideshow-wrapper').getElementsByTagName('img'),
                len = images.length,
                i, nav = document.getElementById('slideshow-nav'),
                html = '';
            for (i = 0; i < len; i++) {
                html += '<a href="#" data-img="' + i + '">' + (i + 1) + '</a>';
            }
            nav.innerHTML = html;
        },
        navigate: function() {
            var links = document.getElementById('slideshow-nav').getElementsByTagName('a'),
                len = links.length,
                i;
            for (i = 0; i < len; i++) {
                var a = links[i];
                a.onclick = function() {
                    var $i = this.getAttribute('data-img');
                    var img = document.getElementById('slideshow-wrapper').getElementsByTagName('img')[$i];
                    Slideshow.Utils.show(img);
                    var siblings = Slideshow.Utils.siblings(img);
                    Slideshow.Utils.hideAll(siblings);
                    return false;
                };
            }
        }
    },
    init: function() {
        for (var prop in this.core) {
            if (typeof this.core[prop] === 'function') {
                this.core[prop]();
            }
        }
    }
};
Slideshow.init();
console.log(Slideshow);

我尝试在核心对象下添加另一个函数，使用setInterval编写函数但无法获取它。

Answer 1

第1步：将以下内容插入页面的<head>部分或单独的js文件

 <script>
<!--   
    var slideimages=new Array()
    var slidelinks=new Array()
    function slideshowimages(){
    for (i=0;i<slideshowimages.arguments.length;i++){
    slideimages[i]=new Image()
    slideimages[i].src=slideshowimages.arguments[i]
    }
    }

    function slideshowlinks(){
    for (i=0;i<slideshowlinks.arguments.length;i++)
    slidelinks[i]=slideshowlinks.arguments[i]
    }

    function gotoshow(){
    if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
    else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
    }

    //-->
    </script>

将以下内容插入您希望幻灯片显示的页面的<body>部分：

<a href="javascript:gotoshow()"><img src="FirstImage.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--

//configure the paths of the images
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>

这对你来说应该足够了，只需改变你的链接

如何在Javascript中自动化工作幻灯片

1 个答案: