如何用JS实现轮播图效果

轮播图现在在各大网站已经屡见不鲜了。今天来详细讲解一下轮播图的实现效果。

1.序号轮播

1）可以根据ul中图片个数的变化实时的改变序号个数

2）无缝滚动必须要动态创建

1）animate（需要滚动的dom元素，end）

2）通过序号的下标计算end值

（2）箭头轮播

①鼠标移入移出

②动画轮播

1）计数变量pic计算end值，pic表示被推出显示窗口的图片个数。

2）点击右箭头pic自加，点击左箭头pic自减。

3）利用pic计算end即可

（3）无缝滚动

①以右箭头无缝滚动为例

（4）关联序号轮播和箭头轮播

①序号轮播关联箭头轮播

②箭头轮播关联序号轮播

（5）自动轮播

①每隔一段时间就向后走一张图片

1）点击右箭头可以向后走一张图片

2）设置间歇定时器

（6）鼠标移入/移出/——暂停/继续

①当鼠标移入显示轮播图的DIV自动轮播暂停

1）鼠标移入事件，清除定时器

2）鼠标移出事件，定时器启动

<title>

<style>

*{

margin:0;

padding: 0;

}

#box{

width:500px;

height: 250px;

border:1px #000 solid;

padding:5px;

margin:50px auto;

position: relative;

}

#banner{

width: 500px;

height: 250px;

overflow: hidden;

position: absolute;

}

ul{

list-style: none;

width:4000px;

float: left;

position: absolute;

}

ul li{

float: left;

}

ul li img{

height:250px;

width:500px;

}

.newImg{

height:250px;

width:500px;

}

#btn{

position: absolute;

z-index:3;

display:none;

}

#left{

position:absolute;

top:105px;

cursor:pointer;

}

#right{

position:absolute;

top:105px;

left:465px;

cursor:pointer;

}

ol{

position:absolute;

z-index: 3;

list-style:none;

bottom:15px;

right:10px;

}

ol li{

background:#fff;

float:left;

margin-right:10px;

width: 20px;

height: 20px;

text-align: center;

line-height:20px;

cursor:pointer;

}

.current{

background:lightpink;

color:#fff;

}

//获取元素

var ul = document.querySelector("ul");

var ulLis = ul.children;

var ol = document.querySelector("ol");

var img = ulLis[0].children[0];

var imgWid = img.offsetWidth;

var box = document.querySelector("#box")

var btn = document.querySelector("#btn")

var right = document.querySelector("#right")

var left = document.querySelector("#left")

//创造动画函数

//这是自己封装的动画函数

var timer = null;

var animate = function(obj,end){

//先清除定时器是因为防止序号轮播和箭头轮播冲突

clearInterval(timer);

timer = setInterval(function(){

//每调用图片一次走的距离

var step = 15;

//实时获取起点位置

var leader = obj.offsetLeft;

//对图片向右走还是向左走进行判断

end > leader ? step = step : step = -step;

if(end != leader){

obj.style.left = leader + step + "px";

}

//如果最后剩余的距离在step的范围以内了就直接定位到

//终点吧,因为这时候再调用一次step会大于end终点位置

if(Math.abs(end - leader) < Math.abs(step)){

obj.style.left = end + "px"

clearInterval(timer);

}

},15)

}

//获取元素,创造序号

//创造序号就一个要求,写在克隆图片前面就行

//否则在循环的时候克隆的图片也会被循环进去

//后边会有提到克隆图片

for(var i = 0; i < ulLis.length; i++){

var olLis = document.createElement("li");

olLis.innerText = i + 1;

ol.appendChild(olLis);

}

//给序号添加鼠标经过事件

var olLis = ol.children;

for(var i = 0; i < olLis.length; i++){

//循环i在函数体内只能输出最后循环完的值,

//所以先定义一个对象来接收一下每次循环

//的i的值

olLis[i].index = i;

olLis[i].onmouseover = function(){

//排他思想,网上有教程,不赘述

for(var j = 0; j < olLis.length; j++){

olLis[j].className = "";

}

//此时,this表示鼠标经过的哪个序号

this.className = "current";

//序号开始轮播

//将箭头下标和序号进行联动

pic = this.index;

//this其实也代表了每张轮播图片的下标,

//想让第几张图片出现,就让第几张图片的下标

//乘以图片的宽度就可以了,仔细想想,这个道理

//挺容易理解的…

//负号是因为图片要向左走,左为负

var end = -this.index * imgWid;

//调用一开始封装好的运动函数

animate(ul,end)

}

}

//箭头添加鼠标经过事件

//显示或者隐藏箭头

box.onmouseover = function(){

btn.style.display = "block";

//当鼠标放在图片上时,让轮播暂停

//暂停也就是直接清除定时器就可以

clearInterval(timerr);

}

box.onmouseout = function(){

btn.style.display = "none";

//鼠标移出轮播图片再次启动定时器

timerr = setInterval(function(){

right.onclick();

},3000)

}

//克隆第一张片准备无缝滚动

//轮播图为什么要克隆第一张图片

//百度一搜一堆解释,这里主要讲代码,不赘述

var newImg = ulLis[0].children[0].cloneNode(true);

newImg.setAttribute("class","newImg")

ul.appendChild(newImg);

//右箭头点击事件

//创建技术变量,类似充当下标使用

var pic = 0;

//第二遍轮播的时候,是没有0这个下标的,这个跟

//克隆图片之后无缝滚动的判断有关系;

var square = 0;

//在轮播图初始化的时候显示第一张图片,

//所以得手动点亮第一个序号

olLis[0].className = "current";

right.onclick = function(){

//如果已经显示克隆图片,就把轮播重新定位

//最开始的位置

//并把计数变量pic也归零

if(pic == ulLis.length-1){

pic = 0;

ul.style.left = "0px"

}

//每点击一次右箭头都让计数变量pic自加一次

pic++;

//将代表序号下标的变量和箭头用的计数变量

//进行联动;

//此时,联动已经完成

//square==pic==序号轮播的用于接收循环i的值的

//this.index对象的值

square = pic;

var end = -pic * imgWid;

animate(ul,end)

//排他思想,跟上一个一样的用法

for(var i = 0; i < olLis.length; i++){

olLis[i].className = "";

}

if(square == ulLis.length-1){

square = 0;

}

olLis[square].className = "current"

}

//左箭头点击事件

//跟右点击事件一样的性质

left.onclick = function(){

if(pic == 0){

pic = ulLis.length-1

ul.style.left = -pic * imgWid + "px";

}

pic--;

square = pic;

var end = -pic * imgWid;

animate(ul,end)

for(var i = 0; i < olLis.length; i++){

olLis[i].className = "";

}

olLis[square].className = "current";

}

//自动轮播

//每隔3秒自动调用一次右箭头就可以

var timerr = setInterval(function(){

right.onclick();

},3000)

相信看到这里各位大致已经知道怎么去做轮播图了，小编这里整理了一些web前端的学习资料，感兴趣的小可爱感觉行动起来吧，关注小编，私信【学习】，即可免费获得哦！