javascript图片轮播技术动态实现
栏目：htmlcss时间：2017-01-12 12:00:49
我们常常会在网页中见到轮播的图片，如京东主页面中图片自动更换。我们在这里对这1技术进行实现，主要能够使图片自动进行轮播，数字标签随着图片1同更换，鼠标移动到数字标签上，相应的图片停留，鼠标在全部图片区域内时，图片停止轮播，鼠标离开图片区域，图片继续轮播的功能。请看示例代码：
这是html结构代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container{
width:1120px;
margin: 0 auto;
}
.lunBo{
width: 730px;
margin:0 auto;
position: relative;
}
.lunBo .banner .item{
display: none;
}
.lunBo .banner .item.active{
display: block;
}
.lunBo .banner .item a{
border: none;
}
ul{
position: absolute;
overflow: hidden;
bottom: 20px;
right: 20px;
}
ul li{
float: left;
width: 30px;
font:bold 16px/30px "微软雅黑";
background-color: #000;
color: #fff;
text-align: center;
cursor: default;
border-radius: 15px;
}
ul li+li{
margin-left: 10px;
}
ul li.active{
background-color: #fff;
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="lunBo" id="lunBo">
<div class="banner" id="banner">
</div>
<ul id="list">
</ul>
</div>
</div>
<script src="lunBo.js"></script>
</body>
</html>这是javascript代码：
/*
思路：
豫备： 生成的进程
定义数据： 和轮播图相干的数据
图片和点击图片将要跳转的路径
数据怎样组织？
//1组数据 1组中每项 图片和跳转的路径
[{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"},{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"},{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"}]
//JSON
第1步：当页面加载完后，获得所要操作的节点对象
第2步：根据数据动态生成轮播图和控制按钮
第3步：为每个控制按钮添加1个鼠标浮动事件onmouseenter
当前的按钮样式产生变化（acitve），其他的恢复原来样式
对应的轮播图显示出来（active）,其他的隐藏
第4步：开启自动轮播
开启1个定时器，间接性的自动的切换轮播图
第5步：为包括轮播区域容器lunBo添加1个鼠标浮动事件
停止定时器（停止自动轮播）
为包括轮播区域容器lunBo添加1个鼠标离开事件
开启定时器
*/
var datas = [
{imgSrc:"images/01.jpg",targetSrc:"https://sale.jd.com/act/N58wisuTGyW.html?cpdad=1DLSUE"},
{imgSrc:"images/02.jpg",targetSrc:"https://sale.jd.com/act/mj8frBQAuDeCPo.html?cpdad=1DLSUE"},
{imgSrc:"images/03.jpg",targetSrc:"https://sale.jd.com/act/PbDeHkZQcKjIRCtW.html?cpdad=1DLSUE"},
{imgSrc:"images/04.jpg",targetSrc:"https://jr.jd.com/buy/index?from=jdsj_04_101182&cpdad=1DLSUE"},
{imgSrc:"images/05.jpg",targetSrc:"https://haier.jd.com/?cpdad=1DLSUE"}
];
var banner = document.getElementById("banner");
var list = document.getElementById("list");
for(var i = 0,len = datas.length;i<len;i++){
var div = document.createElement("div");
var li = document.createElement("li");
if(i==0){ //默许第1项轮播项显示 对应的控制按钮被选中
div.className = "item active";
li.className = "active";
}else{ //其他项隐藏 其他的控制按钮样式不改变
div.className = "item";
li.className = "";
}
div.innerHTML = '<a href="' + datas[i].targetSrc + '">' +
'<img src="http://www.wfuyu.com/upload/caiji/20160922/' + datas[i].imgSrc + '" />' +
'</a>';
li.innerHTML = i + 1;
banner.appendChild(div);
list.appendChild(li);
}
var lunBo = document.getElementById("lunBo");
var items = document.querySelectorAll("#lunBo #banner .item");
var lis = document.querySelectorAll("#lunBo #list li");
var currentIndex = 0;//(控制按钮和轮播项共同的索引)
for(var i = 0,len = lis.length;i<len;i++){
lis[i].index = i;
lis[i].onmouseenter = function(){
currentIndex = this.index;
for(var j = 0;j<len;j++){
lis[j].className = "";
items[j].className = "item";
}
this.className = "active";
items[this.index].className = "item active";
}
}
var termId; //全局变量
function autoPlay(){
termId = setInterval(function(){
currentIndex++;
if(currentIndex==lis.length){
currentIndex = 0;
}
lis[currentIndex].onmouseenter();
},1000);
}
autoPlay();//打开页面自动轮播
//鼠标进入停止轮播
lunBo.onmouseenter = function(){
clearInterval(termId);
}
//鼠标离开继续轮播
lunBo.onmouseleave = function(){
autoPlay();
}
代码中对逻辑思路进行了说明，方便理解，读者可以自己运行代码，设置相应的图片，查看效果。这里附上效果图：
------分隔线----------------------------
------分隔线----------------------------