JQuery和html+css實現帶小圓點和左右按鈕的輪播圖

標籤：app   ==   lock   左右   cti   osi   --   point   end   

是的！你沒看錯！還是輪播圖。這次的JQuery的喲！！

CSS代碼：

/*輪播圖 左右按鈕 小白點*/#second_div{margin-top: 160px;}.img_box{overflow: hidden;width:100%;height:420px;border:1px solid;position:relative;}.img_box img{width:100%;position:absolute;}.ul5{list-style: none;position:absolute;left:580px;top:565px;}.ul5 li{float:left;margin-left:20px;width:40px;height:5px;border:0px;background:lawngreen;}.d1,.d2{width:50px;height:60px;background-color: rgba(10,10,10,0.5);text-align: center;font-size:26px;font-weight: 800px;line-height:60px;cursor: pointer;}.d1{position:absolute;top:373px;left:25px;}.d2{position:absolute;top:373px;left:1445px;}

　　HTML代碼：

<!-- 輪播圖 --><div id="second_div"><div class="img_box"><img src="img/ban1.jpg"><img src="img/ban2.jpg"><img src="img/ban3.jpg"><img src="img/ban4.png"> </div><ul class="ul5"><li></li><li></li><li></li><li></li></ul><div class="d1"><</div><div class="d2">></div></div>

　　js代碼：

    <script type="text/javascript">        $(document).ready(function(){//搜尋按鈕    $("#ss").click(function(){        var new_li = $("<li>"+ $("#skuang").val() +"</li>");        $("#d1 ul").append(new_li);        $("#d1").hide();        $("#skuang").val("");        })        $("#skuang").focus(function(){            $("#d1").css("display","block");        });                $("#skuang").blur();        $("#qingch").click(function(){            $("#d1 li:gt(0)").remove();            $("#d1").hide();                    });//輪播圖        var img=$(".img_box img");        var li=$(".ul5 li");        var divW=$(".img_box").width();        var len=$(".img_box img").length;        img.css("left",divW);        img.eq(0).css("left",0);        li.eq(0).css("background","red");        var index=0;        var next=0;        function show(){            next++;            if(next==len){                next=0;            }            img.eq(next).css("left",divW);            img.eq(index).animate({"left":-divW});            img.eq(next).animate({"left":0});            li.eq(next).css("background","red");            li.eq(index).css("background","lawngreen");            index=next;        }        t=setInterval(show,2000);        function show1(){            next--;            if(next==-1){                next=len-1;            }            img.eq(next).css("left",-divW);            img.eq(index).animate({"left":divW});            img.eq(next).animate({"left":0});            li.eq(next).css("background","red");            li.eq(index).css("background","lawngreen");            index=next;                            }        img.hover(function(){            clearInterval(t);                            },function(){            t=setInterval(show,2000);        })        //左右按鈕        $(".d2").mousedown(function(){            clearInterval(t);            show();        })        $(".d2").mousedown(function(){                    t=setInterval(show,2000);        })            $(".d1").mousedown(function(){            clearInterval(t);                    show1();        })        $(".d1").mousedown(function(){            t=setInterval(show,2000);        })        //小白點 點擊        li.mousedown(function(){            num=$(this).index();            if(num==next){                return;            }else if(num<next){                clearInterval(t);                img.eq(num).css("left",-divW);                    img.eq(index).animate({"left":divW});                    img.eq(num).animate({"left":0});                    li.eq(num).css("background","red");                    li.eq(index).css("background","lawngreen");                    index=num;                    next=num;            }else if(num>next){                clearInterval(t);                    img.eq(num).css("left",divW);                    img.eq(index).animate({"left":-divW});                    img.eq(num).animate({"left":0});                    li.eq(num).css("background","red");                    li.eq(index).css("background","lawngreen");                    index=num;                    next=num;            }    })                li.mouseup(function(){                    t=setInterval(show,2000);            })        })    </script>

就是這樣的！你們懂了嗎？？？？

JQuery和html+css實現帶小圓點和左右按鈕的輪播圖