JavaScript轮播图

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

暮秋夜微凉

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

阅读量1.4k

点赞数 2

本文链接：https://blog.csdn.net/qq_37874674/article/details/80391213

版权

随便写的轮播，肯定有bug和多余的代码，后面在慢慢修改

布局

<body>
     <div id="slideshow-container"> <!--轮播容器存放图片按钮等 -->
        <ul id="img"><!--参与轮播的图片-->
            <li><img src="img/1.jpg"></li>
            <li><img src="img/2.jpg"></li>
            <li><img src="img/3.jpg"></li>
            <li><img src="img/4.jpg"></li>
            <li><img src="img/5.jpg"></li>
        </ul>
        <ul id="dot"><!--轮播图下的小圆点-->
            <!-- 
            <li class="select"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> 
            -->
        </ul>

        <!-- 前翻页，后翻页按钮 -->
        <div class="prev" id="slideShowPrev">&#10094;</div> <!-- &#10094 为特殊Unicode字符 -->
        <div class="next" id="slideShowNext">&#10095;</div>  <!-- &#10095 为特殊Unicode字符 -->
    </div>

样式

#slideshow-container {
    width: 520px;
    height: 280px;
    overflow: hidden;
    position: relative;
    margin: 100px auto;
    box-shadow: 0 0 10px #e5e5e5;
}

#img {
    width: 500%;
    height: 100%;
    transition: all 0.8s;
    position: absolute;
}

#img li {
    float: left;
}

#dot {
    left: 50%;
    bottom: 20px;
    width: 100px;
    height: 12px;
    position: absolute;
    transform: translateX(-50%);
}

#dot li {
    float: left;
    width: 12px;
    height: 12px;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #000;
}

#dot li:first-child {
    margin-left: 0;
}

#dot .select {
    background: lightblue;
}

.prev, .next {
    top: 50%;
    z-index: 10;
    width: 30px;
    height: 60px;
    display: block;
    font-size: 24px;
    cursor: pointer;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
    position: absolute;
    transition: all .2s;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .1);
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.prev:hover, .next:hover {
    background: rgba(0, 0, 0, .7);
}

js代码

window.onload = function () {
    //获取轮播组件
    var slideShow = document.getElementById('slideshow-container'); //轮播容器
    var imgGroup = document.getElementById('img');   //轮播图片组
    var dotGroup = document.getElementById('dot');   //圆点组
    var prev = document.getElementById('slideShowPrev'); //前翻页
    var next = document.getElementById('slideShowNext'); //后翻页

    imgGroup.index = 1;//设置图片的索引值

    var imgChild = imgGroup.children;    //轮播的5张图片；
    var dotChild = dotGroup.children;   //圆点

    var slideShowWidth = slideShow.offsetWidth;

    //初始化圆点和图片
    init();

    function init() {
        //根据图片数量动态创建圆点
        for (var i = 0; i < imgChild.length; i++) {
            var li = document.createElement('li');
            li.index = i;
            dotGroup.appendChild(li);

            if (li.index == 0) {
                li.className = 'select';
            }
        }

        //添加图片
        var first = imgGroup.firstElementChild;
        var last = imgGroup.lastElementChild.cloneNode(true);

        imgGroup.appendChild(first.cloneNode(true));
        imgGroup.insertBefore(last, first);

        //根据图片数量动态设定imgGroup的宽度
        var imgWidth = slideShowWidth * imgChild.length;

        imgGroup.style.width = imgWidth + 'px';

        //向左移动一张图的位置
        imgGroup.style.left = -imgGroup.index * slideShowWidth + 'px';
    }

    //左点击事件
    prev.onclick = function () {
        imgGroup.index--;

        //移动图片位置
        imgGroup.style.left = -imgGroup.index * slideShowWidth + 'px';
        //当图片是第一张时，切换到最后一张
        if (imgGroup.index == 0) {
            imgGroup.index = imgChild.length - 2;
            imgGroup.style.left = -imgGroup.index * slideShowWidth + 'px';
        }

        updateDot(imgGroup.index);
    }

    //右点击事件
    next.onclick = function () {
        clickRight();
        autoPlay();
    }

    //右点击通用
    function clickRight() {
        imgGroup.index++;

        //移动图片位置
        imgGroup.style.left = -imgGroup.index * slideShowWidth + 'px';

        //当图片是最后一张时，切换到第二张
        if (imgGroup.index == imgChild.length - 1) {
            imgGroup.style.left = -slideShow.offsetWidth + 'px';
            imgGroup.index = 1;
            imgGroup.style.transition = 'all 0.3s linear';
        } else {
            // imgGroup.style.left = 0;
            imgGroup.style.transition = 'all 0.3s linear';
        }

        updateDot(imgGroup.index);
    }

    //根据当前图片更新圆点
    function updateDot(index) {
        for (var i = 0; i < dotChild.length; i++) {
            dotChild[i].className = '';
        }
        //数组从0开始，而图片索引值为1，故index需要-1
        dotChild[index - 1].className = 'select';
    }

    //点击点切换图片
    dotClick();

    function dotClick() {
        for (var i = 0; i < dotChild.length; i++) {
            dotChild[i].index = i;

            dotChild[i].onclick = function () {
                imgGroup.index = this.index + 1;
                updateDot(imgGroup.index);
                imgGroup.style.left = -imgGroup.index * slideShow.offsetWidth + 'px'
            }
        }
    }

    //添加自动轮播(定时器)
    autoPlay();

    function autoPlay() {
        //清除定时器
        clearInterval(imgGroup.timer);
        //设置定时器，三秒切换一次图片
        imgGroup.timer = setInterval(function () {
            clickRight();
        }, 3000);
    }

    //鼠标移入停止播放
    slideShow.onmouseenter = function () {
        clearInterval(imgGroup.timer);
    };

    //鼠标移出开始播放
    slideShow.onmouseleave = function () {
        autoPlay();
    }
};

暮秋夜微凉

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript轮播图

布局&amp;amp;amp;lt;body&amp;amp;amp;gt; &amp;amp;amp;lt;div id=&amp;amp;quot;slideshow-container&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;!--轮播容器存放图片按钮等 --&amp;amp;amp;gt; &amp;amp;amp;lt;ul id=&
复制链接

扫一扫