原生JS实现层叠轮播图


Posted in Javascript onMay 17, 2017

又是轮播?没错,换个样式玩轮播。

原生JS实现层叠轮播图

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>wtf</title>
</head>
<body>
 <div class="container">
 <div class="box">
 <img class="front" src="img/A.jpg" alt="PIC">
 <img class="back" src="img/B.jpg" alt="PIC">
 <img class="active" src="img/C.jpg" alt="PIC">
 <div class="btns">
 <span class="btn"><</span>
 <span class="btn">></span>
 </div>
 </div>
 </div>

</body>
</html>

CSS:

<style>
 .box {width: 1200px; height: 300px; transform-style: perserve-3d; margin: 50px auto; position: relative;}
 .box img{width:600px; position: absolute; top: 60px; transition:all .3s linear;}
 
 .box:hover .btn{opacity: 1;}

 .front {left: 0px;}
 .back {left: 600px;} 
 .active {left: 300px; transform: scale(1.5); z-index: 10;}
 
 .btns .btn {width: 60px; height: 60px; display: block; position: absolute; background-color: rgba(0,0,0,.5); font-size: 50px; font-family: "微软雅黑"; color:rgba(255,255,255,.5); line-height: 55px; text-align: center; cursor: pointer; z-index: 100; opacity: 0; transition:opacity .3s linear;} 
 .btns .btn:first-child {top: 125px;}
 .btns .btn:last-child {top: 125px; right: 0px;}
 </style>

JS:

<script>
 onload = function(){
 var btns = document.getElementsByClassName('btn'),
  imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');

 var index = 2,
  front = 0,
  back = 0,
  offset = false,
  timer = setInterval(timer,5000);
  


 for(var i=0;i<btns.length;i++){
 (function(i){
  btns[i].onclick = function(){click(i)};
 })(i);

 btns[i].onmouseover = function(){
  offset = true;
 }
 btns[i].onmouseout = function(){
  offset = false;
 }
 }

 for(var i=0;i<imgs.length;i++){
 imgs[i].onmouseover = function(){
  offset = true;
 }
 imgs[i].onmouseout = function(){
  offset = false;
 }
 }

 function timer(){
 console.log(offset)
 if(offset){
  return;
 }
 else{
  click(1)
 }
 }

 function click(x){
 imgs[index].setAttribute('class','');
 if(x === 0){
  if(--index < 0){
  index = --imgs.length;
  }
  front = back = index;
  if(++front > --imgs.length){front = 0}
  if(--back < 0){back = --imgs.length}
  imgs[front].style.zIndex = '1';
  imgs[back].style.zIndex = '0';
 }
 else{ 
  if(++index > --imgs.length){
  index = 0; 
  }
  front = back = index;
  if(++front > --imgs.length){front = 0}
  if(--back < 0){back = --imgs.length}
  imgs[front].style.zIndex = '0';
  imgs[back].style.zIndex = '1';
 }
 imgs[index].style.zIndex = '10';
 imgs[front].setAttribute('class','front')
 imgs[back].setAttribute('class','back') 
 imgs[index].setAttribute('class','active');
 }
 }
 </script>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
基于jquery的表格排序
Sep 11 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
js实现跨域的多种方法
Dec 25 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
JavaScript手风琴页面制作
May 17 #Javascript
jQuery查找dom的几种方法效率详解
May 17 #jQuery
bootstrap的工具提示实例代码
May 17 #Javascript
js字符串与Unicode编码互相转换
May 17 #Javascript
JavaScript实现省市县三级级联特效
May 16 #Javascript
原生js简单实现放大镜特效
May 16 #Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
JavaScript中的 new 命令
2019/05/22 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python中字典和集合学习小结
2017/07/07 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
洗发水广告词
2014/03/13 职场文书
产品销售计划书
2014/05/04 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
植物园观后感
2015/06/11 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python