原生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 相关文章推荐
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Vue 的 v-model用法实例
Nov 23 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调用三种数据库的方法(2)
2006/10/09 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
工商管理应届生求职信
2013/10/07 职场文书
公益活动策划方案
2014/01/09 职场文书
服务生自我鉴定
2014/01/22 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
司机检讨书
2014/02/13 职场文书
学校联谊活动方案
2014/02/15 职场文书
5s标语大全
2014/06/23 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
如何写通讯稿
2015/07/22 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
vue+echarts实现多条折线图
2022/03/21 Vue.js
如何利用python创作字符画
2022/06/25 Python