原生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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
Javascript倒计时代码
Aug 12 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
Vue中fragment.js使用方法小结
Feb 17 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
H5实现仿flash效果的实现代码
2017/09/29 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python装饰器原理与用法深入详解
2019/12/19 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
简单的项目建议书模板
2014/03/12 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
北京申奥口号
2014/06/19 职场文书
中秋晚会活动方案
2014/08/31 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
新生儿未入户证明
2015/06/23 职场文书
开学第一天的感想
2015/08/10 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS