JQuery banner轮播

最新推荐文章于 2023-01-04 09:18:36 发布

H-哈哈哈哈

最新推荐文章于 2023-01-04 09:18:36 发布

阅读量1.8k

点赞数 2

分类专栏： JQuery

本文链接：https://blog.csdn.net/hocen_jonin/article/details/73770709

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>

H-哈哈哈哈

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery banner轮播

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="jquery-1.8.0.js"&gt;&a
复制链接

扫一扫