原生JS轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

北街学长

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量109

点赞数

分类专栏： js 文章标签：轮播图

本文链接：https://blog.csdn.net/qq_36790381/article/details/83111414

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/banner.css">
</head>
<body>
    <div class="banner">
        <!--图片放置区-->
        <div class="inner">

        </div>
        <!--分页器-->
        <ul class="fucus">

        </ul>
        <!--左右按钮-->
        <a class="arrow bannerLeft" href="javascript:;"></a>
        <a class="arrow bannerRight" href="javascript:;"></a>
    </div>


</body>
<script src="js/banner.js" charset="UTF-8"></script>
</html>

css代码

.banner {
  width: 1000px;
  height: 341px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.banner .inner {
  position: absolute;
  left: 0px;
  top: 0;
  width: 1000px;
}
.banner .inner img {
  float: left;
}
.banner .fucus {
  position: absolute;
  left: 462px;
  top: 312px;
}
.banner .fucus li {
  float: left;
}
.banner .fucus li:hover {
  cursor: pointer;
}
.banner a {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  top: 114px;
}
.banner .bannerLeft {
  background: url("../img/arrowLeft.png") no-repeat;
  left: 0;
}
.banner .bannerRight {
  background: url("../img/arrowRight.png") no-repeat;
  right: 0;
}

js代码

(function () {
    var inner = document.getElementsByClassName('inner')[0]
    var banner = document.getElementsByClassName('banner')[0]
    var fucus = document.getElementsByClassName('fucus')[0]
    var fucusImgs = fucus.childNodes
    //实现数据绑定：使用ajax获取数据
    var jsonData = null
    ~function () {
        var xhr = new XMLHttpRequest()
        xhr.open('GET','json/banner.txt?_='+Math.random(),false)

        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4 && xhr.status === 200){
                jsonData = eval("("+xhr.responseText+")")
            }
        }
        xhr.send(null)
    }()

    //字符串拼接

    ~function () {
        if(jsonData){
            var str = ''
            var fucusStr = ''
            for(var i = 0;i < jsonData.length;i++){
                var curData = jsonData[i]
                str+='<img src="'+curData["img"]+'" width=\'1000\' height="341"  alt="">'
                fucusStr+='<li><img src="img/dot.png" width="20" alt=""></li>'
            }
            //将拼接好的字符串添加进html
            inner.innerHTML = str
            fucus.innerHTML = fucusStr
            //给inner设置动态宽度
            inner.style.width = jsonData.length*1000 + 'px'
        }

    }()
    //设置自动轮播
    var len = jsonData.length
    var step = 0
    var interval = 1000
    var autoTimer = setInterval(autoMove,interval)
    fucusImgs[0].innerHTML = '<img src="./img/dot-on.png" width="20" alt="">'
    function autoMove() {
        step++
        if(step == len){
            step = 0
        }
        changeDot(step)
        inner.style.left = -step * 1000 + 'px'
    }
    //切换小圆点图片
    function changeDot(i) {
        fucusImgs[i].innerHTML = '<img src="./img/dot-on.png" width="20" alt="">'
        //清除其他li里的图片
        fucusImgs.forEach((fucusImg,index) => {
            if(index !== i){
                fucusImgs[index].innerHTML = '<img src="./img/dot.png" width="20" alt="">'
            }
        })
    }
   //鼠标移入移出停止计时器
    banner.onmouseover = function () {
        clearInterval(autoTimer)
    }
    banner.onmouseout = function () {
        autoTimer = setInterval(autoMove,interval)
    }
    //设置点击小圆圈切换为对应图片
    ~function () {
        fucusImgs.forEach((fucusImg,index) => {
                var curLi = fucusImg
                curLi.index = index
                curLi.onclick = function () {
                    step = this.index
                    changeDot(step)
                    inner.style.left = -step * 1000 + 'px'
                }
        })
    }()

    //设置左右点击切换图片
    var bannerLeft = document.getElementsByClassName('bannerLeft')[0];
    var bannerRight = document.getElementsByClassName('bannerRight')[0];
    bannerLeft.onclick = function () {
        if(step == -1){
            step = 4
        }
        inner.style.left = -step * 1000 + 'px'
        changeDot(step)
        step--

    }
    bannerRight.onclick = function () {
        if(step == 5){
            step = 0
        }
        inner.style.left = -step * 1000 + 'px'
        changeDot(step)
        step++
    }
})()

总结

用原生js写一个轮播图考虑的细节还是很多的，很能够再次巩固自己的代码能力，虽然现在轮播图的框架很多，比如Swiper等，但是自己能够写出来，也是必须的一个过程

北街学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS轮播图

html代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播图&lt;/title&gt; &lt;link rel="stylesheet" href="
复制链接

扫一扫