JavaScript中的轮播图在许多网站中能够经常看到,如淘宝京东首页等。轮播图还是比较简单的,只要理解动画原理以及定时器函数
setTimeout()和clearTimeout()
setInterval()和clearInterval()
这四个函数都是属于window对象的。Window是可以省略的。
使用格式:
SetTimeout(函数,时间);
SetInterval(函数,时间);
其中,时间是以毫秒作为单位,如果要写1s,需要写成1000.
函数,可以写在外面,传入函数名,也可以直接写在参数列表
如果需要清除定时器,需要使用clearTimeout,clearInterval。
在清除定时器的时候,需要获得定时器的引用。
好了,理解这些定时器后开始写轮播图了。
先来看看HTML代码部分:
<div class="box">
<div id="picth">
<a href=""><img src="images/jd1.jpg" alt=""></a>
<a href=""><img src="images/jd2.jpg" alt=""></a>
<a href=""><img src="images/jd3.jpg" alt=""></a>
<a href=""><img src="images/jd4.jpg" alt=""></a>
<a href=""><img src="images/jd5.jpg" alt=""></a>
<a href=""><img src="images/jd6.jpg" alt=""></a>
</div>
<div class="nav-bar">
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
CSS代码部分:
<style> *{margin: 0; padding: 0;} .box{ width: 730px; height: 454px; position: relative; overflow: hidden; margin: 50px auto 0; } #picth{ width: 4380px; height: 454px; position: absolute; left: 0; top: 0; } #picth a{ float: left; } .nav-bar{ position: absolute; bottom: 10px; width: 130px; left: 300px; } ul{list-style: none;} .nav-bar li{ height: 12px; line-height: 12px; width: 12px; float: left; margin: 0 4px; background: #333; color: #FFFFFF; text-align: center; } .nav-bar .on{background: #c00;} </style>
css代码中我并没有使用百分比的宽度。图片的大小为730*454
这里有两点需要注意:1、整个盒子.box,图片,图片picth对应的数字.nav-bar都要写定位。
2、图片有多少张,则图片中的div宽度就730宽度*图片的数量。高度不变。
JavaScript代码如下:
<script> //图片切换,先获取所有的图片 var picth = document.getElementById("picth"); var li = document.getElementsByTagName("li"); var t = null;//定义一个定时器 var init = 0;//默认为第一张图片 //时间函数 function chang (){ t = setInterval( function(){ init ++ ; if( init >=6){ init = 0; } picth.style.left = init *-730 + "px"; //做左移动 //导航数字切换 for ( var i = 0, len = li.length; i < len; i++){ li[i].className = ""; } li[init].className = "on"; },2000); } chang();//开始动画 //鼠标移到图片停止动画 picth.onmouseover = function(){ clearInterval(t); } picth.onmouseout = function(){ //封装一个函数,调用 chang(); } //导航数字的移动方向与图片一致 //数字循环 for ( var j = 0, len = li.length; j < len; j ++){ li[j].index = j;//给个点击的值 //注册事件 li[j].onmouseover = function(){ clearInterval(t); init = this.index;//图片的位置属性和所单击的数字一致 picth.style.left = init *-730 + "px"; for ( var i = 0, len = li.length ; i < len; i++){ li[i].className = ""; } //当前的li,加上on li[init].className = "on"; } } </script>
整段代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0; padding: 0;} .box{ width: 730px; height: 454px; position: relative; overflow: hidden; margin: 50px auto 0; } #picth{ width: 4380px; height: 454px; position: absolute; left: 0; top: 0; } #picth a{ float: left; } .nav-bar{ position: absolute; bottom: 10px; width: 130px; left: 300px; } ul{list-style: none;} .nav-bar li{ height: 12px; line-height: 12px; width: 12px; float: left; margin: 0 4px; background: #333; color: #FFFFFF; text-align: center; } .nav-bar .on{background: #c00;} </style> </head> <body> <div class="box"> <div id="picth"> <a href=""><img src="images/jd1.jpg" alt=""></a> <a href=""><img src="images/jd2.jpg" alt=""></a> <a href=""><img src="images/jd3.jpg" alt=""></a> <a href=""><img src="images/jd4.jpg" alt=""></a> <a href=""><img src="images/jd5.jpg" alt=""></a> <a href=""><img src="images/jd6.jpg" alt=""></a> </div> <div class="nav-bar"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> <script> //图片切换,先获取所有的图片 var picth = document.getElementById("picth"); var li = document.getElementsByTagName("li"); var t = null;//定义一个定时器 var init = 0;//默认为第一张图片 //时间函数 function chang (){ t = setInterval( function(){ init ++ ; if( init >=6){ init = 0; } picth.style.left = init *-730 + "px"; //做左移动 //导航数字切换 for ( var i = 0, len = li.length; i < len; i++){ li[i].className = ""; } li[init].className = "on"; },2000); } chang();//开始动画 //鼠标移到图片停止动画 picth.onmouseover = function(){ clearInterval(t); } picth.onmouseout = function(){ //封装一个函数,调用 chang(); } //导航数字的移动方向与图片一致 //数字循环 for ( var j = 0, len = li.length; j < len; j ++){ li[j].index = j;//给个点击的值 //注册事件 li[j].onmouseover = function(){ clearInterval(t); init = this.index;//图片的位置属性和所单击的数字一致 picth.style.left = init *-730 + "px"; for ( var i = 0, len = li.length ; i < len; i++){ li[i].className = ""; } //当前的li,加上on li[init].className = "on"; } } </script> </body> </html>
好了,简单的轮播效果就完成了,赶紧去试试吧。