需求: 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轮播图视频