图片轮换其实就这几行代码title: 图片轮换其实就这几行代码 date: 2014-04-16 13:22:58 ta

title: 图片轮换其实就这几行代码 date: 2014-04-16 13:22:58 tags: js category: javascript

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片轮换</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $(function(){


        var $this=$(".wyj");
        var $li=$this.find(".uls li");
        $li.eq(0).show().siblings().hide();
        var index=$this.find(".uls li:visible").index();
        var lenght=$li.length;
        //alert(lenght)

        //alert(index)
        //alert($("#ss").index())

        $("#left").click(function(e) {
            //alert(index);
            index=index-1;
            if(index<=0){
                index=lenght-1;
            }
            $li.eq(index).show().siblings().hide();
        });
        $("#right").click(function(e) {
            righ();
        });

        var righ=function(){
            index=index+1;
            if(parseInt(index)>lenght-1){
                index=0;
            }
            $li.eq(index).show().siblings().hide();}

        timer=setInterval(function(){
            righ();
        },500);
        $("#left,#right").hover(function(e) {
            clearInterval(timer);
        },function(){
            timer=setInterval(function(){
                righ();
            },500);})
    })


</script>
<style>
    *{ margin:0px; padding:0px;}
    ul li{ list-style:none;}
    .wyj{  overflow: hidden; position: relative; height:300px; width:800px; height:300px; margin:0 auto; margin-top:100PX; }
    /*.uls li{ display:none;}*/
</style>

<body>

<div class="wyj">
    <ul class="uls">
        <li ><img src="images/banner_01.jpg"></li>
        <li ><img src="images/banner_02.jpg"></li>
        <li><img src="images/banner_03.jpg"></li>
        <li ><img src="images/banner_04.jpg"></li>
    </ul>
    <img src="images/rotaleft.gif" width="26" height="99" id="left" style="position:absolute; left:3px; top:110px; cursor:pointer;">
    <img src="images/rotaright.gif" width="26" height="99" id="right" style="position:absolute; right:3px; top:110px; cursor:pointer;">
</div>

</body>
</html>