原生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 基础篇2 数据类型,语句,函数
Mar 14 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 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错误日志的获取方法
2015/07/20 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python过滤列表用法实例分析
2016/04/29 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
设置python3为默认python的方法
2018/10/31 Python
python retrying模块的使用方法详解
2019/09/25 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
财务部副经理岗位职责
2014/03/14 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
欢迎词范文
2015/01/27 职场文书
民政工作个人总结
2015/02/28 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
预备党员群众意见
2015/06/01 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
Python中time与datetime模块使用方法详解
2022/03/31 Python