纯js轮播图练习-2，js+css旋转木马层叠轮播
基于css3的新属性，加上js的操作，让现在js轮播图花样越来越多。
而现在出现的旋转木马层叠轮播的轮播图样式，却是得到了很多人都喜爱和投入使用。
尤其是在各大软件中，频繁的出现在大家的眼里，在web当中，也是出现了很多使用了这种轮播的方式。
下方是网易云音乐的客户端（PC）的海报。
自己跟着视频也学着做一个web的模仿一下。
以下为轮播图全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js+css旋转木马层叠轮播</title>
<style>
/*
* transition、transform为css3样式， 需要写相关兼容，此次代码没有写相关css3兼容。
*
* */
*{
margin: 0;
padding: 0;
list-style: none;
} img{
width: 100%;
margin: 0;
padding: 0;
display:block
} .box{
width: 770px;
height: 337.5px;
position: relative;
margin: 0 auto;
} .box ul{
width: 770px;
height: 337.5px;
overflow: hidden;
} .box ul li{
position: absolute;
width: 600px;
top: 50%;
transform: translateY(-50%);
/*过渡移动的动画*/
transition: all 0.5s linear;
} .box ul li a{
background-color: rgba(0,0,0,0.5);
} /*第一张图片的位置*/
.box ul .show0{
left: 0px;
width: 500px;
z-index: 77;
opacity: 0;
} /*第二张图片的位置*/
.box ul .show1{
left: 0px;
width: 500px;
z-index: 88;
opacity: 0.7;
} /*第三张图片的位置*/
.box ul .show2{
left: 385px;
transform: translate(-50%,-50%);
z-index: 99;
opacity: 1;
} /*第四张图片的位置*/
.box ul .show3{
left: 770px;
width: 500px;
transform: translate(-100%,-50%);
z-index: 88;
opacity: 0.7;
} /*第五张图片的位置*/
.box ul .show4{
left: 770px;
width: 500px;
transform: translate(-100%,-50%);
z-index: 77;
opacity: 0;
} .butBox{
width: 770px;
position: absolute;
top: 26px;
z-index: 90;
} .butL{
float: left;
width: 85px;
height: 282px;
} .butL img{
width: 56px;
height: 65px;
line-height: 282px;
margin-top: 110px;
margin-left: 14.5px;
cursor: pointer;
} .butR{
float: right;
width: 85px;
height: 282px;
} .butR img{
width: 56px;
height: 65px;
margin-top: 110px;
margin-left: 14.5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul id="oul">
<li class="show0"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/00.jpg" /></a></li>
<li class="show1"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/01.jpg" /></a></li>
<li class="show2"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/02.jpg" /></a></li>
<li class="show3"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/03.jpg" /></a></li>
<li class="show4"><a href="https://www.baidu.com/" target="_blank"><img src="../image/lunbo/04.jpg" /></a></li>
</ul>
<div class="butBox">
<div class="butL">
<img id="butL" src="../image/lunbo/butL.png" />
</div>
<div class="butR">
<img id="butR" src="../image/lunbo/butR.png" />
</div>
</div>
</div> <script type="text/javascript">
window.onload=function(){
var oul = document.getElementById("oul");
//获取到图片li集合
var oli = oul.getElementsByTagName("li");
//获取到左按钮
var butL = document.getElementById("butL");
//获取到右按钮
var butR = document.getElementById("butR");
//定义arr数组
var arr = ['show0','show1','show2','show3','show4']
//定义开关（默认关闭）
var flag = true; //向右按钮
butR.onclick = function(){
//判断flag是否为true，是的话变向右移动，（如果开关是关闭的情况下）。
if(flag){
//每点击一次，flag改为false，（将开关打开）。
flag = false;
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//延迟0.5秒后，flag改为true（延迟执行，0.5秒后将开关恢复到关闭状态）
//这里的延迟时间需要与css的transition的时间一样。
setTimeout(function(){
flag = true;
//500为0.5秒
},500)
};
console.log(arr,fist);
} //向左按钮
butL.onclick = function(){
//判断flag是否为true，是的话变向右移动，（如果开关是关闭的情况下）
if(flag){
//每点击一次，flag改为false，（将开关打开）。
flag = false;
//截取arr数组末位的值
var last = arr.pop();
//将截取到的值追加到arr的前面去
arr.unshift(last);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//延迟0.5秒后，flag改为true（延迟执行，0.5秒后将开关恢复到关闭状态）
//这里的延迟时间需要与css的transition的时间一样。
setTimeout(function(){
flag = true;
//500为0.5秒
},500)
};
console.log(arr,last);
}; //定义设置向右自动轮播
var lunbo = setInterval(function(){
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//3000为3秒
},3000); //鼠标移入左按钮停止自动轮播
butL.onmouseover = function(){
clearInterval(lunbo);
console.log('鼠标移进来')
}; //鼠标移出左按钮继续自动轮播
butL.onmouseout = function(){
lunbo = setInterval(function(){
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//3000为3秒
},3000);
console.log('鼠标移出去')
}; //鼠标移入右按钮停止自动轮播
butR.onmouseover = function(){
clearInterval(lunbo);
console.log('鼠标移进来')
}; //鼠标移出右按钮继续自动轮播
butR.onmouseout = function(){
lunbo = setInterval(function(){
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//3000为3秒
},3000);
console.log('鼠标移出去')
}; //鼠标移入ul标签（图片）停止自动轮播
oul.onmouseover = function(){
clearInterval(lunbo);
console.log('鼠标移进来')
}; //鼠标移出ul标签（图片）继续自动轮播
oul.onmouseout = function(){
lunbo = setInterval(function(){
//截取arr数组首位的值
var fist = arr.shift();
//将截取到的值追加到arr的后面去
arr.push(fist);
//for循环遍历每一个li，逐个替换class
for(var i = 0 ; i < arr.length; i++){
//循环出的li的class名替换成arr数组里面class名
oli[i].className = arr[i];
};
//3000为3秒
},3000);
console.log('鼠标移出去')
};
};
</script>
</body>
</html>
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
纯js轮播图练习-2，js+css旋转木马层叠轮播的更多相关文章
- 兼容pc端和移动端的轮播图插件 swiper.js
swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 轮播图--使用原生js的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS实现自动轮播图效果（js案例）
现在很多网站都有轮播图,这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理,需要的小伙伴可以参考一下. 1.轮播图主要功能: 1. 图片自动轮播(主图切换同时下面导航图片也会跟着变化) 2. ...
- 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图
引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...
- swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- 带无缝滚动的轮播图（含JS运动框架）-简洁版
昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: <script> window.onload = function() { var oWra ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
随机推荐
- SQLServer中取当前年，月，日，时，分，秒
Select GETDATE() as '当前日期',DateName(year,GetDate()) as '年',DateName(month,GetDate()) as '月',DateName ...
- Unity创建或克隆对象 Instantiate（）
//需要创建对象 GameObject prefab; //创建对象的规定位置或父物体 Transform tr; //创建出对象 Instantiate(prefab); //创建对象,并设定位置和 ...
- python完全学习笔记
dir(__builtins__) help(input) 'let\'s go' #转义字符 \ r'c:\now' #字符串前加r 自动转义 str= ''' shdiufhi s ...
- SVN升级到1.8后 Upgrade working copy
SVN升级到1.8后没法用了,不能提交,提示说要SVN Upgrade working copy, 但是半天在根目录和.svn所在文件夹上面右键都没有找到这个菜单. 坑爹的…… 最后找到解决办法是:重 ...
- linux（centos、ubuntu）网卡配置文件不生效
今天遇到个问题,服务器上ifcfg配置了eth0文件,但是通过ifcfg命令检查发现网卡IP配置并未生效. 然后通过如下配置修正: ubuntu: # vim /etc/default/grub在”G ...
- ZT 七大寡头
网易评论人才辈出啊!!!看下面 http://comment.news.163.com/news_guoji2_bbs/9GRIIJA90001121M.html 关注 关注他的微博yftyfm ...
- SAP专家培训之Netweaver ABAP内存管理和内存调优最佳实践
培训者:SAP成都研究院开发人员Jerry Wang 1. Understanding Memory Objects in ABAP Note1: DATA itab WITH HEADER LINE ...
- 从0开始学CentOS7（1）
首先,先来几句简介吧.. java开发一枚,总觉得自己的技术提升缓慢... 最近看到同事有在论坛发发自己的心得什么的...我脑中晃出的灵光就是:好记性不如烂笔头,试试吧~ 好了,正式开始了..cent ...
- JAVA串口开发帮助类分享－及写在马年末
摘要: 在系统集成开发过程中,存在着各式的传输途径,其中串口经常因其安全性高获得了数据安全传输的重用,通过串口传输可以从硬件上保证数据传输的单向性,这是其它介质所不具备的物理条件.下面我就串口java ...
- GPU CUDA之——深入理解threadIdx
http://blog.csdn.net/canhui_wang/article/details/51730264 摘要 本文主要讲述CUDA的threadIdx. 1. Grid,Block和Thr ...