var picList = [ { width: 250, height: 180, content: "images/1.jpg", }, { width: 250, height: 180, content: "images/2.jpg", }, { width: 250, height: 180, content: "images/3.jpg", } ]; var domList = [ { } ]; //all animation effect var islider1 = new iSlider({ data: picList, dom: document.getElementById("animation-effect"), duration: 2000, animateType: 'default', isAutoplay: true, isLooping: true, // isVertical: true, 是否垂直滚动 }); islider1.bindMouse(); //vertical slide var islider2 = new iSlider({ data: picList, dom: document.getElementById("vertical-slide"), duration: 2000, animateType: 'default', isVertical: true, isAutoplay: true, isLooping: true, }); islider2.bindMouse(); //不循环 不自动播放 var islider3 = new iSlider({ data: picList, dom: document.getElementById("non-looping"), animateType: 'default', }); islider3.bindMouse(); //滚动dom var islider4 = new iSlider({ data: domList, dom: document.getElementById("dom-effect"), type: 'dom', animateType: 'default', isAutoplay: true, isLooping: true, }); islider4.bindMouse(); var menu = document.getElementById('menu-select').children; function clickMenuActive(target) { for (var i = 0; i < menu.length; i++) { menu[i].className = ''; } target.className = 'on'; } menu[0].onclick = function() { clickMenuActive(this); islider1._opts.animateType = this.innerHTML; islider1.reset(); }; menu[1].onclick = function() { clickMenuActive(this); islider1._opts.animateType = this.innerHTML; islider1.reset(); }; menu[2].onclick = function() { clickMenuActive(this); islider1._opts.animateType = this.innerHTML; islider1.reset(); }; menu[3].onclick = function() { clickMenuActive(this); islider1._opts.animateType = this.innerHTML; islider1.reset(); };