图片轮播

Posted 2020-10-17 柠檬张先生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播相关的知识，希望对你有一定的参考价值。

核心代码：

点击看效果demo

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自动切换一次
            }

　　在循环中，返回闭包，记住图片序号值。

让运动函数负责图片序号值的图片展示。

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

以上是关于图片轮播的主要内容，如果未能解决你的问题，请参考以下文章

网页设计图片轮播，将鼠标放在图片上，图片会自动播放，代码怎么改？

轮播图片高效图片轮播，两个imageView实现