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

成品如下:

1149408-20170804210749053-1993611833.png1149408-20170804210904662-606103418.png1149408-20170804210946225-135338641.png1149408-20170804211111881-1742109259.png

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

下面是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屏。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值