jQuery插件boxScroll实现图片轮播特效

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 class="wrap"><div class="scrollBox"><div class="picOuterBox boxStyle"><div class="arrow arrowLeft">ToLeft</div><div class="arrow arrowRight">ToRight</div><ul class="picInnerBox boxStyle"><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 class="picControl"><ul><li class="liSelected">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。
以上所述就是本文的全部内容了，希望大家能够喜欢。