原生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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
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 实例化类的一点摘记
2008/03/23 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
php和nginx交互实例讲解
2019/09/24 PHP
一端时间轮换的广告
2006/06/26 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python实现实时视频流播放代码实例
2020/01/11 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
慰问信范文
2015/02/14 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
字节飞书面试promise.all实现示例
2022/06/16 Javascript