<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="prev"></a>
<a href="javascript:void(0);" class="next" id="next"></a>
</div>
</div>
</div>
</body>
</html>
<script src="sport5.js"></script>
<script>
// [51234]
/*
shift 删除数组中的第一个数 返回的是删除的元素
push 向数组的尾部添加一个元素
unshift 向数组的头部添加一个元素
pop 删除数组尾部最后一个元素 返回删除的元素
*/
var arr = [
{ //1
"width":400,
"top":20,
"left":750,
"opacity":20,
"zIndex":2
}
,
{ // 2
"width":600,
"top":70,
"left":600,
"opacity":80,
"zIndex":3
},
{ // 3
"width":800,
"top":100,
"left":200,
"opacity":100,
"zIndex":4
},
{ // 4
"width":600,
"top":70,
"left":0,
"opacity":80,
"zIndex":3
},
{ // 5
"width":400,
"top":20,
"left":50,
"opacity":20,
"zIndex":2
}
];
var list = document.getElementsByTagName("li");
showData();
function showData(){
for( var i = 0 ; i < list.length ; i++ ){
startMove( list[i] , arr[i] ,function(){
//当所有的图片都运动完成后 将flag的值变为true 目的按钮点击生效
flag = true;
} );
}
}
//操作箭头的显示和隐藏
wrap.onmouseover = function(){
startMove( arrow , {opacity:100} );
}
wrap.onmouseout = function(){
startMove( arrow , {opacity:0} );
}
var flag = true;//假设值为true时按钮是可以被点击的
//点击左右按钮 让图片运动起来
next.onclick = function(){
if( flag ){
//删除数组头部元素 并添加到数组尾部
arr.push( arr.shift() );
showData();
}
flag = false;
}
prev.onclick = function(){
if(flag){
//删除数组尾部元素 并添加到数组头部
arr.unshift( arr.pop() );
showData();
}
flag = false;
}
</script>
css.css文件
@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:"Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
position: relative;
z-index:100;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}
sport5.js
//obj 代表当前操作的对象 json中存储的是要操作的属性和目标值 fn 用来接收一个函数
function startMove(obj,json,fn){ // {"width":300,"height":300}
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;// 当开关变量的值为 true时，运动结束，可以停止定时器了
for(var attr in json){
var current = 0;
if(attr == "opacity"){
//操作透明度
current = parseFloat( getStyle( obj,attr ) ) * 100;
}else if( attr == "zIndex" ){
current = parseInt( getStyle(obj,attr) );//操作空间定位
}else{
//操作的是带有像素值的样式
current = parseInt( getStyle(obj,attr) );//获取当前操作对象的实际值
}
var speed = (json[attr] - current) / 10;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if( json[attr] != current ){
//如果目标值 和 当前操作的样式值不相等，就不能停止定时器
flag = false;
}
//上面的条件不满足 继续执行运动
if(attr == "opacity"){
//操作透明度
obj.style.opacity = (current + speed) / 100;
}else if(attr == "zIndex"){
obj.style.zIndex = json[attr] ;
}else{
//操作的是带有像素值的样式
obj.style[attr] = current + speed + "px";
}
}
//如果flag为true 就停止定时器
if(flag){
clearInterval(obj.timer);
//一个动作完成后,进入下一个动作(也就是要调用下一个函数)
if(fn){ //判断如果有函数传递过来，就调用
fn();
}
}
},30)
}
function getStyle(obj,attr){
return window.getComputedStyle ? window.getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
@charset "UTF-8";/*初始化 reset*/blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}body,button,input,select,textarea{font:"Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}ol,ul{list-style:none}a{text-decoration:none}fieldset,img{border:0;vertical-align:top;}a,input,button,select,textarea{outline:none;}a,button{cursor:pointer;}
.wrap{ width:1200px; margin:100px auto;}.slide { height:500px; position: relative;}.slide li{ position: absolute; left:200px; top:0;}.slide li img{ width:100%;}.arrow{ opacity: 0; position: relative; z-index:100;}.prev,.next{ width:76px; height:112px; position: absolute; top:50%; margin-top:-56px; background: url(../images/prev.png) no-repeat; z-index: 99;}.next{ right:0; background-image: url(../images/next.png);}
来源：https://www.cnblogs.com/Leslie-Cheung1584304774/p/10529868.html