幻灯片
写的乱七八糟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} li{list-style:none;} .sliderBox{width:400px;padding:5px;border: 1px solid #ddd;margin:50px 500px 0;position: relative;} .sliderBox .slider{height: 260px;overflow: hidden; position: relative;} .sliderBox .slider ul{width: 9999px; position: relative;} .sliderBox .slider li{float: left;} .sliderBox .dots{position: absolute; width: 100%; bottom: 15px; text-align:center; z-index: 100;} .sliderBox .dots i{width: 10px; height: 10px; margin: 0 3px; display: inline-block; background: #fff;border:1px solid #f30; border-radius:10px; box-shadow: 0 0 3px rgba(0,0,0,0.2)} .sliderBox .dots i.cur{background: #ff0;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> (function($, window, document, undefined){ var sliderConfig = function(ele,opt){ this.element = ele; this.defaults = { 'effect' : 'scroll', //动画模式 scroll/fade 'dot' : true, //dot导航 'autoplay' : true, //自动播放 'slideSpeed': 600, //动画速度 'timeout' : 3000 //停顿 }; this.options = $.extend({},this.defaults,opt); this.oAni = $('.slider ul', this.element); this.item = $('li',this.oAni); this.sw = $('.slider',this.element).width(); this.onum = $('.slider li',this.element).length; this.idx = 0; this.t = null; }; sliderConfig.prototype = { idx : 0, left : function(){ this.idx++, this.animate(1); }, right : function(){ this.idx--, this.animate(-1); }, animate : function(n){ var _this = this; var cur = 0; var nex = 1; if(this.options.effect == 'fade'){ this.item.css({'position':'absolute','top':'0','left':'0',}) $('li',this.oAni).eq(cur).css('z-index','99'); if(n == 1){ $('li',this.oAni).eq(nex).css('z-index','98'); $('li',this.oAni).eq(cur).fadeOut(_this.slideSpeed,function(){ $(this).css('z-index','0').show().appendTo(_this.oAni); }) }else{ nex = this.onum-1; $('li',this.oAni).eq(nex).css('z-index','98'); $('li',this.oAni).eq(cur).fadeOut(_this.slideSpeed,function(){ $(this).css('z-index','0').show(); $('li',_this.oAni).eq(nex).prependTo(_this.oAni); }) } }else{ if(n == 1){ this.oAni.animate({ 'left' : -n*this.sw }, this.slideSpeed,function(){ $('li',this.oAni).eq(cur).appendTo(_this.oAni); _this.oAni.css('left','0px'); }); }else{ nex = this.onum-1; $('li',this.oAni).eq(nex).prependTo(_this.oAni); this.oAni.css('left',n*this.sw+'px'); this.oAni.animate({ 'left' : 0 }); }; } $('.dots i',this.element).eq((this.idx-n)%this.onum).removeClass('cur'); $('.dots i',this.element).eq(this.idx%this.onum).addClass('cur'); }, autoplay : function(){ var _this = this; this.t = setInterval(function(){ _this.left(); },_this.options.timeout); }, ev : function(){ var _this = this; var obj = this.element.find('.slider'); var w= obj.width(); var l = obj.offset().left; var fx =1; obj.bind('mouseover mousemove',function(){ if(_this.options.autoplay){ clearTimeout(_this.t); } var x = event.clientX; if(x > l+w/2){ fx = 1; $(this)[0].style.cursor = "url("+"http://img.kaixin001.com.cn/i2/photo/right.cur"+"),auto"; $(this)[0].title = "下一张>>"; }else{ fx = 0; $(this)[0].style.cursor = "url("+"http://img.kaixin001.com.cn/i2/photo/left.cur"+"),auto"; $(this)[0].title = "上一张>>"; } }); if(this.options.autoplay){ obj.bind('mouseleave',function(){ _this.autoplay(); }) }; obj.bind('click',function(){ console.log(event.type); if(fx){ _this.left(); }else{ _this.right(); } return false; }) }, int : function(){ if(this.options.dot){ $('<div class="dots"></div>').appendTo(this.element); for(var i=0; i<this.onum; i++){ $('<i></i>').appendTo($('.dots'),this.element); $('.dots i:first',this.element).addClass('cur'); } }; if(this.options.autoplay){ this.autoplay(); }; this.ev(); } }; $.fn.slider = function(options){ var newSlider = new sliderConfig(this, options); return newSlider.int(); } }(jQuery, window, document)) $(function(){ $('#sliderBox').slider({ 'effect' : 'scroll' }); }) </script> </head> <body> <div class="sliderBox" id="sliderBox"> <div class="slider"> <ul> <li><img src="image/01.jpg"></li> <li><img src="image/02.jpg"></li> <li><img src="image/03.jpg"></li> <li><img src="image/04.jpg"></li> <li><img src="image/05.jpg"></li> </ul> </div> </div> </body> </html>
