原生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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
javascript 获取网页参数系统
Jul 19 Javascript
jQuery 渐变下拉菜单
Dec 15 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
php中截取中文字符串的代码小结
2011/07/17 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
jqgrid 表格数据导出实例
2013/11/21 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
《刷子李》教学反思
2016/02/20 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL