JS实现大图滚动、无缝连接

最新推荐文章于 2024-01-05 10:46:26 发布

yl107

最新推荐文章于 2024-01-05 10:46:26 发布

阅读量372

点赞数

分类专栏： js插件文章标签： javascript

本文链接：https://blog.csdn.net/yl107/article/details/70919288

版权

js插件专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大图滚动2</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #outer{
            width: 1000px;
            height: 500px;
            margin:100px auto;
            overflow: hidden;
            position: relative;
        }
        #inner{
            height: 500px;
            position: absolute;
            top:0px;
            /*left:0px;*/
            /*transition: all 0.5s;*/
        }
        #inner img{
            width: 1000px;
            height: 500px;
            float:left;
        }
        #btn_box{
            position: absolute;
            list-style-type: none;
            width: 100%;
            left:0;
            bottom:30px;
            text-align: center;
        }
        #btn_box li{
            display: inline-block;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background-color: #fff;
            font-size: 20px;
            line-height: 30px;
        }
        #btn_box li.active{
            color:#fff;
            background-color:red;
        }
        #prevBtn,
        #nextBtn{
            width: 50px;
            height: 100px;
            position: absolute;
            top:200px;
            background-color: rgba(0,0,0,.5);
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            opacity:0;
            transition: all 1.5s;
        }
        #prevBtn{
            left:0px;
        }
        #nextBtn{
            right:0px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">

            <img src="../img/01.jpg">
            <img src="../img/02.jpg">
            <img src="../img/03.jpg">
            <img src="../img/04.jpg">
            <img src="../img/05.jpg">
            <img src="../img/06.jpg">
            <img src="../img/01.jpg">
        </div>
        <ul id="btn_box">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div id="prevBtn">&lt;</div>
        <div id="nextBtn">&gt;</div>
    </div>
    <script src="../tween.js"></script>
    <script>
        var outer = document.getElementById('outer');
        var inner = document.getElementById('inner');
        var imgs = inner.getElementsByTagName('img');
        var btn_box = document.getElementById('btn_box');
        var btns = btn_box.getElementsByTagName('li');
        var prevBtn = document.getElementById('prevBtn');
        var nextBtn = document.getElementById('nextBtn');
        var pieceWidth = imgs[0].offsetWidth;
        inner.style.width = imgs.length*pieceWidth + 'px';
        var index = 0;
        var contorl = true;//定义一个布尔值,用来控制切换的时机(图片在滚动过程中是禁止切换)
        var time = null;//图片自动轮播计时器
        var time1 = null;//图片滑动计时器
        function tab(){
            if(index >= imgs.length){
                index = 1;
                inner.style.left = 0;
            }
            if(index < 0){
                index = btns.length - 1;
                inner.style.left = -pieceWidth*(imgs.length-1) +'px';
            }
            var t = 0;
            var maxT = 100;
            var start = inner.offsetLeft;
            var end = -pieceWidth*index;
            var change = end - start;
            clearInterval(time1);
            time1 = setInterval(function(){
                t++;
                if(t >= maxT){
                    clearInterval(time1);
                    contorl = true;
                }
                // inner.style.left = change/maxT*t + start + 'px';
                inner.style.left = Tween.Quart.easeOut(t,start,change,maxT) + 'px';
            },10);
            // inner.style.left = -pieceWidth*index + 'px';
            for(var i=0; i<btns.length; i++){
                btns[i].className = '';
            }
            if(index == btns.length){
                btns[0].className = 'active';
            }else{
                btns[index].className = 'active';
            }
        }
        function next(){
            index++;
            tab();
        }
        function prev(){
            index--;
            tab();
        }
        time = setInterval(next,3000);
        for(var i=0; i<btns.length; i++){
            btns[i].index = i;
            btns[i].onclick = function(){
                if(contorl){
                    clearInterval(time);
                    if(this.index == 0 && index == btns.length){
                        index = btns.length;
                    }else{
                        index = this.index;
                    }
                    tab();
                    time = setInterval(next,3000)   
                }
                contorl = false;
            }
        }
        outer.onmouseover = function(){
            prevBtn.style.opacity = 1;
            nextBtn.style.opacity = 1;
        }
        outer.onmouseout = function(){
            prevBtn.style.opacity = 0;
            nextBtn.style.opacity = 0;
        }
        prevBtn.onclick = function(){
            if(contorl){
                clearInterval(time);
                prev();
                time = setInterval(next,3000);
            }
            contorl = false;
        }
        nextBtn.onclick = function(){
            if(contorl){
                clearInterval(time);
                next();
                time = setInterval(next,3000);
            }
            contorl = false;
        }
    </script>
</body>
</html>