帮王枝尧写的轮播
html
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/common.css"> <style type="text/css"> .wrap{width: 780px;margin: 100px auto} .wrap ul{position: relative;height: 350px} .wrap li{width: 250px;height: 300px;position: absolute;top: 0} .wrap ul li:nth-child(1){left: 0;background-color: red} .wrap ul li:nth-child(2){left: 250px;top: -30px;background-color: blue} .wrap ul li:nth-child(3){left: 500px;;background-color: green} .wrap ul li:nth-child(4){left: 250px;top: 50px;;background-color: yellow} .wrap li img{width: 220px;display: block;margin: 0 15px;} </style> </head> <body> <div class="wrap" id="wrap"> <ul> <li class="ind_1" data-index='1'></li> <li class="ind_2" data-index='2'></li> <li class="ind_3" data-index='3'></li> <li class="ind_4" data-index='4'></li> </ul> <button id="prev">prev</button> <button id="next">next</button> </div> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
js
$(function(){ var slider = { nodeList: { wrap: $('#wrap'), ul: $('#wrap ul'), allLi: $('#wrap li'), nextBtn: $('#next'), prevBtn: $('#prev') }, ismove: false, timer: '', nextMove: function(){ var _self = slider; if (!_self.ismove) { _self.ismove = true; _self.nodeList.allLi.each(function(){ var $this = $(this); var $index = $this.data('index'); if ($index == 1) { _self.nextFnList.f1($this); } else if($index == 2){ _self.nextFnList.f2($this) }else if($index == 3){ _self.nextFnList.f3($this) }else if($index == 4){ _self.nextFnList.f4($this) } $this.data('index' , $index % 4 + 1) ; }) } }, nextFnList: { f1: function(ele){ele.css('zIndex' , 0);ele.animate({'left' : '250px' , 'top' : '-30px' } , 1000);}, f2: function(ele){ele.animate({'left' : '500px' , 'top' : '0' , 'zIndex' : 1} , 1000);}, f3: function(ele){ele.css('zIndex' , 1);ele.animate({'left' : '250px' , 'top' : '50px' } , 1000);}, f4: function(ele){ele.css('zIndex' , 1);ele.animate({'left' : '0' , 'top' : '0' } , 1000 , function(){ slider.ismove = false;});} }, prevMove: function(){ var _self = slider; if (!_self.ismove) { _self.ismove = true; _self.nodeList.allLi.each(function(){ var $this = $(this); var $index = $this.data('index'); if ($index == 1) { _self.prevFnList.f1($this); } else if($index == 2){ _self.prevFnList.f2($this) }else if($index == 3){ _self.prevFnList.f3($this) }else if($index == 4){ _self.prevFnList.f4($this) } $this.data('index' , $index == 1 ? 4 : $index-1 ) ; }) } }, prevFnList: { f1: function(ele){ele.css('zIndex' , 1);ele.animate({'left' : '250px' , 'top' : '50px'} , 1000);}, f2: function(ele){ele.animate({'left' : '0' , 'top' : '0' , 'zIndex' : 1} , 1000);}, f3: function(ele){ele.css('zIndex' , 0);ele.animate({'left' : '250px' , 'top' : '-30px'} , 1000);}, f4: function(ele){ele.css('zIndex' , 1);ele.animate({'left' : '500px' , 'top' : '0'} , 1000 , function(){ slider.ismove = false; });} }, init: function(){ var _self = slider; _self.nodeList.wrap.mouseover(function(){ clearInterval(_self.timer); }).mouseleave(function(){ _self.timer = window.setInterval(function(){ _self.nodeList.nextBtn.trigger('click'); } , 2000); }); _self.nodeList.nextBtn.click(function(){ _self.nextMove(); }); _self.nodeList.prevBtn.click(function(){ _self.prevMove(); }); _self.timer = window.setInterval(function(){ _self.nodeList.nextBtn.trigger('click'); } , 2000); } } slider.init(); });
修改之后
$(function(){ var slider = { nodeList: { wrap: $('#banner3'), ul: $('#banner3 ul'), allLi: $('#banner3 a'), nextBtn: $('#btn_r'), prevBtn: $('#btn_l') }, numbers: { t_1: {}, t_2: {}, t_3: {}, t_4: {} }, ismove: false, timer: '', nextMove: function(){ var _self = slider; if (!_self.ismove) { _self.ismove = true; _self.nodeList.allLi.each(function(){ var $this = $(this); var $index = $this.data('index'); // console.log($this.data('index')) if ($index == 1) { _self.nextFnList.f1($this); } else if($index == 2){ _self.nextFnList.f2($this) }else if($index == 3){ _self.nextFnList.f3($this) }else if($index == 4){ _self.nextFnList.f4($this) } $this.data('index' , $index % 4 + 1) ; }) } }, nextFnList: { f1: function(ele){ele.animate(slider.numbers["t_2"] , 1000);}, f2: function(ele){ele.animate(slider.numbers["t_3"] , 1000);}, f3: function(ele){ele.css('zIndex' , 11);ele.animate(slider.numbers["t_4"] , 1000);}, f4: function(ele){ele.animate(slider.numbers["t_1"] , 1000 , function(){ slider.ismove = false;});} // f1: function(ele){ele.animate(slider.numbers["t_2"] , 1000);}, // f2: function(ele){ele.animate(slider.numbers["t_3"] , 1000);}, // f3: function(ele){ele.animate(slider.numbers["t_4"] , 1000);}, // f4: function(ele){ele.animate(slider.numbers["t_1"] , 1000 , function(){ slider.ismove = false;});} }, prevMove: function(){ var _self = slider; if (!_self.ismove) { _self.ismove = true; _self.nodeList.allLi.each(function(){ var $this = $(this); var $index = $this.data('index'); if ($index == 1) { _self.prevFnList.f1($this); } else if($index == 2){ _self.prevFnList.f2($this) }else if($index == 3){ _self.prevFnList.f3($this) }else if($index == 4){ _self.prevFnList.f4($this) } $this.data('index' , $index == 1 ? 4 : $index-1 ) ; }) } }, prevFnList: { f1: function(ele){ele.css('zIndex' , 10);ele.animate(slider.numbers["t_4"] , 1000);}, f2: function(ele){ele.css('zIndex' , 7);ele.animate(slider.numbers["t_1"] , 1000);}, f3: function(ele){ele.css('zIndex' , 8);ele.animate(slider.numbers["t_2"] , 1000);}, f4: function(ele){ele.css('zIndex' , 9);ele.animate(slider.numbers["t_3"], 1000 , function(){ slider.ismove = false; });} // f1: function(ele){ele.animate(slider.numbers["t_4"] , 1000);}, // f2: function(ele){ele.animate(slider.numbers["t_1"] , 1000);}, // f3: function(ele){ele.animate(slider.numbers["t_2"] , 1000);}, // f4: function(ele){ele.animate(slider.numbers["t_3"], 1000 , function(){ slider.ismove = false; });} }, init: function(){ var _self = slider; _self.nodeList.allLi.each(function(index){ var $this = $(this); var now = _self.numbers["t_"+(index+1)]; now.width = $this.width(); now.height = $this.height(); now.top = $this.css('top'); now.left = $this.css('left'); now.zIndex = $this.css('zIndex'); }); console.log(_self.numbers) _self.nodeList.wrap.mouseover(function(){ clearInterval(_self.timer); }).mouseleave(function(){ _self.timer = window.setInterval(function(){ _self.nodeList.nextBtn.trigger('click'); } , 2000); }); _self.nodeList.nextBtn.click(function(){ _self.nextMove(); }); _self.nodeList.prevBtn.click(function(){ _self.prevMove(); }); _self.timer = window.setInterval(function(){ _self.nodeList.nextBtn.trigger('click'); } , 2000); } } slider.init(); });
浙公网安备 33010602011771号