(编辑：jimmy 日期: 2024/10/6 浏览：2)
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="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">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')"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。
以上所述就是本文的全部内容了，希望大家能够喜欢。