javascript图片轮播技术动态实现

article/2025/11/10 9:12:42

我们经常会在网页中见到轮播的图片，如京东主页面中图片自动更换。我们在这里对这一技术进行实现，主要能够使图片自动进行轮播，数字标签随着图片一同更换，鼠标移动到数字标签上，相应的图片停留，鼠标在整个图片区域内时，图片停止轮播，鼠标离开图片区域，图片继续轮播的功能。请看示例代码：
这是html结构代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><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代码：

/*思路：预备：  生成的过程定义数据： 和轮播图相关的数据图片和点击图片将要跳转的路径数据怎么组织？//一组数据  一组中每一项 图片和跳转的路径[{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第一步：当页面加载完后，获取所要操作的节点对象第二步：根据数据动态生成轮播图以及控制按钮第三步：为每一个控制按钮添加一个鼠标浮动事件onmouseenter当前的按钮样式发生变化（acitve），其他的恢复原来样式对应的轮播图显示出来（active）,其他的隐藏第四步：开启自动轮播开启一个定时器，间接性的自动的切换轮播图第五步：为包含轮播区域容器lunBo添加一个鼠标浮动事件停止定时器（停止自动轮播）为包含轮播区域容器lunBo添加一个鼠标离开事件开启定时器            
*/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){  //默认第一项轮播项显示  对应的控制按钮被选中div.className = "item active";li.className = "active";}else{ //其他项隐藏  其他的控制按钮样式不改变div.className = "item";li.className = "";}div.innerHTML = '<a href="' + datas[i].targetSrc + '">' + '<img src="' + 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();
}