轮播图的原生JS实现

轮播图的原生JS实现

因为我总觉得要借助插件来完成的东西总是感觉依赖于别人,要是又有一天依赖不了了,自己就再也站不起来了,所以就不想用jQureey来做,也看了很多有经验的大佬给的JS,整体来说可以实现,但是完全照抄的话没有过度效果,我自己简单加了过渡效果,重制了结构,类似小米那种淡入淡出效果做了一个轮播图.

整体思路

• 用一个大盒子包住所有图片,给绝对定位叠在一起,然后每个图片都直接用opacity:0隐藏起来,定时器控制每2秒更换一个图片opacity:1,我们给这个属性放到.block这个类里面,定时器每过2秒给下一张图片.block这个类.再又因为鼠标经过的时候已经不再需要轮播,就停止定时器,鼠标离开时重启路由器.
• 图片里面需要一个左边一个右边的按钮,用来控制图片的左右滚动,给left类和right类,注册点击事件控制图片轮播,
• 轮播图一般需要告诉用户总共有几张图在轮播,所以需要放个些原点或者长条让用户一目了然有多少图片,这里给个原点,因为是有序的,给个ol,几张图片就几个li,注册鼠标经过事件,鼠标经过第一个原点就让第一张图片增加一个.block,经过第二个原点就给第二章图片增加一个.block,结构是写在大盒子里面的,所以鼠标到li里面也同样可以停止计时器

布局结构

• 结构如下

    <div id="loopDiv">
        <!-- 图层 -->
        <ol id='picol'>
            <!-- 最上面的图片 -->
            <li class="block"><img src="./images/0.jpg " width='100%'></li>
            <!-- 放在下面隐藏的图片 -->
            <li><img src="./images/1.jpg " width='100%'></li>
            <li><img src="./images/2.jpg " width='100%'></li>
            <li><img src="./images/3.jpg " width='100%'></li>
        </ol>
        <!-- 右下角的小圆点 可以通过鼠标经过直接更换图片 -->
        <ol id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
        <!-- 图片中间靠左的按钮 -->
        <a href="javascript:;" class="blk">
            <div id="left" class="chooseBut">
                < </div>
        </a>
        <!-- 图片中间靠右的按钮 -->
        <a href="javascript:;" class="blk">
            <div id="right" class="chooseBut">></div>
        </a>
    </div>

CSS样式

• 样式如下

    <style>
        li {
            list-style: none;
        }

        #loopDiv {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            position: relative;
        }

        #list {
            list-style: none;
            position: absolute;
            bottom: 10px;
            right: 25px;
        }

        #list li {
            position: relative;
            float: left;
            width: 8px;
            height: 8px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background: #cddfec;
            margin-right: 10px;
            border-color: #aaa;
            font-size: 0;
        }

        .chooseBut {
            width: 50px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.2);
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            display: none;
        }

        #left {
            position: absolute;
            left: 0px;
            top: 150px;
        }

        #right {
            position: absolute;
            right: 0px;
            top: 150px;
        }

        .blk {
            display: block;
        }

        #picol li {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: 1s;
        }

        .block {
            /* 权重不够,大爹来凑 */
            opacity: 1 !important;
        }
    </style>

JS执行

• 代码如下

    <script type="text/javascript">
        // 大盒子
        var jsDivBox = document.getElementById("loopDiv");
        //获取图片
        var jsImg = document.getElementById("picol");
        var pic = picol.querySelectorAll('li');
        //左右按钮节点
        var jsLeft = document.getElementById("left");
        var jsRight = document.getElementById("right");
        //获取所有的li
        var jsOl = document.getElementById("list");
        var jsLis = jsOl.getElementsByTagName("li");
        //让第一个小圆点变为灰色
        jsLis[0].style.backgroundColor = "#c2c2c2";
        // 声明图片下标
        var currentPage = 0;
        //启动定时器
        var timer = setInterval(func, 2000);
        function func() {
            currentPage++;
            changePic();
        }
        function changePic() {
            // 循环
            if (currentPage == 4) {
                currentPage = 0;
            }
            if (currentPage == -1) {
                currentPage = 3;
            }
            //更换图片
            document.querySelector('.block').className = '';
            pic[currentPage].className = 'block';
            //将所有的小圆点颜色清空
            for (var i = 0; i < jsLis.length; i++) {
                jsLis[i].style.backgroundColor = "#aaa";
            }
            //改变对应小圆点为灰色
            jsLis[currentPage].style.backgroundColor = "#8f8f8f";
        }
        //鼠标进入
        jsDivBox.addEventListener("mouseover", func1, false);
        function func1() {
            //停止定时器
            clearInterval(timer);
            //显示左右按钮
            jsLeft.style.display = "block";
            jsRight.style.display = "block";
        }
        //鼠标移出
        jsDivBox.addEventListener("mouseout", func2, false);
        function func2() {
            //重启定时器
            timer = setInterval(func, 2000);
            //隐藏左右按钮
            jsLeft.style.display = "none";
            jsRight.style.display = "none";
        }
        //点击左右按钮
        jsLeft.addEventListener("click", func3, false);
        jsRight.addEventListener("click", func, false);
        function func3() {
            currentPage--;
            changePic();
        }
        // 鼠标经过按钮时改变颜色
        jsLeft.onmouseover = function () {
            this.style.backgroundColor = "rgba(0,0,0,0.6)";
        }
        jsLeft.onmouseout = function () {
            this.style.backgroundColor = "rgba(0,0,0,0.2)";
        }
        jsRight.onmouseover = function () {
            this.style.backgroundColor = "rgba(0,0,0,0.6)";
        }
        jsRight.onmouseout = function () {
            this.style.backgroundColor = "rgba(0,0,0,0.2)";
        }
        //进入小圆点
        for (var j = 0; j < jsLis.length; j++) {
            jsLis[j].onmouseover = function () {
                currentPage = parseInt(this.innerHTML) - 1;
                changePic();
            };
        }
    </script>

最后

• 如果图片太大直接浮动浮不到一排,好像是可以给盒子一个宽度超过100%实现,但是感觉淡入淡出的感觉也还不错,就没做另外一种效果.