原生JS京东轮播图代码_网络技术_宿州市腾雀网络科技有限公司

原生JS京东轮播图代码

发布时间 - 2026-01-11 00:18:45 点击率：次

本文实例为大家分享了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; 
  top: 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js # 轮播图 # 原生js实现轮播图的示例代码 # 原生js实现无限循环轮播图效果 # 原生js实现移动开发轮播图、相册滑动特效 # 原生js实现无缝轮播图效果 # 原生js实现旋转木马轮播图效果 # 原生JS实现层叠轮播图 # 原生JS轮播图插件 # 原生js实现网易轮播图效果 # 原生js实现焦点轮播图效果 # 无限循环轮播图之运动框架(原生JS实现) # 原生JS实现的轮播图功能详解 # 影响到 # 大家分享 # 具体内容 # 大家多多 # 要写 # size # font # rgba # absolute # position # fff # line # text # width # background # color # align # center # top # li

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何使用 CSS 实现平滑旋转的渐变背景

下一篇：Linux常用命令如何掌握_从基础到进阶全流程讲透【指导】

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何使用 CSS 实现平滑旋转的渐变背景

下一篇：Linux常用命令如何掌握_从基础到进阶全流程讲透【指导】