纯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. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
随机推荐
- 【Web crawler】print_all_links
How to repeat Procedures&Control CS重要概念 1.1 过程procedures 封装代码,代码重用 1.2 控制Control DEMO # -*- codi ...
- Linux ->> UBuntu 14.04 LTE下主机名称和IP地址解析
UBuntu 14.04 LTE下主机名称和IP地址解析一些相关的配置文件: /etc/hosts: 主机文件.手工配置IP地址和主机名称间的映射.格式为每行一条映射条项: <machine_n ...
- mongodb数据库集合操作
1:更新update update() 方法用于更新已存在的文档.语法格式如下: db.collection.update( <query>, <update>, { upse ...
- 生成证书，用于签名Android应用
1. keytool 命令 1)使用JDK中的一个命令keytool,都有哪些命令呢,使用 keytool -help 进行查看 2)本次使用 keytool -genkeypair 命令生成签名,查 ...
- 微软在线 VSTS/TFS 使用简介,如何删除项目,帐号,获取git地址等
名称:微软 VSTS 全称: Visual Studio Team Services 地址:https://www.visualstudio.com/zh-hans/ 说明:注册就可以了使用了(如何使 ...
- SQLmap简介以及防火墙绕过方法
简介 许多现实中对于网站的攻击往往是由于网站没有及时更新或者对于用户的输入没有进行检查.从缓冲区溢出说起,这样一种针对系统脆弱性的威胁,最根本的问题还是在于对于用户的输入没有进行检查.作为主要威胁之一 ...
- JS解析json数据（如何将json字符串转化为数组）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- PHP时间戳和日期相互转换（转载）
在php中我们要把时间戳转换日期可以直接使用date函数来实现,如果要把日期转换成时间戳可以使用strtotime()函数实现,下面我来给大家举例说明. 1.php中时间转换函数 strtotime ...
- Linux学习总结（十三）文本编辑器 vim
vim是vi的升级版,会根据文本属性带色彩显示,具体用法如下: 一般模式 : 1.光标定位: 左右移动一个字符, h l上下移动一个字符, k j左右下上 ,左右在两边,下上在中间这样记光标定位行首 ...
- sqoop 1.99.7 安装及配置
一 下载sqoop 1.99.7 http://mirror.bit.edu.cn/apache/sqoop/1.99.7/ 二 解压安装文件 三 配置Sqoop 环境变量 最后把mysql的驱动j ...