js首页轮播_前端

js首页轮播

未知

2020-12-08 09:58:36

0次

问题描述：

实现如下图的轮播效果。

解决办法：
    <style type="text/css">
       /*标题样式*/
       .app {
            width: 100%;
            text-align: center;
       }

       .app .scroll {
            position: relative;
            display: inline-block;
            height: 460px;
            width: 100%;

       }

       .app .scroll .img {
            display: none;
            width: 100%;
            height: 460px;
       }

       .app .scroll .current {
            display: block;
       }

       .app .scroll .lf {
            position: absolute;
            top: 50%;
            left: 10px;
            background-image: url('images/arrow.png');
            background-position: -83px 0;
            width: 41px;
            height: 69px;
            cursor: pointer;
            transform: translateY(-50%);
       }


       .app .scroll .lr {
            position: absolute;
            top: 50%;
            right: 10px;
            background-image: url('images/arrow.png');
            background-position: -123px 0;
            width: 41px;
            height: 69px;
            cursor: pointer;
            transform: translateY(-50%);
       }

       .app .dots {
              margin-top: -33px;
           z-index: 999;
           position: relative;
       }

       .app .dots>span {
            display: inline-block;
            box-sizing: border-box;
            width: 11px;
            height: 11px;
            border: 3px solid red;
            border-radius: 15px;
            cursor: pointer;
       }

       .app .dots>span:not(:last-child) {
            margin-right: 5px;
       }

       /* 小圆点的颜色 */
       .app .dots .square {
            background: #f46;
       }
   </style>

<div class="container-fluid">
            <div class="app">
                <div class="scroll">
                    
                    <img src="images/banner1.jpg" alt="scrollImage" class="img current">
                    <img src="images/banner1.jpg" alt="scrollImage" class="img">
                    <img src="images/banner.jpg" alt="scrollImage" class="img">
                    <img src="images/banner1.jpg" alt="scrollImage" class="img">
                    <img src="images/banner.jpg" alt="scrollImage" class="img">

                    
                    <div class="lf"></div>
                    <div class="lr"></div>

                    
                    <div class="dots">
                        <span class="square"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
   </div>

<script type="text/javascript">

       window.addEventListener('load', function() {

            var leftArrow = this.document.querySelector('.lf');
            var rightArrow = this.document.querySelector('.lr');

            // 鼠标移动到左右箭头的位置更换图片有灰色背景的图片
            leftArrow.addEventListener('mouseenter', function() {
                this.style.backgroundPosition = '0 0';
            });

            leftArrow.addEventListener('mouseleave', function() {
                this.style.backgroundPosition = '-83px 0';
            });

            rightArrow.addEventListener('mouseenter', function() {
                this.style.backgroundPosition = '-42px 0';
            });

            rightArrow.addEventListener('mouseleave', function() {
                this.style.backgroundPosition = '-123px 0';
            });

            // 获取图片和小点
            var imgs = this.document.querySelectorAll('.img');
            var dots = this.document.querySelector('.dots').querySelectorAll('span');

            // 给图片设置index 属性，好判断当前的图片是哪一张
            for (let i = 0; i < imgs.length; i++) {
                imgs[i].setAttribute('data-index', i);
            }

            // 获取当前图片和图片的index（数组下标）
            var current = this.document.querySelector('.current');
            var currentIndex = current.getAttribute('data-index');

            // 左箭头的点击事件，点击了就返回前一张图片
            // 如果当前图片为第一张那么需要更换到最后一张图片也就是第四张
            leftArrow.addEventListener('click', function() {
                if (currentIndex > 0) {
                    imgs[currentIndex].classList.remove('current');
                    dots[currentIndex].classList.remove('square');
                    imgs[--currentIndex].classList.add('current');
                    dots[currentIndex].classList.add('square');
                } else {
                    imgs[currentIndex].classList.remove('current');
                    dots[currentIndex].classList.remove('square');
                    currentIndex = 4;
                    imgs[currentIndex].classList.add('current');
                    dots[currentIndex].classList.add('square');
                }
            });

            // 点击右箭头下一张图片切换
            // 如果当前为第五张图片，那么切换回第一张图片
            rightArrow.addEventListener('click', changeImage);

            var timer = this.setInterval(changeImage, 8000);

            function changeImage() {
                if (currentIndex < 4) {
                    imgs[currentIndex].classList.remove('current');
                    dots[currentIndex].classList.remove('square');
                    imgs[++currentIndex].classList.add('current');
                    dots[currentIndex].classList.add('square');
                } else {
                    imgs[currentIndex].classList.remove('current');
                    dots[currentIndex].classList.remove('square');
                    currentIndex = 0;
                    imgs[currentIndex].classList.add('current');
                    dots[currentIndex].classList.add('square');
                }
            };

            // 小圆点的点击事件
            for (let k = 0; k < dots.length; k++) {
                dots[k].setAttribute('data-index', k);
                dots[k].addEventListener('click', function() {
                    var index = this.getAttribute('data-index');
                    if (index != currentIndex) {
                        imgs[currentIndex].classList.remove('current');
                        dots[currentIndex].classList.remove('square');
                        imgs[index].classList.add('current');
                        dots[index].classList.add('square');
                        currentIndex = index;
                    }

                })
            }

       });
   </script>

首页轮播问题描述实现如下图的

上一篇：js实现图片自动轮播

下一篇：html中IE对display:none无效，隐藏不了。

js首页轮播

相关内容

热门资讯