本文的例子分享了jQuery轮播的具体代码，供大家参考。具体内容如下

1.html css js代码

！DOCTYPE html html head title/title style type=' text/CSS ' * { margin : 0；padd : 0；文本装饰：无；}车身{ padding: 20px } #容器{最小宽度： 1000像素；/*宽度： 1300像素；*/高度： 400 px飞越：隐藏；相对位置：margin : 0 auto } # list {/* width : 9100 px；*/高度： 400 px绝对位置：z-index : 1；top :0 left : 0；飞越：隐藏；} # list img { float: left/*宽度： 1300像素；*/高度： 400 px} # buttons { position : absolute；高度： 10px宽度： 100像素；z-index : 2；bottom: 20pxleft: 660px文本对齐：中心；} #按钮跨度cursor:指针；向左浮动：宽度： 10px高度： 10px右边距： 9px显示器：内联块；背景图像： URL(img/_ eb1b 95 e . png)；背景-位置：-1079像素-687像素；} #按钮。在{背景-位置：-1049 px-687 px；} .箭头cursor:指针；显示器：无；宽度： 36px高度： 76px绝对位置：z-index : 2；top: 180px背景-color: rgba(0，0，0，3);color : # fff } # container : hover .箭头{显示：块；} # prev {后台： URL(img/_ eb1b 95 e . png)；背景-位置：-569像素-491像素；left : 20px } # next { background : URL(img/_ eb1b 95 e . png)；背景-位置：-513像素-491像素；right : 20px }/style/head body div id=' container ' div id=' list ' img src=' http : img/5。jpg ' alt=' 1 '/img src=' http : img/1。jpg ' alt=' 1 '/img src=' http : img/2。jpg ' alt=' 2 '/img src=' http : img/3。jpg ' alt=' 3 '/img srcid=' prev ' class=' arrow '/a a href=' JAVAScript :'id=' next ' class=' arrow '/a/div脚本类型=' text/JAVAScript ' src=' http : js/jquery。1 .10 .2 .js '/script脚本类型=' text/JavaScript ' var container=$(' # container ')；var list=$(' # list ')；var list img=$(' # list img ')；var button=$(' # button span ')；var prev=$(' # prev ')；var next=$(' # next ')；定义变量指数=1;var len=5；var num=len 2；定义变量区间=3000;//变换周期定义变量计时器；var客户端宽度=文档。文档元素。客户端宽度；//屏幕的宽度var con width=ParSeint(客户端宽度)-100；//显示界面的宽度$(function(){ setwidth()；//设置容器的宽度以及里面元素目录和目录中图片的宽度函数动画(偏移){ var left=parsent(列表。CSS('左')偏移量；//列表。动画({ left : left ' px ' }，' normal ')；名单。动画({ left : left ' px ' }，conwidth，function(){ //第一位规定产生动画效果的样式，第二位设置速度，第三位是动画函数执行完后执行的函数如果(左-conwidth) {//如果是第一个元素还向前移，就让最后一个元素是这个元素list.css('left '，-con width * len)；} if (left (-conwidth*len)) {//如果是最后一个元素还向后移，就让第一个元素是这个元素list.css('left '，-con width)；} });}函数showbutton(){//通过操作钢性铸铁来将显示的图片代表的下方原点变大，其余变小buttons.eq(索引-1)。addClass('on ').兄弟姐妹()。移除CLaSS(' on ')；} 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 } animate(-con width)；show button()；});prev.bind('click ')，function(){ if(list。is(' :动画'){ return} if(index==1){ index=5；} else { index-；}动画(con宽度)；show button()；});buttons .每个(function(){ $(this)).bind('click ')、function(){ if(list)。是(' :动画')| | $(这个).attr(' class ')==' on '){ return；} var myindex=parseInt($(this).attr(' index ')；var offset=-con width *(我的索引-index)；动画（偏移);index=my index show button()；}) });container.hover(停止，播放);//鼠标悬停时执行停止()函数，移开时执行play()play()；});函数setwidth(){//设置容器的宽度以及里面元素目录和目录中图片的宽度容器[0].风格。width=con width“px”；列表[0]。风格。width=num * con width " px列表[0]。风格。left='-' con width ' px '；for(var I=0；我列出了长度；I){ listimg[I]。风格。宽度=con宽度' px '；} }/脚本/正文/html2、实现思路

轮播的功能可以分为：自动循环播放，点击左侧按钮显示正面图片，点击背面显示背面图片，点击下方圆点实现跳转播放。

1.自动播放功能：设置定时器，每隔一个周期触发一次点击右侧按钮的功能。2.点击左侧按钮显示上图：首先要了解转盘原理。图表

大盒子是容器，小盒子是清单。列表中有很多图片，排成一行，没有间隔。每次都能看到的图片都是通过绝对定位来操作的，也就是把可见的部分定位在容器里面。单击左按钮时，前面的图片向右移动，相当于绝对定位中的左值加上一张图片的宽度。

3.点击右侧按钮显示背面图片：原理与左侧相同，相当于将图片向左移动显示背面图片。4.点击下方圆点实现跳转播放：此时，页面为第二张图片。跳到第五张相当于点击右边的按钮三次，相当于把图片向左移动了三张图片的宽度。

3.需要掌握的知识点：

css:

绝对本地化

js jq:

document . document element . client width；obj . animate()；obj . CSS()；obj . eq(). obj . addCLaSS()；obj .姐弟()；obj . remove class()；setTimeout()；cleartime out()；obj . trigger()；obj . attr()；obj . bind()；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。