原生JS京东轮播图代码


Posted in Javascript onMarch 22, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
10道典型的JavaScript面试题
Mar 22 #Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
js弹出窗口简单实现代码
Mar 22 #Javascript
js实现自动图片轮播代码
Mar 22 #Javascript
JavaScript中清空数组的三种方式
Mar 22 #Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 #Javascript
tab栏切换原理
Mar 22 #Javascript
You might like
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
javascript常用对话框小集
2013/09/13 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Python读取表格类型文件代码实例
2020/02/17 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
施工安全协议书
2013/12/11 职场文书
经销商订货会主持词
2014/03/27 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers