<!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{
1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
100%;
}
.arrow{
opacity: 0;
position: relative;
z-index:100;
}
.prev,.next{
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{ 1200px; margin:100px auto;}.slide { height:500px; position: relative;}.slide li{ position: absolute; left:200px; top:0;}.slide li img{ 100%;}.arrow{ opacity: 0; position: relative; z-index:100;}.prev,.next{ 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);}