jquery实现幻灯片的两种方法

小鱼儿 2022-04-12 12:59 613阅读 0赞

四。使用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"><</a>
    
            <a href="#6" class="arrow_item next" id="arrow_next">></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>