BoxScroll
常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单，到了尽头得往回跑，看看注释就知道了。
代码如下:
HTML
<!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta name="author" content="codetker" /> <head> <title>简易图片轮播插件</title> <link href="style/reset.css" rel="stylesheet" type="text/css"> <link href="style/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.codetker.boxScroll.js"></script> </head> <body> <div> <div> <div> <div>ToLeft</div> <div>ToRight</div> <ul> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> <li> <a href="" title=""> <img src="images/test.jpg" alt=""> </a> </li> </ul> </div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".scrollBox").boxScroll(); }); </script> </body> </html>
CSS
@charset "utf-8"; /* CSS Document */ body{ margin:0 0; padding:0 0; height:100%; width:100%; } .wrap{ font-family:"微软雅黑","宋体", Times, "Times New Roman", serif; font-size:14px; margin:0 0; padding:0 0; height:100%; width:100%; overflow:hidden; } .boxStyle{/*照片大小*/ width: 500px; height: 256px; } .scrollBox{ position: relative; width: 500px; margin: 0 auto; } .picInnerBox{ width: 10000px;/*足够大能放下即可,如果需要上下滚动，改height*/ overflow: hidden; } .picInnerBox li{ cursor: pointer; float: left; } .picOuterBox{ overflow: hidden; } .arrow{ position: absolute; top: 45%; height: 40px; cursor: pointer; z-index: 99; } .arrow:hover{ color: #fff; } .arrowLeft{ float: left; left: 5%; } .arrowRight{ float: right; right: 5%; } .picControl{ overflow: auto; width: 100px; margin: 0 auto; } .picControl ul li{ cursor: pointer; float: left; width: 20px; height: 20px; text-align: center; } .picControl ul li:hover{ color:red; } .liSelected{ color: red; }
JavaScript
/* * boxScroll 0.1 * 兼容等常见浏览器 */ ;(function($,window,document,undefined){ //定义构造函数 var BoxObj=function(ele,opt){ this.$element=ele; //最外层对象 this.defaults={ 'style': 0 ,//滚动样式选择,默认为普通效果 'speed': 1 ,//默认为1s 'direction': 'left',//默认为向左边滚动 'toLeft':$(ele).children('.picOuterBox').children('.arrowLeft'),//默认格式下重要位置 'toRight':$(ele).children('.picOuterBox').children('.arrowRight'), 'ControlUl':$(ele).children('.picControl').children('ul') }, this.options=$.extend({},this.defaults,opt ); //这里可以添加一些通用方法 } //给构造函数添加方法 BoxObj.prototype={ commonScroll:function(){ //接收对象属性 var boxWindow=$(this.$element).children('.picOuterBox').children('.picInnerBox'); var speed=this.defaults.speed; var style=this.defaults.style; var direction=(this.defaults.direction=='left')? 1 : -1; var toLeft=this.defaults.toLeft; var toRight=this.defaults.toRight; var Control=this.defaults.ControlUl; var boxWidth=$(boxWindow).children('li').width(); var imgIndexMax=$(boxWindow).children('li').length; var imgIndex; function getImgIndex(){//判断当前图片的位置 imgIndex=Math.round(parseInt($(boxWindow).css("margin-left"))*(-1)/boxWidth); } var timer;//必须在外面定义保证全局针对这一功能只有这一个计时器 timer=setInterval(function(){ boxScroll(imgIndex,direction); },5000); function rest(){ clearInterval(timer); timer=setInterval(function(){ boxScroll(imgIndex,direction); },5000); } //绑定点击按钮 $(Control).delegate('li', 'click', function() { boxScroll($(this).index(),0); rest(); }); //绑定左右按钮 $(toLeft).click(function() { boxScroll(0,-1); rest(); }); $(toRight).click(function() { boxScroll(0,1); rest(); }); function boxScroll(index,dir){ if (!$(boxWindow).is(':animated')) {//当ul窗口没有在动时 if(!dir){//响应ul li control操作 //此时dir=0，则依靠传入的imgIndex imgIndex=index; //其它时候dir!=0,则依靠dir }else{//响应toLeft和toRight if(dir==1){//向右动 getImgIndex(); if (imgIndex==(imgIndexMax-1)) { imgIndex=0; }else{ imgIndex+=1; } }else{//向左动 getImgIndex(); if (imgIndex==0) { imgIndex=(imgIndexMax-1); }else{ imgIndex-=1; } } } $(Control).children('li').eq(imgIndex).addClass('liSelected'); $(Control).children('li').eq(imgIndex).siblings().removeClass('liSelected'); $(boxWindow).animate({ "margin-left":imgIndex*boxWidth*(-1)+'px' }, 1000*speed); } } } } //在插件中使用windowObj对象的方法，0为vertical，1为horizontal $.fn.boxScroll=function(options){ //创建实体 var boxObj=new BoxObj(this,options); //用尾调的形式调用对象方法 return boxObj.commonScroll(); } })(jQuery,window,document);
详细下载参见https://github.com/codetker/myBoxScroll。
以上所述就是本文的全部内容了，希望大家能够喜欢。
【jQuery插件boxScroll实现图片轮播特效】相关文章：
★ jQuery插件bgStretcher.js实现全屏背景特效