纯javaScript、jQuery实现个性化图片轮播【推荐】

纯爪哇岛描述语言实现个性化图片轮播

轮播原理说明如上图所示：

1.画布部分（可视区域)属性说明：overflow:hidden使得超出画布部分隐藏或说不可见位置：相对会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。使得使用了位置：绝对元素相对于画布位置进行定位；

绝对的元素脱离了文档结构，产生破坏性，导致父元素坍塌，浮动元素也会脱离文档结构绝对的元素会悬浮在页面上方，遮挡其他部分显示，这点和某图像编辑软件；用计算机修改（图片或照片)图层相似，所以要使用z指数控制出现顺序

2.轮播注意点：左右无限滚动

前一个按钮第一张图片的前一张是最后一张图片，

下一个按钮最后一张图片的下一张图片是第一张，

上一个按钮、下一个按钮位置的偏移是通过设置上一个img容器、下一个img容器的左边的相对于画布属性值

点击-选择-显示-按钮区域，点击该区域小圆圈是通过上一次图片的所在指数，当前点击我的索引，计算公式：(我的索引-索引)*(-图片的宽度宽度)

3.动画过渡注意点：点击上一个按钮、下一个按钮、点击选择显示按钮小圆圈，判定当前是否处于动画状态中

4.定时器setTimeout()、clearTimeout

实现效果图

钢性铸铁样式

/**CSS样式* *///* *画布大小*/#集装箱{ margin:0 auto宽度： 600像素；高度： 400像素；飞越：隐藏；/*超出画布部分隐藏*/position:相对；/*相对定位*/cursor:指针；}/**图片容器*/# list { width : 4200 px；高度： 400像素；绝对位置：z索引：1;} # list img { float: left}/**轮播选中按钮样式*/# button {位置：绝对值；bottom: 25pxleft: 175px宽度： 250像素；z-index : 2；} #按钮ul Li {列表式：无；宽度： 15px边界半径： 50%;padding: 7.5px高度： 15px右边距： 10px背景：绿色；向左浮动：font:15px/15px "微软雅黑";文本对齐：中心；字体粗细：粗体；颜色：白色；光标：指针；} #按钮ul Li。chos {背景：橙色；} #容器：悬停.箭头{显示：块；} # pre { left : 20px } # next { right : 20px }/* *下一个之前定位*/.箭头{位置：绝对值；宽度： 40px高度： 40px背景：黑色；z-index : 3；top: 180px文本装饰：无；文本对齐：中心；线高： 40pxfont-size : 40px颜色：白色；opa city 3360 0.3 filter : alpha(不透明度=0.3);显示器：无；}/* *下一个之前按钮透明度*/#集装箱a :悬停{ opa city 3360 0.7filter: alpha(不透明度=0.7);}html代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题纯爪哇岛描述语言实现个性化图片轮播/title link rel='样式表type=' text/CSS ' href=' style/main。CSS ' script type=' text/JavaScript ' src=' http : scripts/scrollimg。js/script/head body div id=' container ' div id=' list ' style=' left :-600 px ' img src=' http : images/5。jpg ' img src=' http : images/1。jp1 .一、javaScript实现图片轮播

窗户。onload=function(){ var container=document。getelementbyid(“容器”)；var列表=文档。getelementbyid(' list ')；var buttons=文档。getelementbyid(' button ').getElementsByTagName(' Li ')；var prev=文档。getelementbyid(' prev ')；var next=文档。getelementbyid(' next ')；定义变量指数=1;定义变量区间=1000;定义变量计时器=nullvar动画=false//next next。onclick=function(){ if(！动画){ animate(-600)；};索引=1;if(index 5){ index=1；};show button()；console.info('next '索引);}//prev prev。onclick=function(){ if(！动画){动画(600);}索引-=1;if(index 1){ index=5；}显示按钮()；console.info('prev '索引);}//动画函数动画(偏移){动画=真；var left=ParSeint(列表。风格。左)偏移量；var animatime=600//位移总时间定义变量区间=10;//时间间隔var速度=偏移量/(动画时间/间隔)；//每次位移量var go=function(){//animate内部函数if ((速度0 ParSeint(列表。风格。左)左)| |(速度0 ParSeint(列表。风格。左)左)){//是否位移名单。风格。left=ParSeint(列表。风格。左)速度px '；setTimeout(go，interval)} else { list。风格。left=left ' px如果(左-3000) { //最后一张后面名单。风格。left=-600 ' px '；//显示前一张};如果(左-600){//第一张最前面名单。风格。left=-3000 ' px '；//显示最后一张}动画=假；};} go()；} //chos函数show button(){ for(var I=0；长度；我)按钮.class name=}；按钮[索引-1]。{ chos }//buttons-click for(var I=0；长度；我)按钮.onclick=function(){ if(this。类名=' chos '){ return；} var myIndex=ParSeint(这。GetAttribute(' index ')；var offset=(myIndex-index)*-600；//偏移量动画（偏移);index=myIndex//设置索引show button()；} };函数play(){ timer=setTimeout(函数(){ next。单击()；play()；}，间隔)}函数stop(){ clearInterval(计时器);} play()；集装箱。onmouseover=function(){ stop()；}容器。onmouseout=function(){ play()；}}二、jQuery实现图片轮播

$(function(){ var container=$(' # container ')；var list=$(' # list ')；var button=$(' # container ').find(' Li ')；var prev=$(' # pre ')；var next=$(' # next ')；定义变量指数=1;var len=5；定义变量区间=3000;定义变量计时器；函数动画(偏移){ var left=parsent(列表。CSS('左')偏移量；if(offset 0){ offset='=' offset；} else { offset='-=' Math。ABS(偏移量)；}列表。动画({ ' left ' : offset }，300，function(){ if(left-200){ list }。CSS(' left '，-600 * len)；} if(左(-600 * len)){ list。CSS(' left '，-600)；} });}函数show button(){ button。等式(指数-1).addClass('chos ').兄弟姐妹()。移除CLaSS(' chos ')；} function play(){ timer=setTimeout(function(){ next。触发器(' click ')；play()；},间隔);}函数stop() { clearTimeout(计时器);} next.bind('click '，function(){ if(list。is(' :动画'){ return} if(index==5){ index=1；} else { index=1；} animate(-600)；show button()；});prev.bind('click ')，function(){ if(list。is(' :动画'){ return} if(index==1){ index=5；} else { index-=1；}动画(600);show button()；});buttons .每个(function () { $(this)).bind('click ')、function(){ if(list)。是(' :动画')| | $(这个).attr(' class ')==' chos '){ return；} var myIndex=parseInt($(this).attr(' index ')；var offset=-600 *(myIndex-index)；动画（偏移);index=myIndexshow button()；}) });container.hover(停止，播放);play()；});源码下载http://pan.baidu.com/s/1kVfnGF1

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！