js 不使用自带轮播方法的轮播图

最新推荐文章于 2023-02-04 16:17:40 发布

神奇大叔

最新推荐文章于 2023-02-04 16:17:40 发布

阅读量327

点赞数

分类专栏： javaScript 网页制作案例

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103431241

版权

javaScript 同时被 2 个专栏收录

127 篇文章 6 订阅

订阅专栏

网页制作案例

41 篇文章 3 订阅

订阅专栏

解决问题:图片的显示问题
图片的改变和下面选择圆圈的联动问题
圆圈的改变和图片的联动问题

代码示例:

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .box {
            width: 672px;
            height: 320px;
            position: relative;
            margin: 20px auto;
        }

        ul {
            list-style: none;
        }

        .imgs {
            position: relative;
            width: 672px;
            height: 320px;
        }

        .box .imgs li {
            position: absolute;
            display: none;
        }

        .box .imgs li.select {
            display: block;
        }

        .btns span {
            position: absolute;
            width: 55px;
            height: 55px;
            top: 137.5px;
        }

        .btns .left {
            left: 10px;
            background-image: url("img/slide-btnL.png");
        }

        .btns .right {
            right: 10px;
            background-image: url("img/slide-btnR.png");
        }

        .circles {
            position: absolute;
            bottom: 10px;
            text-align: center;
            width: 100%;
        }

        .circles li {
            width: 15px;
            height: 15px;
            display: inline-block;
            background-color: orange;
            border-radius: 50%;
            cursor: pointer;
        }

        .circles li.select {
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="imgs">
        <ul>
            <li class="select"><a href="#"><img src="img/aaa.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/bbb.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/ccc.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/ddd.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/eee.jpg" alt=""/></a></li>
        </ul>
    </div>
    <div class="btns">
        <span class="left"></span>
        <span class="right"></span>
    </div>
    <div class="circles">
        <ul>
            <li class="select"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<script>
    //获取页面元素
    var btnLeft = document.querySelector('.left');
    var btnRight = document.querySelector('.right');
    var imgLis = document.querySelectorAll('.imgs li');
    var circleLis = document.querySelectorAll('.circles li');
    // console.log(imgLis,circleLis,btnLeft,btnRight);

    //定义变量 表示从第一个位置开始
    var ids = 0;
    //对按钮进行事件绑定
    btnLeft.onclick = function () {
        ids--;
        changStyle();
    };
    btnRight.onclick = function () {
        ids++;
        changStyle();
    };
    //对li进行事件绑定
    for(var j = 0;j<imgLis.length;j++){
        circleLis[j].index = j;
        circleLis[j].onmouseover = function () {
            ids = this.index;
            changStyle();
        }

    }
    //自己执行页面的切换

    setInterval(function () {
        ids++;
        changStyle();

    },2000);
    function changStyle() {
        //范围校验
        if (ids < 0) {
            ids = imgLis.length - 1;
        }
        if (ids > imgLis.length - 1) {
            ids = 0;
        }
        //清除所有的样式
        for (var i = 0; i < imgLis.length; i++) {
            imgLis[i].className = '';
            circleLis[i].className = '';
        }
        //给对应的li进行赋值
        imgLis[ids].className = 'select';
        circleLis[ids].className = 'select';
    }

</script>
</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 不使用自带轮播方法的轮播图

解决问题:图片的显示问题图片的改变和下面选择圆圈的联动问题圆圈的改变和图片的联动问题代码示例:<html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0px; margin: 0px; }...
复制链接

扫一扫