基于jQuery的轮播图实现

最新推荐文章于 2022-11-22 09:39:10 发布

Void_CM

最新推荐文章于 2022-11-22 09:39:10 发布

阅读量102

点赞数

分类专栏： Html+CSS+js jQuery 文章标签： js jquery html css

本文链接：https://blog.csdn.net/baidu_41656912/article/details/113867484

版权

Html+CSS+js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

原理

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>

Void_CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery的轮播图实现

原理效果<!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"> <titl
复制链接

扫一扫

专栏目录