程序员人生 网站导航

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(); }

代码中对逻辑思路进行了说明,方便理解,读者可以自己运行代码,设置相应的图片,查看效果。这里附上效果图:
这里写图片描述

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐