js实现简单轮播图效果

实现瞬间换图的轮播图而不是滑动效果的轮播图

实现效果：

1.图片和控制图片的圆点按时间间隔自动切换

2.鼠标进入轮播图范围时图片和控制点都停止切换

3.鼠标进入控制点时切换到对应的图片

4.点击左右边的箭头框时切换到前一张和后一张，控制点也切换

代码：

第一步，设置样式

<body>
　　<div>
　　　　<ul> //列表中放入要轮播的图片
　　　　　　<li><img src="img/1.jpg" /></li>
　　　　　　<li><img src="img/2.jpg" /></li>
　　　　　　<li><img src="img/3.jpg" /></li>
　　　　　　<li><img src="img/4.jpg" /></li>
　　　　　　<li><img src="img/5.jpg" /></li>
　　　　　　<li><img src="img/6.jpg" /></li>
　　　　　　<li><img src="img/7.jpg" /></li>
　　　　</ul>
　　　　<ol> //列表中放入控制点，第一个控制点给上已选中样式（开始时是第一张图所以第一个控制点也是选中状态）
　　　　　　<li class="on"></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　</ol>
　　　　<div class="left-arrow" >▶</div> //右箭头
　　</div>
</body>

样式就设置完成

现在开始写轮播图js部分

先获取需要操作的标签

var kuang = document.querySelector("div"); //获取整个轮播图的框，方便鼠标放上时停止轮播
var pic = document.querySelector("ul");　　　　　　　　　　　　　//获取ul标签存放图片的列表
var list = document.querySelector("ol").getElementsByTagName("li"); //获取ol标签存放控制点的列表
var timer;　　　　　　　　　　　　　　　　　　　　　　　　　　　//定义一个定时器，方便清除
var i = 0;　　　　　　　　　　　　　　　　　　　　　　　　　　　//定义一个i 作为当前显示的图片和控制点的序号
var la = document.getElementById("la");　　　　　　　　　　　　　 //获取左边的箭头
var ra = document.getElementById("ra");　　　　　　　　　　　　　//获取右边的箭头

写出图片和控制点切换时的函数

function change(num){ 　　　　　　　　//切换时的函数名叫 change 设置一个形参num 用来接收实参即当前正在显示的图片和控制点的序号
　　pic.style.marginLeft = -450*num+"px"; //设置图片向左移动图片宽度*num px 的距离可显示到另一张图片实现图片切换
　　for(let j = 0; j < 7; j++){　　　　　　　 //设置循环为了将所有（0-6）的控制点的样式清空
　　　　list[j].setAttribute("class",""); //添加class 为空
　　}
　　list[num].className = "on"; //将当前需要显示的图片和控制点的序号给上样式添加class 为 on on在style中是已经写出的样式
　　i = num;　　　　　　　　　　　　　 //将 num 的值赋给 i 改变整个循环的进度让整个循环能从正在显示的这张图片开始自动播放以及左右点击切换
}

function autoPlay() { //定义一个函数autoPlay，每次调用它时改变i的值让定时器调用它形成自动轮播的效果
　　i++; //每次用定时器调用都让i+1 显示到后面一张
　　if(i == 7){　　　　　 //到最后一张时回到第一张
　　　　i = 0;
　　}
　　change(i); 　//调用change 将i 传入
}

var timer = setInterval(autoPlay,1000); //定义timer 定时器每隔1000毫秒调用一次autoPlay函数，实现自动轮播

kuang.onmouseover = function(){ //定义轮播图的鼠标移入时间：当鼠标移入轮播图上时清除定时器timer让图片和控制点不再自动循环
　　clearInterval(timer)
}
kuang.onmouseout = function(){　　　　//定义轮播图的鼠标移出时间：当鼠标移出轮播图上时重新定义定时器timer让图片和控制点继续自动循环
　　timer = setInterval(autoPlay,1000);
}

for(let j = 0 ; j < 7; j++){ //通过循环给每个控制点都给上鼠标移入事件
　　list[j].onmouseover = function(){
　　change(j);　　　　　　　　　　　//鼠标移入时将鼠标移入的控制点的序号传入change函数让change函数将图片和控制点的样式都转换
　　}
}

la.onclick = function(){ //给左箭头定义一个鼠标点击事件：当点击它时让图片和控制点都向左改变一次
　　i = i-1; //将当前显示的图片的序号减一，如果序号从0减到-1 将序号改成最后一张的序号
　　if(i == -1){
　　　　i = 6;
　　　　change(i) 　　　　//然后直接调用change函数改变
　　}else{
　　　　change(i)　　　　　　//不管i改变成哪个序号都要调用change函数改变
　　}

}
ra.onclick = function(){ //和左箭头一样只是当图片是最后一张时点击右箭头要让图片返回第一张
　　i = i+1;
　　if(i == 7){
　　　　i = 0;
　　　　change(i)
　　}else{
　　　　change(i)
　　}
}

整个轮播图就简单实现了。i从0到6的循环可以有更简单的表示方式 i = i%7 ,这样就不要if语句判断

将改变图片和控制点样式的函数封装后直接传值调用，可大幅度减少代码量。

js实现简单轮播图效果

相关推荐