制作思路:
需要一个banner图自动轮流播放图片,下方的小按钮也要跟着轮播图动,然后鼠标进入图片框的时候图片就会暂停播放,鼠标离开就会继续播放。
要用到的知识:
- appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
- cloneNode() 方法可创建指定的节点的精确拷贝。若为itm=cloneNode(true);则将对象复制一份给
itm,若为false,复制一个空的对象给itm。 - document.createElement(nodename)创建一个元素。
- createTextNode() 创建一个文本节点元素。
- setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。会不停地调用函数,直到 clearInterval()
被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval()
方法的参数。如果你只想执行一次可以使用 setTimeout() 方法。 语法: setInterval(code,
milliseconds); setInterval(function, milliseconds, param1, param2,
…) 参数 描述 code/function 必需。要调用一个代码串,也可以是一个函数。
milliseconds 必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。 param1, param2,
… 可选。 传给执行函数的其他参数(IE9 及其更早版本不支持该参数)。
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
/*轮播图*/
.banner{width:500px;height:250px;margin:50px auto;border:1px solid #bbbbbb;overflow: hidden;}
ul{width:2500px;height:250px;position:relative;}
.ulan{transform:translatex(0px);transition: transform .5s ease-in-out;}
ul>li{width:500px;height:250px;list-style: none;float: left;}
ul>li>img{width:500px;height:250px;}
/*轮播小红点*/
#btn{position:relative;left:50%;margin-left:-40px;bottom:20px;}
#btn>li{border:1px solid #FFFFFF;width:8px;height:8px;border-radius:50%;float:left;margin-right:8px;}
.check{background-color:#f10215;}
</style>
</head>
<body>
<div class="banner">
<ul id="lunbotu" class="ulan">
<li><img src="./image/3.jpg" alt=""/></li>
<li><img src="./image/2.jpg" alt=""/></li>
<li><img src="./image/5.jpg" alt=""/></li>
<li><img src="./image/1.jpg" alt=""/></li>
<li><img src="./image/4.jpg" alt=""/></li>
</ul>
<ul id="btn">
<li class="check"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var time=null;
var allpage=5;
var ulan=document.getElementsByClassName("ulan");
var speed=1500;
var count=0;/*记录当前图片*/
var ulele=document.querySelector("#lunbotu");
var btnturn=document.querySelector("#btn");
var nowpage=0;
/*复制ul的第一个元素加在ul之后,帮助自然切换*/
ulele.appendChild(ulele.children[0].cloneNode(true));
ulele.style.width=ulele.children.length*500+"px";
//定义轮播动画
function lunbo(){
//判断是否具有过渡类,没有就添加
if(!ulele.classList.contains("ulan")){
ulele.classList.add("ulan");
}
count++;
ulele.style.transform="translatex("+(-count*500)+"px)";
nowpage=count;
timer();
btnColor();
}
allan();
function allan(){
time=setInterval(function(){
lunbo();
},speed)
}
//鼠标进入图片暂停
ulan.onmouseenter=function(){
clearInterval(time);
console.log(1);
}
ulan.onmouseleave=function(){
allan();
}
//设置循环计时器
function timer(){
setTimeout(function(){
if(count>=ulele.children.length-1){
//到达最后一张图时,将数据清零,重新进行循环
count=0;
//移除类
ulele.classList.remove("ulan");
ulele.style.transform = "translatex(0px)";
}
},500)
}
//定义轮播小按钮
function btnColor(){
if (nowpage>=1&&nowpage<allpage){
btnturn.children[nowpage-1].classList.remove("check");
btnturn.children[nowpage].classList.add("check");
}
else {
nowpage=0;
btnturn.children[allpage-nowpage-1].classList.remove("check");
btnturn.children[nowpage].classList.add("check");
}
}
/*定义一个计时器实现图片轮播*/
</script>
</body>
</html>
心得:
现在自己最大的问题就还是基础知识不牢靠,做起来异常非常的慢,本次耗费最长时间的是轮播图动画尾页与第一页切换问题,以后多看。
待解决问题:
1、点击下方小btn的时候,图片切换到相对应的页数。
2、鼠标进入banner图的时候,动画未发生暂停。