纯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. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
随机推荐
- PHP中empty、isset和is_null的使用区别
关于PHP中empty().isset() 和 is_null() 这三个函数的区别,之前记得专门总结过,上次又被问到,网上已经很多,就用几个例子来说明: 测试用例选取: <?php $a;$b ...
- IONIC调用原生的等待对话框
ngCordova提供了progressIndicator插件,用以方便的显示等待对话框,但是目前版本仅支持安卓版本.为了让苹果版本也显示,可以到以下地址下载通用的插件,JS部分的代码无需改变: ht ...
- 【Leetcode】【Medium】Search for a Range
Given a sorted array of integers, find the starting and ending position of a given target value. You ...
- MyEcplise的注册代码
代码分析 package test; import java.io.BufferedReader; import java.io.IOException; import java.io.InputSt ...
- TIAGO机器人传感器参数简介 手册翻译
本来认为这篇文章是最没人气的,竟然收到了回复,看来要继续更新本文了.留下笔者联系方式,邮箱leop22@163.com,欢迎邮件交流. 防止不良爬虫,原文链接:http://www.cnblogs.c ...
- c# HttpWebRequest与HttpWebResponse
[转]c# HttpWebRequest与HttpWebResponse 绝技 如果你想做一些,抓取,或者是自动获取的功能,那么就跟我一起来学习一下Http请求吧. 本文章会对Http请求时的Get和 ...
- 跳舞玩偶Doll正式上线
有问题或者建议大家可以联系我的QQ 914287516 或者qq邮箱 官方qq群 325631077:
- Mysql分表和分区的区别、分库分表介绍与区别(转)
分表和分区的区别: 一,什么是mysql分表,分区 什么是分表,从表面意思上看呢,就是把一张表分成N多个小表,具体请看:mysql分表的3种方法 什么是分区,分区呢就是把一张表的数据分成N多个区块,这 ...
- CF839D Winter is here
题目分析 显然我们不可能直接计算每一个子序列的贡献,而应该计算对于每一个gcd对答案的贡献. 考虑容斥.按照套路: 设\(q(i)\)表示序列\(gcd\)为\(i\)的倍数的序列长度和. 设\(g( ...
- LSF作业管理系统使用方法
查看LSF计算节点列表bhosts # bhosts HOST_NAME STATUS JL/U MAX NJOBS RUN SSUSP USUSP RSV fat01 ok - 16 0 0 0 0 ...