通过jquery的animate实现可以左右点击的轮播

来源：互联网发布：泰安网络推广编辑：程序博客网时间：2024/06/03 21:43

html代码：

<div id="all">    <ul class="banner">        <li><img src="img/pic1.jpg"/></li>        <li><img src="img/pic2.jpg"/></li>        <li><img src="img/pic3.jpg"/></li>    </ul>    <span class="btn-prev">></span>    <span class="btn-next"><</span></div>

css代码：

            *{                margin: 0;                padding: 0;            }            #all{                width: 520px;                height: 280px;                overflow: hidden;                position: relative;            }            .banner{                list-style:none;                width: 1560px;                height: 280px;            }            .banner>li{                width: 520px;                float: left;            }            #all span{                display: block;                width: 30px;                height: 40px;                cursor: pointer;                color: #fff;                font-size: 30px;                text-align: center;                line-height: 40px;                background: rgba(0,0,0,.5);                position: absolute;                top: 50%;                margin-top: -15px;            }            #all span.btn-prev{                right: 0;            }

js代码：

$(function(){            var i;            function move(){                $(".banner").animate({"margin-left":"-520px"},function(){                      $(".banner").css("margin-left","0px");                    $(".banner").append($(".banner li").eq(0));                })            }            i=setInterval(move,2000);            /*鼠标悬浮事件*/            $("#all").hover(function(){                clearInterval(i);            },            function(){                i=setInterval(move,2000);            });            /*按钮 下一个*/            $(".btn-next").on("click",function(){                $(".banner").animate({"margin-left":"-520px"},function(){                    $(".banner").append($("li").eq(0));                    $(".banner").css("margin-left","0px");                })            })            /*按钮上一个*/            $(".btn-prev").on("click",function(){                $(".banner").prepend($(".banner li:last"));                $(".banner").css("margin-left","-520px");                $(".banner").animate({"margin-left":"0px"},function(){                 })            })        })

阅读全文

0 0