圖片輪播

時間 2020-08-18

標籤圖片简体版

原文原文鏈接

核心代碼：javascript

點擊看效果democss

if (i === 0) {

                //閉包返回的運動控制器，返回各個圖片的序號
                var step = function(){
                    oClick[flag].className = "";
                    flag = flag >= oClick.length - 1 ? 0 : flag + 1;
                    oClick[flag].className = "on";
                    funMove(-390 * flag);
                    timeout = setTimeout(step, 4000);
                };
                setTimeout(step, 4000); //4s自動切換一次
            }

　　在循環中，返回閉包，記住圖片序號值。html

讓運動函數負責圖片序號值的圖片展現。java

demo源碼：閉包

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript實現圖片切換顯示幻燈片動畫效果</title>
<style type="text/css">
.img-list{
    width: 179px;
    float: left;
    margin: 0 0 30px 0;
    /* padding: 10px 0; */
    text-align: center;
    border: 1px solid #34538b;
    list-style-type: none;
    padding: 10px 5px;
    margin-top: 8px;
}
.img-list li{
    padding-top:14px; 
    padding-bottom:5px;
}
.img-list li a img{
    padding:1px; 
    border:2px solid white;
}
.img-list li a.on img{
    border-color:#0CF;
}
.img_right{
    width:522px; 
    margin-left:10px;
    margin-bottom:30px; 
    float:left; 
    border:1px solid #34538b; 
    height:392px; 
    position:relative; 
    overflow:hidden;
}
.img_move{
    width:522px; 
    padding:0; 
    margin:0; 
    position:absolute; 
    /* left:5px;  */
    top:0px; 
    list-style:none; 
    font-size:0;
}
.img_move li{
    height:390px; 
    text-align:center;
}
.img_move li img{
    vertical-align:middle;
}
.img_move li span{
    display:inline-block; 
    width:1px; 
    height:100%; 
    vertical-align:middle;
}
a{color:#34538b; text-decoration:underline;}
a:hover{color:#f30;}
</style>
<script type="text/javascript">
    window.onload = function(){
        var oMove = document.getElementById("imageMove");
        
        //運動函數
        var funMove = function(pos){
            var move = function(){
                var curPos = parseInt(oMove.style.top, 10); //獲取滾動圖容器位置
                var speed = 60; //滾動距離間隔
                
                if(Math.abs(curPos - pos) > speed){

                    //判斷移動方向
                    curPos -= ((curPos - pos) / Math.abs(curPos - pos)) * speed;  
                    oMove.style.top = curPos + "px";
                    setTimeout(move, 30);
                }else{
                    oMove.style.top = pos + "px";
                }
            };
            setTimeout(move, 10);
        };
        var oClick = document.getElementById("imageLeft").getElementsByTagName("a");
        for(var i = 0; i < oClick.length; i += 1){
            var flag = 0; //目標標誌，默認是第一個a元素
            var timeout;
            
            //鼠標通過播放動畫
            oClick[i].onmouseover = function(i){
                return function(e){
                    clearTimeout(timeout);
                    oClick[flag].className = "";
                    this.className = "on";
                    funMove(-390 * i);
                    flag = i;
                }
            }(i);
            oClick[i].onmouseout = function(i){
                return function(e){
                    timeout = setTimeout(step, 4000);
                }
            }(i);
            
            //定時器播放動畫
            if (i === 0) {

                //閉包返回的運動控制器，返回各個圖片的序號
                var step = function(){
                    oClick[flag].className = "";
                    flag = flag >= oClick.length - 1 ? 0 : flag + 1;
                    oClick[flag].className = "on";
                    funMove(-390 * flag);
                    timeout = setTimeout(step, 4000);
                };
                setTimeout(step, 4000); //4s自動切換一次
            }
        }
    };
</script>
</head>

<body>
<ul id="imageLeft" class="img-list">
	<li>
    	<a href="#" class="on"><img src="../images/imgcommon4.jpg" /></a>
    </li>
    <li>
    	<a href="#"><img src="../images/imgcommon3.jpg" /></a>
    </li>
    <li>
    	<a href="#"><img src="../images/imgcommon4.jpg" /></a>
    </li>
</ul>
<div class="img_right">
	<ul id="imageMove" class="img_move" style="top:0px;">
    	<li>
        	<img src=".././images/imgbig4.jpg" />
            <span></span>
        </li>
    	<li>
        	<img src=".././images/imgbig3.jpg" />
            <span></span>
        </li>
        <li>
        	<img src=".././images/imgbig4.jpg" />
            <span></span>
        </li>
    </ul>
</div>
</body>
</html>

效果圖：函數

技術參考：http://www.zhangxinxu.com動畫

相關標籤/搜索

每日一句

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