完整的图片轮换-包括左右移动和缓动效果

最新推荐文章于 2020-12-13 16:43:55 发布

秋天1014童话

最新推荐文章于 2020-12-13 16:43:55 发布

阅读量1.9k

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53455335

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图焦点</title>
    <meta content="还是有地点小瑕疵，1左转变4,4右转变1的时候，图片切换有空白，换下动画模式应该可以？">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .scroll{
            width: 300px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .scroll ul.imgUl{
            width: 400%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .scroll ul.imgUl li{
            float: left;
        }
        .scroll .imgUl img{
            vertical-align: middle; /* 消除图片间3px的间距 */
        }
        .scroll ul.focus{
            position: absolute;
            left: 50%;
            bottom: 10px;
            margin-left: -80px;
        }
        .scroll ul.focus li{
            width: 20px;
            height: 20px;
            padding: 5px;
            text-align: center;
            margin-right: 10px;
            border: 2px solid yellow;
            float: left;
            color: red;
            font-weight: 700;
            background-color: #333;
            color: white;
        }
        .scroll ul.focus li.current{
            background-color: deeppink;
        }
        .scroll .arrow{
            width: 100%;
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -20px;
            display: none;
        }
        .scroll .arrow div{
            width: 40px;
            height: 40px;
            font: 700 18px/40px "宋体";
            text-align: center;
            background: rgba(0,0,0,.3);
            color: #fff;
            cursor: pointer;
        }
        .scroll .arrow div.left{
            float: left;
        }
        .scroll .arrow div.right{
            float: right;
        }
    </style>
    <script>
        window.onload = function(){
            function $(id){ return document.getElementById(id);}
            var scrollDiv = $('scrollDiv');
            var imgul = $('images');
            var focusUl = $('focuses');
            var imgLis = imgul.children;
            var leader = 0, target = 0;
            var curIndex = 0;//记录当前图片的序号
            var leftArrow = $('leftArrow');
            var rightArrow = $('rightArrow');
            //可自动生成和图片对应的序号
            /*for(var i=0; i< imgLis.length; i++){
                var newLi = document.createElement('li');
                newLi.innerHTML=i+1;
                focusUl.appendChild(newLi);
            }*/
            var focusLis = focusUl.children;
            for(var i=0; i<focusLis.length; i++){
                focusLis[i].index = i;
                focusLis[i].onmouseover = function(){
                    curIndex = this.index;
                    switchFocus(curIndex);
                    target = -this.index * 300;
                }
            }
            scrollDiv.onmouseover = function(){
                $('arrowDiv').style.display="block";
                clearInterval(timer);
            }
            scrollDiv.onmouseout = function(){
                $('arrowDiv').style.display="none";
                timer = setInterval(autoPlay,3000);
            }
            leftArrow.onclick = function(){
                target +=300;
                curIndex = curIndex==0 ? focusLis.length-1 : curIndex-1;
                switchFocus(curIndex);
            }
            rightArrow.onclick = function(){
                target -=300;
                curIndex = (curIndex+1) % focusLis.length;
                switchFocus(curIndex);
            }
            //缓动效果
            setInterval(function(){
                if(target > 0){
                    target = -900;
                    leader = -1000;
                }else if(target < -900){
                    target = 0;
                    leader = 100;
                }

                leader = leader + (target - leader) / 10;
                imgul.style.left = leader +"px";

            } ,10);

            switchFocus(0);
            //每隔3s左移图片
            var timer = null;
            timer = setInterval(autoPlay,3000);
            function autoPlay(){
                target -= 300;
                curIndex = (curIndex+1) % focusLis.length;
                switchFocus(curIndex);
            }
            //转换样式
            function switchFocus(curIndex){
                for(var j=0; j<focusLis.length;j++){
                        focusLis[j].className="";
                    }
                focusLis[curIndex].className="current";
            }

        }
    </script>
</head>
<body>
    <div class="scroll" id="scrollDiv">
        <ul class="imgUl" id="images">
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
        </ul>
        <ul class="focus" id="focuses">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="arrow" id="arrowDiv">
            <div class="left" id="leftArrow"><</div>
            <div class="right" id="rightArrow">></div>
        </div>
    </div>
</body>
</html>