旋轉木馬輪播圖

時間 2019-11-13

標籤旋轉木馬简体版

原文原文鏈接

<!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文件javascript

@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.jscss

//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);}

html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。