频道导航

js实现轮播图的完整代码

2019-01-08 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了js实现轮播图的完整代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

3.无缝自动轮播

轮播图的原理：

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

html布局：

Box" class="all">

</ul>
<ol> <!--里面存放小圆点-->

</ol>

css样式：

*/ img { vertical-align: top; }

.all {
  width: 550px;
  height: 320px;
  margin: 100px auto;
  padding: 5px;
  border: 1px solid #ccc;
  position: relative;
}

.inner {
  position: relative;
  width: 550px;
  height: 320px;
  background-color: pink;
  overflow: hidden;
}

.inner ul {
  width: 1000%;
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
}

.inner ul li {
  float: left;
}

.focusD {
  position: absolute;
  left: 0;
  top: 50%;
  width: 550px;
  padding: 0 10px;
  height: 30px;
  <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-sizing: border-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>;
 display: none;
}

.inner ol {
  position: absolute;
  right: 30px;
  bottom: 10px;
}

.inner ol li {
  width: 15px;
  display: inline-block;
  height: 15px;
  margin: 0 3px;
  cursor: pointer;
  line-height: 15px;
  text-align: center;
  background-color: #fff;
}
/*当前的高亮的小圆点*/
.inner ol .current {
  background-color: orange;
  color: #fff;
}

.focusD span {
  display: inline-block;
  width: 25px;
  font-size: 24px;
  height: 30px;
  color: #ccc;
  line-height: 30px;
  text-align: center;
  background: rgba(255,255,0.3);
  cursor: pointer;
}

#left {
  float: left;
}

#right {
  float: right;

}

显示 效果：

js部分：

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

获取最外面的div var Box = my$("Box"); //获取相框 var inner = Box.children[0]; //获取去相框的宽度 var imgWidth = inner.offsetWidth; // 获取ul var ulObj = inner.children[0]; //获取ul中所有的li var list = ulObj.children; //获取ol var olObj = inner.children[1]; //获取焦点 var arr = my$("arr");

然后我们需要给它创建小按钮即小圆点并注册鼠标进入事件，再此之前我们要明白，小圆点 1 2 3 并不是写死的，它是根据ul li中的图片张数来决定的，所以我们要先在js中给div中的ol中的添加li(即小圆点)，并且给ul中的图片几li添加索引值以便下一步的操作。

增加自定义属性，添加索引值 liObjs.setAttribute("index",i); //注册鼠标进入事件 liObjs.onmouSEOver = function () { //先干掉所有背景颜色 for (var j = 0; j < olObj.children.length; j++) { olObj.children[j].removeAttribute("class"); } //设置当前鼠标进来的类样式 this.className = "current"; //获取ol中li的索引值 index = this.getAttribute("index"); //移动ul animate(ulObj,-index * imgWidth); //移动动画函数 }; } //设置第一个ol中li的背景颜色 olObj.children[0].className = "current";

要实现无缝滚动就需要多一张图片才行，即克隆第一张图片，放到最后面。

下一步就要实现点击左右的按钮实现轮播

最后一步就是自动轮播，即可以创建一个定时器，每隔一段时间就调用左右按钮的点击事件，相当于点按钮，但是要注意的是当鼠标放进相框的时候要清除定时器，不然在你点击的时候它还是会自动轮播。

完整js代码：

var index=0; //获取最外面的div var Box = my$("Box"); //获取相框 var inner = Box.children[0]; //获取去相框的宽度 var imgWidth = inner.offsetWidth; // 获取ul var ulObj = inner.children[0]; //获取ul中所有的li var list = ulObj.children; //获取ol var olObj = inner.children[1]; //获取焦点 var arr = my$("arr");

//创建小按钮-----根据ul中li的个数
for (var i = 0; i < list.length; i++) {
var liObjs = document.createElement("li");
olObj.appendChild(liObjs);
liObjs.innerHTML = (i + 1);
//在ol中每个li中增加自定义属性，添加索引值
liObjs.setAttribute("index",-index * imgWidth); //移动动画函数
};
}
//设置第一个ol中li的背景颜色
olObj.children[0].className = "current";
//克隆ol中第一个li放到最后一个
ulObj.appendChild(ulObj.children[0].cloneNode(true));

var timeId=setInterval(clickHandle,3000);

my$("Box").onmouSEOver=function(){
arr.style.display="block";
clearInterval(timeId);
};
//点击右边按钮
my$("right").onclick=clickHandle;
function clickHandle() {
if (index==ulObj.children.length-1){
ulObj.style.left=0+"px";
index=0;
}
index++;
animate(ulObj,-index*imgWidth);
for (var i=0;i<olObj.children.length;i++){
olObj.children[i].className="";
}
olObj.children[index].className="current";
};

my$("box").onmouseout=function(){
arr.style.display="none";
timeId=setInterval(clickHandle,3000);
};

// 设置一个元素，移动到指定位置
function animate(element,target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
var step = 9;
step = current > target ? -step : step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
},10);
}
　　function my$(id) {
　　 return document.getElementById(id);
　　　　}