我们常常会在网页中见到轮播的图片，如京东主页面中图片自动更换。我们在这里对这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"}] //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();}代码中对逻辑思路进行了说明，方便理解，读者可以自己运行代码，设置相应的图片，查看效果。这里附上效果图：
以上是内存溢出为你收集整理的javascript图片轮播技术动态实现全部内容，希望文章能够帮你解决javascript图片轮播技术动态实现所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）