JQuery 前台的轮播图

最新推荐文章于 2022-05-19 15:35:29 发布

小婷子最美

最新推荐文章于 2022-05-19 15:35:29 发布

阅读量220

点赞数 3

JQuery 前台的轮播图

    <!doctype html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>  
            *{  
                margin: 0;  
                padding: 0;  
                list-style: none;  
            }  
            #box{  
                width: 400px;  
                height: 230px;  
                margin: 20px auto;  
                border: 1px solid black;  
                position:relative;  
                overflow:hidden;  
            }  
            #box ul li{  
                float: left;  
                width: 400px;  
                height: 230px;  
            }  
            #box ul li img{  
                width: 100%;  
                height: 100%;  
            }  
            #box ol{  
                position: absolute;  
                left: 0px;  
                bottom:10px;  
            }  
            #box ol li{  
                width: 20px;  
                height: 20px;  
                background:black;  
                color:#fff;  
                float: left;  
                margin-left: 40px;  
                text-align: center;  
                line-height: 20px;  
            }  
            #num ol .bg{  
                background:#fff;  
                color:black;  
            }  
            .left{  
                position: absolute;  
                top:100px;  
                color:#fff;  
                font-size: 50px;  
                font-weight: bolder;  
                left: 10px;  
                opacity: 0.7;  
            }  
            .right{  
                position: absolute;  
                top:100px;  
                color:#fff;  
                right: 10px;  
                font-size: 50px;  
                font-weight: bolder;  
                opacity: 0.7;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="box">  
            <ul>  
                <li><img src="img/1.jpg" alt=""></li>  
                <li><img src="img/2.jpg" alt=""></li>  
                <li><img src="img/3.jpg" alt=""></li>  
                <li><img src="img/4.jpg" alt=""></li>  
                <li><img src="img/5.jpg" alt=""></li>  
                <li><img src="img/6.jpg" alt=""></li>  
            </ul>  
            <div id="num">  
                <ol>  
                    <li>1</li>  
                    <li>2</li>  
                    <li>3</li>  
                    <li>4</li>  
                    <li>5</li>  
                    <li>6</li>  
                </ol>  
            </div>  
            <div class='left'><</div>  
            <div class='right'>></div>  
        </div>  
        <script src="js/jQ.js"></script>  
        <script>  
            $(function(){  
                $("#num>ol li").eq(0).addClass("bg")  
                var timer=null,  
                    index=0,  
                    len=$("#box>ul li").length,  
                    imgW=$("#box>ul li").width();  
                    $("ul").width(imgW*len);  
                function autoplay(){  
                    timer=setInterval(function(){  
                            index++  
                            if(index>len-1){  
                                index=0;  
                                $('ul').width(imgW*(len+1))       
                                //重新设置ul的宽+一个图片的宽  
                                $('ul li').first().clone().appendTo('ul')     
                                //将第一个li复制追加到最后  
                                $("#box>ul").stop().animate({"margin-left":-     imgW*len},1000,function(){  
                                    $('ul li').last().remove()        
                                        //回调函数  将追加的li删除  
                                    $('ul').css('margin-left',0)      
                                })  
                                //ul的位置为0  
                                $('ol>li').eq(0).addClass('bg').siblings().removeClass('bg') //ol下的第一个li添加样式  
                            }else{  
                                show();  
                            }  
                        },2000)  
                }  
                function show(){  
                    $("#box>ul").stop().animate({"margin-left":-imgW*index},1000)  
                    $("#num>ol li").eq(index).addClass("bg").siblings().removeClass("bg")  
                }  
                autoplay();  
                $("#box").hover(function(){  
                    clearInterval(timer)  
                },function(){  
                    autoplay()  
                })  
                $("#num>ol li").on("mouseover",function(){  
                    index=$(this).index();  
                    show()  
                })  
                $(".right").on("click",function(){  
                    index++  
                    if(index>len-1)index=0  
                    show()  
                })  
                $(".left").on("click",function(){  
                    index--  
                    if(index<0)index=len-1  
                    show()  
                })  
            })  
        </script>  
    </body>  
    </html>

作者：高贵的胖子

链接：http://blog.csdn.net/ruziwang/article/details/79060717