首页 > 代码库 > 用jquery实现带左右按键的轮播图

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

2024-11-17 12:47:38   203人阅读

成品如下：

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

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

下面是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实现带左右按键的轮播图


联系
我们