jquery实现幻灯片的两种方法_shutter.js-优快云博客

本文链接：https://blog.youkuaiyun.com/krysliang/article/details/84768501

本文介绍了如何利用jQuery的Shutter插件和纯JavaScript实现幻灯片效果。首先，需要引入jQuery、Velocity.js及Shutter的CSS和JS文件。接着，设置HTML布局，包括图片链接和容器。为幻灯片添加必要的样式，并在图片上添加data-shutter-title属性以显示文字。最后，通过创建Shutter对象并配置参数来激活幻灯片功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四。使用jQuery的shutter插件进行幻灯片

首先引入shutter的css文件和js文件，其中shutter.js依赖jQuery和velocity.js文件，所以要在要在shutter.js文件前面引进这两个文件。

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</body>

</html>

然后写自己的布局

</div>

然后最外层容器添加shutter的样式，装着所有图片的容器添加shutter-img的样式，然后每个照片前面的a标签添加data-shutter-title样式，在这里添加需要添加的文字。

然后再写一个容器用来存放左右切换键（这里不用自己写样式了插件有写，但是需要更改css文件中的路径），然后new一个shutter对象，写上参数就可以了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="shutter.css" type="text/css" rel="stylesheet">

</head>

<body>

    <div class="container shutter">

        <div class="banner shutter-img">

            <a href="###" data-shutter-title="hello Man"><img src="../img/1.jpg"></a>

            <a href="###" data-shutter-title="hello Man"><img src="../img/2.jpg"></a>

            <a href="###" data-shutter-title="hello Man"><img src="../img/3.jpg"></a>

            <a href="###" data-shutter-title="hello Man"><img src="../img/4.jpg"></a>

            <a href="###" data-shutter-title="hello Man"><img src="../img/5.jpg"></a>

            <a href="###" data-shutter-title="hello Man"><img src="../img/6.jpg"></a>

            <a href="###" data-shutter-title="hello Man"><img src="../img/7.jpg"></a>

        </div>

        <ul class="btn shutter-btn" >

            <li class="prev"></li>

            <li class="next"></li>

        </ul>

        <div class="showdesc shutter-desc">

            <P>hello</P>

        </div>

    </div>



    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript" src="velocity.js"></script>

    <script type="text/javascript" src="shutter.js"></script>

    <script>

        $(function () {

            $('.container').shutter({

                shutterW: 1000, // 容器宽度

                shutterH: 358, // 容器高度

                isAutoPlay: true, // 是否自动播放

                playInterval: 3000, // 自动播放时间

                curDisplay: 1, // 当前显示页

                fullPage: false // 是否全屏展示

            });

        });

    </script>

</body>

</html>

五。纯jq来实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>单纯用jQuery来实现幻灯片</title>

    <style>

        /* 全局样式设置 */

        *{

            margin:0;

            padding:0;

        }

        h1{

            text-align: center;

            /*line-height: 100px;*/

        }

        a{

            text-decoration: none;

        }

        /* 设置轮播图样式 */

        /* 图片显示样式 */

        .banner_slider{

            position: relative;

            background-color: green;

            margin:0 auto;

            width:500px;

            height: 380px;

            overflow:hidden;

        }

        .banner_slider_pics{

            width:3000px;

            height: 100%;

            margin:0 auto;

            position: relative;

            left:-500px;

        }

        .banner_slider_pics>a{

            width: 500px;

            height: 380px;

            display: block;

            float: left;

            text-align:center;

        }

        .banner_slider_pics>a> img{

            width: 100%;

            height: 380px;

        }

        /* 上一张，下一张按钮样式 */

        .banner_slider_arrow{

            width: 500px;

            height: 40px;

            position: absolute;

            left: 0;

            bottom: 50%;

            margin-bottom: -20px;

        }

        .arrow_item{

            font-size: 25px;

            font-weight: bold;

            color: #fff;

            background-color: rgba(0,0,0,.6);

            opacity: .6;

        }

        .arrow_item:hover{

            opacity: .8;

        }

        .prev{

            position: absolute;

            left: 10px;

            padding:10px 7px 10px 7px;

        }

        .next{

            position: absolute;

            right: 10px;

            padding:10px 7px 10px 7px;

        }

        /* 圆点按钮 */

        .banner_slider_dots{

            width: 100%;

            height: 30px;

            line-height: 30px;

            position: absolute;

            bottom: 10px;

            text-align: center;

        }

        .dots_item{

            display: inline-block;

            width:10px;

            height: 10px;

            background-color: #999;

            border-radius:50%;

            border:3px solid #fff;

            margin-right: 10px;

        }

        .dots_active{

            background-color: #fff;

            border-color:orange;

        }

    </style>

</head>

<body>

<div class="banner_slider" id="banner_slider">



    <div class="banner_slider_pics" id="banner_slider_pics">

        <a href="#4">-1<img src="http://www.jq22.com/img/cs/500x500-2.png"></a>

        <a href="#1">0<img src="http://www.jq22.com/img/cs/500x500-1.png"></a>

        <a href="#2">1<img src="http://www.jq22.com/img/cs/500x300-1.png"></a>

        <a href="#3">2<img src="http://www.jq22.com/img/cs/300x500-1.png"></a>

        <a href="#4">3<img src="http://www.jq22.com/img/cs/500x500-2.png"></a>

        <a href="#1">4<img src="http://www.jq22.com/img/cs/500x500-1.png"></a>

    </div>



    <div class="banner_slider_arrow">

        <a href="#5" class="arrow_item prev" id="arrow_prev">&lt;</a>

        <a href="#6" class="arrow_item next" id="arrow_next">&gt;</a>

    </div>



    <div class="banner_slider_dots" id="banner_slider_dots">

        <a href="#7" class="dots_item dots_active"></a>

        <a href="#8" class="dots_item"></a>

        <a href="#9" class="dots_item"></a>

        <a href="#10" class="dots_item"></a>

    </div>

</div>

    <script src="jquery-3.3.1.min.js" type="text/javascript"></script>

    <script>

        var banner_slider=$('#banner_slider'),

            pics=$('#banner_slider_pics'),

            items=$('#banner_slider_pics a'),

            pic_width=items.eq(0).width(),//eq()函数是选定元素集（也就是一堆选中的元素中）中的某一个指定的元素

            dots=$('#banner_slider_dots a'),

            btn_prev=$('#arrow_prev'),

            btn_next=$('#arrow_next'),

            current=0,

            timmer=null,//定时器

            size=dots.length;

        // 定义一个鼠标滑过判断事件，第一个参数是鼠标移入事件，第二个是鼠标移出事件

        banner_slider.hover(function(){

            clearInterval(timmer);

        },function(){

            timmer=setInterval(slider,3000);

        });

        function slider(){

            current++;

            doSlider();

        }

        function doSlider(){

            // 轮播

            //为当前显示的图片对应的圆点添加样式

            dots.removeClass('dots_active').eq(current%size).addClass('dots_active');

            // 图片轮播

            //stop使正在执行的动画立即停止然后立马执行后面的动画

            pics.stop().animate({

                left:-(current+1)*pic_width

            },1000,function(){//执行完毕之后的回调函数

                //如果滑动图片已经是最后一张了，则下一张应该是第一张

                if(current==size){

                    current=0;

                    pics.css('left',-(current+1)*pic_width+'px');//回到第一张

                }else if(current==-1){//如果往前退到了第一张

                    current=size-1;

                    pics.css('left',-(size)*pic_width+'px');//返回到最后一张

                }

            });

        }

        timmer=setInterval(slider,3000);

        // 点击上一张按钮切换图片

        btn_prev.click(function(){

            current--;

            doSlider();

        });

        // 点击下一张按钮切换图片

        btn_next.click(function(){

            current++;

            doSlider();

        });

        // 点击圆点切换图片

        dots.click(function(){

            current=$(this).index();

            doSlider();

        });

    </script>

</body>

</html>