纯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. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
随机推荐
- 获取当前时间CTime
std::string getcurtime(){ USES_CONVERSION; CTime z_CurTime; CString z_TimeStr; z_CurTime = CTime::Ge ...
- 查询SQL Server 版本信息
select SERVERPROPERTY('ProductVersion') as ProductionVersion, SERVERPROPERTY('ProductLevel')as Produ ...
- /usr/lib64/python2.6/site-packages/cryptography/__init__.py:26: DeprecationWarning: Python 2.6 is no longer supported by the Python core team
升级python2.6到2.7后,执行ansible后一直显示警告,如标题所示. 因为安装ansible,使用的是yum的方式,而yum使用的是python2.6,所以ansible安装环境为pyth ...
- Python初学者第七天 字符串及简单操作
7day 数据类型:字符串 1.定义 字符串是一个有序的字符的集合,用于储存和表示基本的文本信息.单.双.三引号之间的内容称之为字符串: a = ‘hello world!’ b = "你好 ...
- git-day1-安装和基础使用
Git介绍 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件 ...
- 深入编解码：ASCII,UNICODE,UTF8等
ASCII ASCII = American Standard Code for Information Interchange(美国信息交换标准码) 美国最先有了计算机技术,计算机里面只有01,也就 ...
- 双十一问题：kafka消费能力低下原因思考
抛去cpu.内存等机器原因,在每个分区皆分配一个进程消费的情况下,利用扩机器来提高kafka消费速率已无能为力 此时发现,在实际洪峰时段的消费速率元达不到先前压测时的消费速率 原因思考: 1.洪峰时段 ...
- 轻松bypass360网站卫士WAFSQL注入防护
随便网上找了一个网站,只是测试一下,没有干非法的事情! code 区域 http://www.py-guanyun.com/CompHonorBig.asp?id=49 code 区域 http:// ...
- PHP5.5的新特性
看了@轩脉刃 今天出炉的PHP 5.5 新特性.不过没有翻译全,我这里稍微补充下,整理成完整的一篇:) 原文:http://www.php.net/manual/zh/migration55.new- ...
- linux常用搜索文件命令
使用linux系统难免会忘记文件所在的位置,可以使用以下命令对系统中的文件进行搜索.搜索文件的命令为”find“:”locate“:”whereis“:”which“:”type“ 方法/步骤 ...