JQuery banner轮播

来源：互联网发布：钢雨篷计算软件编辑：程序博客网时间：2024/05/20 02:28

效果图：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="jquery-1.8.0.js"></script>    <style>        *{ margin: 0; padding: 0;}        .banner{width: 1080px; height: 432px; position: relative; overflow: hidden; margin: 50px auto;}        .box{ width: 4320px; height: 432px; }        .box div{ float: left;}        .but div{ position: absolute; top: 200px; cursor: pointer; padding: 5px 15px; font-size: 25px; background-color: rgba(102,215,255,0.5); color: white; z-index: 2;}        .next{ right: 50px;}        .prev{ left: 50px;}        .Dots{ position: absolute; bottom: 30px; right: 50px;}        .Dots a{ padding: 1px 9px; background-color: rgba(102,215,255,0.7); margin-left: 8px; border-radius: 50%;}        .Dots a.active{ background-color: white;}    </style></head><body>    <div class="banner">        <!--img-->        <div class="box">            <div><img src="img/1.jpg"></div>            <div><img src="img/2.jpg"></div>            <div><img src="img/1.jpg"></div>            <div><img src="img/2.jpg"></div>        </div>        <!--Dots-->        <div class="Dots"></div>        <!--next-prev-->        <div class="but">            <div class="prev">Prev</div>            <div class="next">Next</div>        </div>    </div><script>    var index = 0;    var Numn = "";    //获取图片的个数    var imgNum = $(".box").find('img').length;    //获取每张图片的宽度    var imgWidth = $(".box").find('img').width();    //计算所有图片的宽度    var AllImgWidth = imgNum*imgWidth;//        alert(AllImgWidth);    function selectimg(index) {        $(".box").animate({"margin-left":"-" + imgWidth*index + "px"},600);        $(".Dots a").eq(index).addClass("active").siblings('a').removeClass('active');    }    //点击prev的按钮    $(".but .prev").click(function(){       index -= 1;        if(index < 0){            index = imgNum - 1;        }        selectimg(index);    });    //点击next按钮    $(".but .next").click(function(){       index += 1;        if( index > 3){            index = 0;        }        selectimg(index);    });    //鼠标放上去暂停轮播    $('.banner').hover(function(){        clearInterval(p);    },function () {        pic();    });    //自动轮播    // 1、轮播切换图片函数，不断的改变index的值    // 2、然后乘以宽度（总宽度）    function pic(){        p = setInterval(function(){            index++;            if(index >= imgNum){                index = 0;            }            selectimg(index);        },5000);    }    //获取按钮的个数；向页面添加按钮    for(var icon = 0; icon < imgNum; icon++){        Numn +="<a href='javascript:;'></a>";    }    $('.Dots').html(Numn);    $('.Dots a').eq(0).addClass('active');    //点击.Dots a切换到对应的图    $(".Dots a").each(function(index){        $(this).click(function(){            $('.box').animate({'margin-left':'-' + imgWidth*index + 'px'},600);            $(".Dots a").eq(index).addClass("active").siblings("a").removeClass("active");        })    });    pic();</script></body></html>

阅读全文

1 0