JS、JQuery实习轮播图

最新推荐文章于 2021-08-16 16:20:44 发布

侬&码

最新推荐文章于 2021-08-16 16:20:44 发布

阅读量315

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44322764/article/details/107375915

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

轮播图

显示效果

在这里插入图片描述

JS轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #lb {
            margin: 100px auto;
            width: 790px;
            height: 340px;
            border: 5px solid rgba(0, 0, 0, .5);
            position: relative;
            /*border-radius: 30px;*/
        }

        #lb img {
            position: absolute;
            top: 0;
            left: 0;
            float: left;
            display: none;
        }

        #lb .bl {
            display: block;
        }

        #lb ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #turn span {
            width: 40px;
            height: 60px;
            display: inline-block;
            background-color: rgba(0, 0, 0, .5);
            color: #FFFFFF;
            position: absolute;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            display: none;
            cursor: pointer;
        }

        #tl {
            top: 50%;
            margin-top: -30px;
        }

        #tr {
            top: 50%;
            right: 0;
            margin-top: -30px;
        }

        #lb #xb {
            position: absolute;
            overflow: hidden;
            background-color: rgba(0, 0, 0, .5);
            padding: 5px 20px;
            width: 100px;
            border-radius: 10px;
            bottom: 0;
            left: 50%;
            margin-left: -70px;
            margin-bottom: 20px;

        }

        #xb li {
            float: left;
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #FFFFFF;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        #xb .xb_cr {
            background-color: #f10215;
        }
    </style>
</head>
<body>
<div id="lb">
    <img class="bl" src="img/1.jpg"/>
    <img src="img/2.jpg"/>
    <img src="img/3.jpg"/>
    <img src="img/4.jpg"/>
    <img src="img/5.jpg"/>
    <div id="turn">
        <span id="tl"><</span>
        <span id="tr">></span>
    </div>
    <ul id="xb">
        <li class="xb_cr"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
<script>
    // 定时器
    function ds() {
        var ini = setInterval(function () {
            if (!(index < imgs.length)) {
                index = 0
            }
            for (i = 0; i < imgs.length; i++) {
                imgs[i].removeAttribute('class')
                xbs[i].removeAttribute('class')
            }
            imgs[index].setAttribute('class', 'bl')
            xbs[index].setAttribute('class', 'xb_cr')
            index++
        }, 2000)
        return ini
    }
    //获取id对象
    my$ = (id) => {
        return document.getElementById(id)
    }

    imgs = my$('lb').getElementsByTagName('img');
    xbs = my$('xb').getElementsByTagName('li');
    // 定义全局下标
    index = 0
    inl = ds()
    // 鼠标进入轮播图
    my$('lb').onmouseover = function () {
        clearInterval(inl)
        turns = my$('turn').getElementsByTagName('span');
        for (i = 0; i < turns.length; i++) {
            turns[i].style.display = 'block'
        }
        my$('xb').style.display = 'block'
    }
    // 鼠标离开轮播图
    my$('lb').onmouseout = function () {
        inl = ds()
        for (i = 0; i < turns.length; i++) {
            turns[i].style.display = 'none'
        }
        my$('xb').style.display = 'none'
    }
    // 向后翻图
    my$('tr').onclick = function () {
        if (!(index < imgs.length - 1)) {
            index = -1
        }
        index++
        for (i = 0; i < imgs.length; i++) {
            imgs[i].removeAttribute('class')
            xbs[i].removeAttribute('class')
        }
        imgs[index].setAttribute('class', 'bl')
        xbs[index].setAttribute('class', 'xb_cr')
    }
    // 向前翻图
    my$('tl').onclick = function () {
        if (!(index > 0)) {
            index = imgs.length
        }
        index--
        for (i = 0; i < imgs.length; i++) {
            imgs[i].removeAttribute('class')
            xbs[i].removeAttribute('class')
        }
        imgs[index].setAttribute('class', 'bl')
        xbs[index].setAttribute('class', 'xb_cr')
    }
    for (i = 0; i < xbs.length; i++) {
    //设置轮播的小圆点的小标
        xbs[i].setAttribute('count', i)
        // 点击小圆点跳到对应的图
        xbs[i].onclick = function () {
            for (i = 0; i < xbs.length; i++) {
                imgs[i].removeAttribute('class')
                xbs[i].removeAttribute('class')
            }
            index= this.getAttribute('count');
            imgs[index].setAttribute('class', 'bl')
            xbs[index].setAttribute('class', 'xb_cr')
        }
    }


</script>
</html>

JQuery轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery轮播图</title>
    <style>
        body {
            /*background-color: #e7e8e9;*/
        }

        #lb {
            margin: 100px auto;
            width: 790px;
            height: 340px;
            border: 30px solid rgba(88, 120, 88, .2);
            position: relative;
            border-radius: 30px;
        }

        #lb img {
            position: absolute;
            top: 0;
            left: 0;
            float: left;
            display: none;
        }

        #lb .bl {
            display: block;
        }

        #lb ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #turn span {
            width: 40px;
            height: 60px;
            display: inline-block;
            background-color: rgba(0, 0, 0, .5);
            color: #FFFFFF;
            position: absolute;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            display: none;
            cursor: pointer;
        }

        #lb:hover #turn span, #lb:hover #xb {
            display: block;
        }

        #tl {
            top: 50%;
            margin-top: -30px;
        }

        #tr {
            top: 50%;
            right: 0;
            margin-top: -30px;
        }

        #lb #xb {
            position: absolute;
            overflow: hidden;
            background-color: rgba(0, 0, 0, .5);
            padding: 8px 20px;
            /*width: 100px;*/
            border-radius: 10px;
            bottom: 0;
            left: 50%;
            margin-left: -100px;
            margin-bottom: 20px;
            /*display: none;*/

        }

        #xb li {
            float: left;
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #FFFFFF;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        #xb .xb_cr {
            background-color: #f10215;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="lb">
    <img class="bl" src="img/1.jpg"/>
    <img src="img/2.jpg"/>
    <img src="img/3.jpg"/>
    <img src="img/4.jpg"/>
    <img src="img/5.jpg"/>
    <img src="img/6.jpg"/>
    <img src="img/7.jpg"/>
    <img src="img/8.jpg"/>
    <div id="turn">
        <span id="tl"><</span>
        <span id="tr">></span>
    </div>
    <ul id="xb">
        <li class="xb_cr"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
<script>
    //index 当前图片下标
    index = 0
    lbs = $('#lb img');
    lis = $('#xb li');
    // 定义点击的图片
    target_node = () => {
        lbs.removeClass('bl')
        lbs.fadeOut('5000')
        lis.removeClass('xb_cr')
        lbs[index].className = 'bl'
        $(lbs[index]).fadeIn('5000')
        lis[index].className = 'xb_cr'
    }
    //定义定时器函数
    dsq = () => {
        var interval = setInterval(function () {
            if (index > lbs.length - 1) {
                index = 0
            }
            target_node()
            index++
        }, 2000)
        return interval
    }
    // 定时切换图片
    inl = dsq()
    //鼠标在图片上停止切换图片
    $('#lb').on('mouseover', function () {
        clearInterval(inl)
    })
    //鼠标离开图片继续切换图片
    $('#lb').on('mouseout', function () {
        inl = dsq()
    })
    //左翻页
    $('#tl').on('click', function () {
        if (index <= 0) {
            index = lbs.length
        }
        index--
        target_node()
    })
    //右翻页
    $('#tr').on('click', function () {
        if (index >= lbs.length - 1) {
            index = -1
        }
        index++
        target_node()
    })
    // 点击小圆点切换图片
    for (i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i)
        lis[i].onclick = function () {
            index = this.getAttribute('index')
            target_node()
        }
    }
</script>
</html>

侬&码

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS、JQuery实习轮播图

轮播图显示效果JS轮播<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #lb { margin: 100px auto; width: 790px; height: 340
复制链接

扫一扫

专栏目录