用jquery实现带左右按键的轮播图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用jquery实现带左右按键的轮播图相关的知识,希望对你有一定的参考价值。

成品如下:

技术分享技术分享技术分享技术分享

简单来说就是点击“右”按钮时,转换到右边的下一幅图片,同时上面的小方块颜色也跟着改变,如果已经是最后一幅图片,再点击“右”,则转换到第一幅图片,是直接向左移找到第一幅图的,明天再做一下无缝切换的效果,即最后一幅图放完了以后第一幅图从右滑进来跟上。点击“左”同理。

下面是html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="test_ch4.css" id="herf" />
        <script type="text/javascript" src="jquery-3.2.1.js"></script>
        <title>test_ch4</title>
        <meta charset="utf-8"/>      
    </head>
    <body>
        <div id="wrap">
            
            <div id="head" >
                <div id="head_l">
                    <div id="head_l_w">
                    <span  class="white blue"  ></span>
                    <span  class="white"></span>
                    <span  class="white"></span>
                    <span  class="white"></span> 
                    </div>
                    <span id="left"></span><span id="right"></span>
                </div>              
            </div>
            <div id="video">
            <div id="inner">    
                    <ul>
                        <li><a href="">
                                <img src="01.jpg" alt="" /></a>
                                <p>海贼王</p>
                                <span>播放:28,276</span></li>
                        <li><a href="">
                                <img src="01.jpg" alt="" /></a>
                                <p>海贼王</p>
                                <span>播放:28,276</span></li>
                        <li><a href="">
                                <img src="01.jpg" alt="" /></a>
                                <p>海贼王</p>
                                <span>播放:28,276</span></li>
                        <li><a href="">
                                <img src="01.jpg" alt="" /></a>
                                <p>海贼王</p>
                                <span>播放:28,276</span></li>
                        <li><a href="">
                                <img src="02.jpg" alt="" /></a>
                                <p>哆啦A梦</p>
                                <span>播放:33,326</span></li>
                        <li><a href="">
                                <img src="02.jpg" alt="" /></a>
                                <p>哆啦A梦</p>
                                <span>播放:33,326</span></li>
                        <li><a href="">
                                <img src="02.jpg" alt="" /></a>
                                <p>哆啦A梦</p>
                                <span>播放:33,326</span></li>
                        <li><a href="">
                                <img src="02.jpg" alt="" /></a>
                                <p>哆啦A梦</p>
                                <span>播放:33,326</span></li>
                        <li><a href="">
                                <img src="03.jpg" alt="" /></a>
                                <p>火影忍者</p>
                                <span>播放:28,276</span></li>
                        <li><a href="">
                                <img src="03.jpg" alt="" /></a>
                                <p>火影忍者</p>
                                <span>播放:28,276</span></li>
                        <li><a href="">
                                <img src="03.jpg" alt="" /></a>
                                <p>火影忍者</p>
                                <span>播放:28,276</span></li>
                        <li><a href="">
                                <img src="03.jpg" alt="" /></a>
                                <p>火影忍者</p>
                                <span>播放:28,276</span></li>
                        <li><a href="">
                                <img src="04.jpg" alt="" /></a>
                                <p>龙珠</p>
                                <span>播放:33,326</span></li>
                        <li><a href="">
                                <img src="04.jpg" alt="" /></a>
                                <p>龙珠</p>
                                <span>播放:33,326</span></li>
                        <li><a href="">
                                <img src="04.jpg" alt="" /></a>
                                <p>龙珠</p>
                                <span>播放:33,326</span></li>
                        <li><a href="">
                                <img src="04.jpg" alt="" /></a>
                                <p>龙珠</p>
                                <span>播放:33,326</span></li>
                    </ul>             
            </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
    $(document).ready(function(){
        var page = 1;
        var v_width = $("#video").width() + 20;
        $("#right").click(function(e){  
        if(!$("#video").is(":animated")){
            if(page % 4 == 0)
            {         
                $("#video").animate({left:"0px"},1000); 
                page = 1;
            }
            else {
                $("#video").animate({left:-=+v_width},1000);
                page++;
            }
        }
            $("#head_l_w span").attr("class","white");
            $("span.white").eq(page%4-1).attr("class","blue");
            
        });
        $("#left").click(function(){
        if(!$("#video").is(":animated")){
            if(page % 4 == 1)
            {         
                $("#video").animate({left:-=+v_width*3},1000); 
                page = 4;
            }
            else {
                $("#video").animate({left:+=+v_width},1000);
                page--;
            }
            $("#head_l_w span").attr("class","white");
            $("span.white").eq(page%4-1).attr("class","blue");
        }
        });
        });
    </script>
</html>

css代码:

ul {list-style:none; padding: 0;}
ul li {
    display:inline-block;
    margin: 10px 2px 0;
    padding: 8px;
}
ul li a {
    display: block;
    height: 80px;
    width: 128px;
}
ul li img{
   height: 80px;
   width: 128px;
}
a { text-decoration:none;}
p{
   color: blue;
   font-size: 12px;
   margin: 0;
   padding:0;
}
span {
    font-size: 12px;
    color: gray;
}
#wrap {
    width: 595px;
    overflow: hidden;
    border: 1px solid gray;
}
#video {
    position: relative;
    left: 0px;
    height: 160px;
    width: 592px;
}
#inner {
    width: 2500px;
    height: 170px;
    margin-bottom: 10px;
}
#head {
    background: #fff;
}

#head_l span {
    display: inline-block;
}

#right,#left{
    color: black;
    font-size: 14px;
    margin-right: 20px;
    cursor: pointer;
}
.white {
    width: 5px;
    height: 5px;
    background-color: white;
    margin-right:10px;
    border: 1px solid gray;
}
.blue{
    width: 5px;
    height: 5px;
    background-color: blue;
    margin-right:10px;
    border: 1px solid gray;
}

在程序中,用page来记录是第几屏在展示,然后选择相应的小方块让它变蓝,并且计算为了移到下一屏应该怎样进行相对定位。在布局里还有一个小技巧,就是包裹内容区的div要比外层div长,这样内容(总共4屏)在里层排成一排,但外层只能显示出1屏。

 

以上是关于用jquery实现带左右按键的轮播图的主要内容,如果未能解决你的问题,请参考以下文章

手机的轮播图可以用jquery来做吗

HTML轮播图片代码,带解释

用html+css怎么写出带按钮的轮播图?

用jQuery写的轮播图

jQuery实现简单的轮播图

js实现左右切换轮播图思路