本文介绍了一种使用HTML、CSS及JavaScript实现轮播图的方法，包括鼠标操作控制、自动轮播、无缝滚动等功能。
需求： 1.鼠标经过轮播图，左右按钮显示，鼠标离开按钮隐藏
2.鼠标点击右侧按钮，图片轮播
3.小圆圈跟着图片变化
4.点击小圆圈播放图片
5.鼠标离开，图片自动轮播，鼠标在图片上时自动轮播停止
目录
html结构：
大盒子，左右按钮，小圆点，ul（滚动的长条），li放a和图片
css结构：
li必须在一行（小li浮动）——float：left
设置ul的宽度大一点（图片宽度*图片数量）——ul.width:500%
js结构:
1.鼠标经过轮播图，左右按钮显示，鼠标离开按钮隐藏
先隐藏：display：none
鼠标经过显示：大盒子.addeventlistener（“mouseenter”，funcion（）{ 左右按钮。style。display = “block” }）
大盒子.addeventlistener（“mouseenter”，funcion（）{ 左右按钮.style.display = “block” }）鼠标离开隐藏：mouseleave
2.动态生成小圆圈
ol.li = ul.li
用for循环，
动态的创建小li（创建节点：createElement（“li”）），
把小li插入到ol里去（插入节点：ol.appendChild（li））
把ol里的第一个小li添加白色底色，添加类（ol.children[0].className = "creent"）
3.点击哪个小圆圈，哪个小圆圈就会变白（排他思想）
在生成小圆圈的时候就添加点击事件，然后执行排他思想
干掉所有人，把所有的小li清除 current类（循环清空）
点击当前小圆圈，就添加curren类
4.点击小圆圈图片滑动
引入animater.js，这个animater.js要写到index.js上面
ul要有定位才能使用animater函数
注意：这里时ul在移动而不是小li在动
ul移动的距离=小圆圈索引号*图片的长度（图片向左是负的）
图片的宽度：图片.focusWidth
小圆圈的索引号通过自定义属性
设置索引号：li。setAttribute（“index”，i）；
获得索引号：var index = this。getAttribut（“index”）；
5.点击右侧按钮，图片滚动一张
添加点击事件
添加全局变量num，每点击一次就然后num++，num就是第几个图片的意思了
使用animater.js，和点击小圆圈一样
无缝滚动：让js把第一张图片的li复制一份放到最后，然后设置left=0，再按一次的时候就到第二张了。
js克隆(先生成再克隆)：克隆第一张图片（var firest = ul.children[0].clineNode=(true)）
克隆的放ul最后：ul。appendChild（first）
如果num == 4（ul。children。length-1），ul.style.left = 0；num=0；
6.点击右侧按钮，小圆点跟着右侧按钮走
添加一个全局变量circle，每点击一次，就自增1
然后清除其他小圈圈的白色（循环清除类名）
留下当前cirle索引号的小圆圈的白色 ol.childe[circle].className = "curren";
如果circle为最后一个（ol.childen.length）了，就让circlle=0；
bug：小圆圈和右侧按钮有存在不同步问题
修复bug：点击了哪个小li就让这个小li的索引号给num，再将小li的索引号给circle
num = index ；circle = index；
7.点击左侧按钮和右侧一样
num--
num的而判断应该是：如果num为第一张图片num=0，则跳到跳到最后一张图片的位置num = ul.children.length-1；ul.style.left = -num*lunboWidth + "px";
circle--；
如果小圆圈的索引号为<0，circle=0则跳到最后一个小圆圈：circle = ol.children.length-1;
8.鼠标不在大盒子上方的时候自动轮播图片
手动调用事件 arrow_r.click（）
用定时器使用手动调用事件，调用的是右按钮的事件。
再在鼠标放上去的时候清除定时器，鼠标没在上面的时候就启用定时器（要给定时器名字）
clearInterval(timer);//停止
timer = null ;//清除
html+css代码
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.lunbo{
margin: 100px auto;
position: relative;
width: 721px;
height: 455px;
background-color: pink;
}
.lunbo ul{
position: absolute;
width: 600%;
}
.lunbo ul li{
float: left;
left: 0;
top: 0;
}
.btn-l,
.btn-r{
display: none;
position: absolute;
top: 50%;
width: 24px;
height: 40px;
background-color: rgba(0,0,0,0.3);
line-height: 40px;
text-align: center;
color: #fff;
z-index: 2;
}
.btn-r{
left: 697px;
}
.circle{
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li{
list-style: none;
float: left;
width: 8px;
height: 8px;
border:2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
}
.current{
background-color: #fff;
}
</style>
<body>
<div class="lunbo">
<a href="jiavascript:;" class="btn-l"><</a>
<a href="jiavascript:;" class="btn-r">></a>
<ul>
<li><a href="javascript:;"><img src="./image/focus.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./image/focus1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./image/focus2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./image/focus3.jpg" alt=""></a></li>
</ul>
<ol class="circle">
</ol>
</div>
</body>js代码段
<script>
var lunbo = document.querySelector(".lunbo");
var btn_l = lunbo.querySelector(".btn-l");
var btn_r = lunbo.querySelector(".btn-r");
var lunboWidth = lunbo.offsetWidth;
//1.鼠标经过轮播图，左右按钮显示，鼠标离开按钮隐藏
lunbo.addEventListener("mouseenter",function(){
btn_l.style.display = "block";
btn_r.style.display = "block";
clearInterval(timer);//停止
timer = null ;//清除
})
lunbo.addEventListener("mouseleave",function(){
btn_l.style.display = "none";
btn_r.style.display = "none";
//启用
timer = setInterval(function(){
btn_r.click();
},2000)
})
//2.生成动态小圈圈
var ul = lunbo.querySelector("ul");
var ol = lunbo.querySelector(".circle")
for(var i =0;i<ul.children.length;i++){
//创建li
var li = document.createElement("li");
//把li放到ol的里面
ol.appendChild(li);
//设置小圆圈的索引号
li.setAttribute("index",i);
//3.点击圈就变白
li.addEventListener("click",function(){
//排他
for(var i=0;i<ol.children.length;i++){
ol.children[i].className = " ";
}
this.className = "current";
//4.小圆圈控制图片滚动
//获得小圆圈索引号
var index = this.getAttribute("index");
//修复bug
num = index;
circle = index;
//ul移动的距离=小圆圈索引号*图片的长度（图片向左是负的）
animate(ul,-index*lunboWidth);
})
}
ol.children[0].className = "current";
//无缝滚动
var first =ul.children[0].cloneNode(true)
ul.appendChild(first);
//5.点击右侧按钮轮播
var circle =0;
var num = 0;
var flag = true;
btn_r.addEventListener("click",function(){
if(flag){
flag = flag;//关闭节流阀
//图片跟着按钮走
if(num == ul.children.length-1){
ul.style.left = 0;
num = 0;
}
num++;
animate(ul,-num*lunboWidth,function(){
flag = true;//打开节流阀
});
//6.小圆圈跟着右按钮走
circle++;
if( circle == ol.children.length){
circle = 0;
}
for(var i=0;i<ol.children.length;i++){
ol.children[i].className = "";
}
ol.children[circle].className = "current";
}
})
// 7.左侧按钮
btn_l.addEventListener("click",function(){
if(flag){
flag = flag;//关闭节流阀
//图片跟着按钮走
if(num == 0){
num = ul.children.length-1
ul.style.left = -num*lunboWidth + "px";
}
num--;
animate(ul,-num*lunboWidth,function(){
flag = true;//打开节流阀
});
//6.小圆圈跟着右按钮走
circle--;
if( circle < 0){
circle = ol.children.length-1;
}
for(var i=0;i<ol.children.length;i++){
ol.children[i].className = "";
}
ol.children[circle].className = "current";
}
})
//8.自动轮播
var timer = setInterval(function(){
btn_r.click();
},2000)
</script>引入的animate代码段
function animate(obj,target,callbrak){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if(obj.offsetLeft == target){
clearInterval(obj.timer);
// 回调函数写在定时器里面
if(callbrak){
callbrak();
}
}
var step = (target - obj.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
obj.style.left = obj.offsetLeft +step+"px";
},15)
}引入animate
在html中书写，并且，如果又index.js的话，要将animate写在index上面，因为index要引入animater，需要先有animate再有index
<script src="./animate.js"></script>运行结果
js轮播图视频
扫一扫
969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
