原生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 相关文章推荐
Node.js事件驱动
Jun 18 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
第一篇初识bootstrap
Jun 21 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
围观tangram js库
2010/12/28 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python中分数的相关使用教程
2015/03/30 Python
flask-restful使用总结
2018/12/04 Python
python 发送json数据操作实例分析
2019/10/15 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
详细分析Python垃圾回收机制
2020/07/01 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
劳资员岗位职责
2013/11/11 职场文书
离婚协议书范本2014
2014/10/27 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
法定代表人免职证明
2015/06/24 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS