原生JS京东轮播图代码
网络编程 2021-07-04 18:31www.168986.cn编程入门
这篇文章主要为大家详细介绍了原生JS京东轮播图代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS轮播图的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/reset.css" rel="external nofollow" /> <style> .jiantou { height: 36px; width: 24px; line-height: 36px; text-align: center; background-color: rgba(0, 0, 0, .3); font-size: 14px; color: #fff; position: absolute; : 0; bottom: 0; margin: auto 0; display: none; z-index: 99999; cursor: pointer; } .left { left: 0; } .right { right: 0; } ul li { height: 20px; width: 20px; background-color: #B7B7B7; float: left; border-radius: 50%; margin: 2px; } ul { position: absolute; bottom: 15px; margin: 0 auto; background-color: rgba(255, 255, 255, .3); border-radius: 10px; left: 300px; z-index: 9999; cursor: pointer; } .on { background-color: #F40; } img { width: 790px; height: 340px; position: absolute; opacity: 0; /*transition: all 2s;*/ /*transition: all 0.5s;*/ /*时间给短一些*/ transition: opacity 0.5s; /*不要写all 那么就不会影响到z-index*/ z-index: 0; } .in { width: 790px; height: 340px; } #out { width: 790px; height: 340px; margin: 100px auto; position: relative; } #out:hover .jiantou { display: block; } </style> </head> <body> <div id="out"> <div class="in"> <img src="img/j1.jpg" alt="" style="opacity: 1;z-index:1"/> <img src="img/j2.jpg" alt=""/> <img src="img/j3.jpg" alt=""/> <img src="img/j4.jpg" alt=""/> <img src="img/j5.jpg" alt=""/> <img src="img/j6.jpg" alt=""/> <img src="img/j7.jpg" alt=""/> <img src="img/j8.jpg" alt=""/> </div> <div class="left jiantou"><</div> <div class="right jiantou">></div> <ul class="clearFix"> <li class="on"></li> <li class="on"></li> <li class="on"></li> <li class="on"></li> <li class="on"></li> <li class="on"></li> <li class="on"></li> <li class="on"></li> </ul> </div> <script> var out = document.getElementById("out"); var img = document.images; var left = document.getElementsByClassName("left").item(0); var right = document.getElementsByClassName("right").item(0); var lilist = document.getElementsByTagName("li"); var index = 0;//标识哪张图片正在出现 var timer = null; var timer1 = null; right.onclick = function () { //把所有人的opacity置为0 /*for (var i = 0; i < img.length; i++) { img[i].style.opacity = 0; }*/ img[index].style.opacity = 0; img[index].style.zIndex = 0; lilist[index].className = ''; // index++; index == 7 ? index = 0 : index++; lilist[index].className = 'on'; img[index].style.opacity = 1; img[index].style.zIndex = 1; }; left.onclick = function () { img[index].style.opacity = 0; lilist[index].className = ''; img[index].style.zIndex = 0; // index--; index == 0 ? index = 7 : index--; lilist[index].className = 'on'; img[index].style.opacity = 1; img[index].style.zIndex = 1; }; for (var i = 0; i < lilist.length; i++) { lilist[i].value = i; lilist[i].onmouseover = function () { var that = this; timer=setTimeout(function () { img[index].style.opacity = 0; lilist[index].className = ''; img[index].style.zIndex = 0; index = that.value; lilist[index].className = 'on'; img[index].style.opacity = 1; img[index].style.zIndex = 1; },300) }; lilist[i].onmouseout = function () { clearTimeout(timer); } } out.onclick = function (e) { console.log(e.target); }; timer1 = setInterval(right.onclick,2000); out.onmouseover = function () { clearInterval(timer1); }; out.onmouseout = function () { timer1 = setInterval(right.onclick, 2000); }; var num =5 var arr = []; var img =document.images; for(var i=0;i<img.length;i++){ if(i<5){ arr.push(img[i].offsetHeight); }else { img[i].style.position='abl' } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程