jquery版轮播图实现（自动轮播，无缝轮播，点击切换）

最新推荐文章于 2025-03-13 01:14:49 发布

y先森

最新推荐文章于 2025-03-13 01:14:49 发布

阅读量404

点赞数 3

文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/yyyyyyysc/article/details/143579381

版权

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .context{
            width: 1500px;
            height: 180px;
            margin: 0 auto;
            position: relative;
        }
        img{
            width: 300px;
            height: 180px;
        }
        ul{
            width: 1500px;
            height: 180px;
            position: relative;
        }
        li{
            list-style: none;
            float: left;
        }
        .mc{
            width: 300px;
            height: 180px;
            position: relative;
            left: 50%;
            top: 0px;
            transform: translateX(-50%);
            overflow: hidden;                                                                                                                                                                                                                                                                                                                           
            .zuo{
                width: 20px;
                height: 20px;
                background-color: aliceblue;
                border-radius: 10px;
                text-align: center;
                line-height: 20px;
                position: absolute;
                cursor: pointer;
                font-weight: bold;
                left: 0;
                top: 80px;
                z-index: 1;
            }
            .you{
                 width: 20px;
                height: 20px;
                background-color: aliceblue;
                cursor: pointer;
                text-align: center;
                line-height: 20px;
                border-radius: 10px;
                font-weight: bold;
                position: absolute;
                right: 0;
                top: 80px;
                z-index: 1;

            }
        }
    </style>
</head>
<body>
    <div class="context">
        
        <div class="mc">

            <div class="zuo"><</div>
            <div class="you">></div>
            <ul>
                <li><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.gOl2KittUNnB7H7quyTZdAHaE8?rs=1&pid=ImgDetMain" alt=""></li>
                <li><img src="https://www.2008php.com/2015_Website_appreciate/2015-09-28/20150928002719.jpg" alt=""></li>
                <li><img src="https://www.2008php.com/2015_Website_appreciate/2015-05-29/20150529223815.jpg" alt=""></li>
                <li><img src="https://www.2008php.com/2014_Website_appreciate/2014-05-02/20140502024652.jpg" alt=""></li>
                <li><img src="https://hao6.qhimg.com/t0104f4f53dea6089ef.jpg?1920*1200" alt=""></li>
            </ul>
        </div>
    </div>
    <script>
        let timer = null
        let temp = null
        let i =0
        $('.zuo').on('click',function(){
             clearTimeout(timer)
                timer = setTimeout(()=>{
                    // 要处理的事件
                    i =i-300
                    if(i==-300||i==-600){
                        i=1200
                    }
                    $('ul').css({
                        right:`${i}px`
                    })
                },300)
            
        })
        temp=setInterval(()=>{
            i+=300
            if(i==1500){
                i=0
            }
            $('ul').css({
                right:`${i}px`
            })
        },1000)
        $('.you').on('click',function(){
             clearTimeout(timer)
            timer = setTimeout(()=>{
                // 要处理的事件
                i =i+300
                if(i==1500){
                    i=0
                    // console.log($('li'));
                    
                    // $('ul')[0].appendChild($('li')[0])
                }
                $('ul').css({
                    right:`${i}px`
                })
            },300)
            
            
        })
        $('.mc').on('mouseenter',()=>{
            console.log(21);
            
            clearInterval(temp)
        })
        $('.mc').on('mouseleave',()=>{
            temp=setInterval(()=>{
                i+=300
                if(i==1500){
                    i=0
                }
                $('ul').css({
                    right:`${i}px`
                })
            },1000)
        })
    </script>
</body>
</html>

效果图：