js实现轮播图的完整代码

今天写一个完整的轮播图，首先它需要实现三个功能：

1.鼠标放在小圆点上实现轮播

2.点击焦点按钮实现轮播

3.无缝自动轮播

轮播图的原理：

一系列的大小相等的图片平铺，利用半铸钢钢性铸铁(铸造半钢)布局只显示一张图片，其余隐藏。通过计算偏移量（封装一个动画函数)自动播放，或通过手动点击事件切换图片。

超文本标记语言布局：

div id=' box ' class=' all ' div class=' inner '！-相框-ul lia href=' # ' img src=' http : images/18。jpg ' width=' 550 ' height=' 320 ' alt=' '/a/Li lia href=' # ' img src=' http : images/19。jpg ' width=' 550 ' height=' 320 ' alt=' '/a/Li lia href=' # ' img src=' http 3360 images/14。jpg '宽度-里面存放小圆点-/ol/div class=' Focusd ' id=' arr ' span id=' left ' lt/span span id=' right ' gt/span/div/div CSS样式：

* { margin : 0；padd : 0；} /* - 清除底部三像素距离- */img {垂直-对齐：顶部；} .所有{ width : 550 px h8 : 320 pxmargin 3360 100 px自动；padding: 5pxborder: 1px固体# ccc相对位置：} .内部{位置：相对；宽度： 550像素；高度： 320像素背景-颜色：粉色；飞越：隐藏；} .内部ul {宽度： 1000%;列表样式：无；绝对位置：top : 0；左： 0；} .内部ul li {左侧浮动：} .focusD { position:绝对值；左： 0；前：名50%；宽度： 550像素；padding: 0 10pxheight: 30px盒子尺寸：边框盒子；显示器：无；} .内部ol { position:绝对值；right: 30pxbottom: 10px}。内部ol li宽度： 15px显示器：内联块；高度： 15pxmargin: 0 3pxcursor:指针；线高： 15px文本对齐：中心；背景-color : # fff；} /*当前的高亮的小圆点*/.内心深处。当前{背景-颜色：橙色；color: # fff}。focusD span { display : inline-block；宽度： 25pxfont-size : 24pxheight: 30pxcolor: # ccc线高： 30px文本对齐：中心；背景： rgba(255，255，255，0.3)；光标：指针；} #左{左侧浮动： } #右侧{右侧浮动： }显示效果：

射流研究…部分：

接下来我们要写射流研究…代码，首先我们先获取我们需要的所有元素。注：my$('id ')即document.getElementById，为了简便即建的方法。

定义变量索引=0;//获取最外面的div var box=my $(' box ')；//获取相框var inner=box。子级[0]；//获取去相框的宽度inner.offsetWidth//获取ul var ULobj=内部。子级[0]；//获取保险商实验所中所有的ulObj.children//获取ol var OloBj=内部。孩子[1]；//获取焦点var arr=my $(' arr ')；然后我们需要给它创建小按钮即小圆点并注册鼠标进入事件，再此之前我们要明白，小圆点1 2 3 并不是写死的，它是根据礼券列表中的图片张数来决定的，所以我们要先在射流研究…中给差异中的开环（同开环)中的添加li(即小圆点),并且给保险商实验所中的图片几里添加索引值以便下一步的操作。

//创建小按钮-根据保险商实验所中里的个数for(var I=0；一、清单。长度；I){ var liObjs=文档。创建元素(“李”)；奥洛比。append child(liobj)；利奥比斯。innerhtml=(I ^ 1)；//在开环（同开环)中每个里中增加自定义属性，添加索引值liObjs.setAttribute('index '，I)；//注册鼠标进入事件利奥比斯。onmouseover=function(){//先干掉所有背景颜色for(var j=0；j .奥洛比。孩子们。长度；j ) { olObj.children[j].移除属性(“类”)；} //设置当前鼠标进来的类样式this.className=' current//获取开环（同开环)中里的索引值索引=这个。GetAttribute(' index ')；//移动ul animate(ulObj，-index * IMgwidth)；//移动动画函数};} //设置第一个开环（同开环)中里的背景颜色olObj.children[0].当前要实现无缝滚动就需要多一张图片才行，即克隆第一张图片，放到最后面。

//克隆开环（同开环)中第一个里放到最后一个ulobj。appendchild(ulobj。儿童[0]).cloneNode(true))；下一步就要实现点击左右的按钮实现轮播

//点击右边按钮我的$('右')。onclick=单击句柄函数单击handle(){ if(index==ulobj。孩子们。length-1){ ulobj。风格。left=0 ' px索引=0;}索引；动画(ulObj，-index * imgWidth)；if(index==list。length-1){ Olobj。儿童[0].className=' currentolobj。孩子们。孩子们。长度-1].class name=} else { for(var I=0；孩子。长度；i ){ olObj.children[i].colobj . children[index].类名='当前；} };//点击左边按钮我的$("左")。onclick=function(){ if(index==0){ index=list。长度-1；ulobj。风格。left=-index * IMgwidth ' px '；}索引-;动画(ulObj，-index * imgWidth)；for(var I=0；孩子。长度；i ){ olObj.children[i].colobj . children[index].class name=' current }；最后一步就是自动轮播，即可以创建一个定时器，每隔一段时间就调用左右按钮的点击事件，相当于点按钮，但是要注意的是当鼠标放进相框的时候要清除定时器，不然在你点击的时候它还是会自动轮播。

完整射流研究…代码：

脚本定义变量索引=0;//获取最外面的div var box=my $(' box ')；//获取相框var inner=box。子级[0]；//获取去相框的宽度inner.offsetWidth//获取ul var ULobj=内部。子级[0]；//获取保险商实验所中所有的ulObj.children//获取ol var OloBj=内部。孩子[1]；//获取焦点var arr=my $(' arr ')；//创建小按钮-根据保险商实验所中里的个数for(var I=0；一、清单。长度；I){ var liObjs=文档。创建元素(“李”)；奥洛比。append child(liobj)；利奥比斯。innerhtml=(I ^ 1)；//在开环（同开环)中每个里中增加自定义属性，添加索引值liObjs.setAttribute('index '，I)；//注册鼠标进入事件利奥比斯。onmouseover=function(){//先干掉所有背景颜色for(var j=0；j .奥洛比。孩子们。长度；j ) { olObj.children[j].移除属性(“类”)；} //设置当前鼠标进来的类样式this.className=' current//获取开环（同开环)中里的索引值索引=这个。GetAttribute(' index ')；//移动ul animate(ulObj，-index * IMgwidth)；//移动动画函数};} //设置第一个开环（同开环)中里的背景颜色olObj.children[0].当前/克隆开环（同开环)中第一个里放到最后一个ulobj。appendchild(ulobj。儿童[0]).cloneNode(true))；var timeId=setInterval(点击句柄，3000);我的$("盒子")。onmouseover=function(){ arr。风格。display=' blockclearInterval(TiME id)；};//点击右边按钮我的$('右')。onclick=单击句柄函数单击handle(){ if(index==ulobj。孩子们。length-1){ ulobj。风格。left=0 ' px索引=0;}索引；动画(ulObj，-index * imgWidth)；if(index==list。length-1){ Olobj。儿童[0].className=' currentolobj。孩子们。孩子们。长度-1].class name=} else { for(var I=0；孩子。长度；i ){ olObj.children[i].colobj . children[index].className=' current } }//点击左边按钮我的$("左")。onclick=function(){ if(index==0){ index=list。长度-1；ulobj。风格。left=-index * IMgwidth ' px '；}索引-;动画(ulObj，-index * imgWidth)；for(var I=0；孩子。长度；i ){ olObj.children[i].colobj . children[index].类名='当前；};我的$("盒子")。onmouseout=function(){ arr。风格。显示='无'；timeId=setInterval(点击句柄，3000);};//设置一个元素，移动到指定位置函数动画(元素，目标){ clearInterval(元素。时间id)；元素。time id=SetInterval(function(){ var current=element。offsetleft定义变量步长=9;步长=当前目标？-步骤：电流=阶跃；if(数学。目标电流数学。ABS(步骤)){元素。风格。left=当前“px”；} else { clearInterval(元素。timeid)；元素。风格。left=目标“px”；} }, 10);}函数我的$(id){返回文档。getelementbyid(id)；}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。