基于jQuery的轮播图实现

原理

slidetest
效果

slide
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slider</title>
    <style>
        *{
     
     
            margin:0;
            padding:0;
        }
        body{
     
     
            padding:10%;
            font-family: Helvetica, sans-serif;
        }
        header{
     
     
            color: rgb(187, 184, 184);
            margin-bottom: 10px;
        }
       
        #slider{
     
     
            width: 500px;
            height: 375px;
            /* overflow控制溢出时的样式，隐藏/滚动 */
            overflow: hidden;
        }
       
        #slider .slides{
     
     
            display: block;
            width: 3000px;
            height: 375px;
        }

        #slider .slide{
     
     
            float: left;
            /* list-style-type 属性设置列表项标记的类型。 */
            list-style-type: none;
            width: 500px;
            height: 375px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>jQuery Slider</h1>
        </header>
        <!-- 最外层的slider 限制了轮播图的窗口大小（与图片大小一致） 同时设置溢出元素样式：overflow: hidden; -->
        <div id="slider">
            <!-- slide容器，包含了所有的img，这里尽量将宽度设大=width*图片数量 -->
            <ul class="slides">
                <li class="slide"><img src="/jQuery/Images/bg01.jpg"></li>
                <li class="slide"><img src="/jQuery/Images/bg02.jpg"></li>
                <li class="slide"><img src="/jQuery/Images/bg03.jpg"></li>
                <li class="slide"><img src="/jQuery/Images/bg04.jpg"></li>
                <li class="slide"><img src="/jQuery/Images/bg05.jpg"></li>
                <li class="slide"><img src="/jQuery/Images/bg01.jpg"></li>
            </ul>
        </div>
    </div>
    <script src="/jQuery/js/jquery-3.5.1.js"></script>
    <script>
        //configuration
        var width = 500;
        var animationSpeed = 1000; //动效持续时间
        var pause = 3000;           //定时器时间
        var currentSlide = 1;       //判断最后一个slide的变量

        //cache DOM
        var $slider = $('#slider');
        var $sliderContainer = $slider.find('.slides');
        var $slides = $sliderContainer.find('.slide');

        var interval;
        
        function startSlider(){
     
              
            //jugde the last one:use the 3rd var of animate(callback())
            /*
            setInterval(function,time)
            animate(obj,time,callback)
            */
            interval = setInterval(function(){
     
     
                $("#slider .slides").animate({
     
     'margin-left':'-='+width},animationSpeed,function(){
     
     
                currentSlide++;
                if(currentSlide === $slides.length){
     
     
                    currentSlide = 1;
                    $sliderContainer.css('margin-left',0);
                }//-if
            });//--animate
            },pause);
        }

        function stopSlider(){
     
     
            clearInterval(interval);
        }
        
        // 鼠标移入时，停止，移开时，继续
        $slides.on('mouseenter',stopSlider).on('mouseleave',startSlider);

        startSlider();

    </script>
</body>
</html>
基于jQuery的轮播图实现

原理

效果

猜你喜欢
