-
什么是轮播图？
- 轮播图：在网页，通过电脑上鼠标点击或滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。
-
在每个网站中或多或少的都会有一个或多个轮播图，这些轮播图用途广泛，有的展示网络产品提供优质的服务，有的轮播图变成广告位，推广他人或自己的产品，网站能够被更多的人看到。
-
轮播图代码如下
```
<!DOCTYPE html>
Document
var img=document.getElementById('tupian').getElementsByTagName('li');
var yuan=document.getElementById('xt').getElementsByTagName('li');
//初始化图片位置
var left=0;
tupian.style.marginLeft=left+'px';
//设置定时器
var time;
function run(){
//如果第五张图片移动完成,重置
if(left<=-2500){
tupian.style.marginLeft="0px";
left=0;
}
var xb =Math.floor(-left/500);//找到图片下标
//xb 下标
xiabiao(xb);
//滑到整张图片停留2秒
var q=left%500==0?1500:10; //如果移动到整张图片隔1.5s再移动
dong(); //调用dong函数,进行移动
left-= 5;
time=setTimeout(run,q); //递归,重复调用run函数
}
function dong(){
tupian.style.marginLeft=left+'px'; //调用一回dong函数图片移动多少像素
}
function xiabiao(xb){
for(var i=0;i<yuan.length;i++){
yuan[i].style.backgroundColor='';
}
yuan[xb].style.backgroundColor='red';
}
//滑动鼠标显示完整图片
for(var j=0;j<img.length;j++){
//闭包 ()(j)
(function(j){
img[j].onmousemove=function(){
clearTimeout(time);
left=-j*500; //将选中的图片移动到能够完全显示的位置
dong(); //执行函数,让图片移动
xiabiao(j); //让选中的图片所对应的小圆点发生变化
}
img[j].onmouseout=function(){
run();//鼠标离开轮播图是,轮播图继续移动
}
})(j)
}
//小圆点选图
for(var j=0;j<yuan.length;j++){
//闭包 ()(j)
(function(j){
yuan[j].onmousemove=function(){
clearTimeout(time);
left=-j*500; //将选中的图片移动到能够完全显示的位置
dong(); //执行函数,让图片移动
xiabiao(j); //让选中的图片所对应的小圆点发生变化
}
yuan[j].onmouseout=function(){
run();//鼠标离开轮播图是,轮播图继续移动
}
})(j)
}
