完美jQuery轮播图

最新推荐文章于 2022-07-06 07:16:17 发布

王大人zh

最新推荐文章于 2022-07-06 07:16:17 发布

阅读量221

点赞数 2

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_33967858/article/details/77650608

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>banner</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style-type:none;
        }
        .banner-box{
            width: 100%;/*==控制轮播width==*/
            height: auto;
            margin:0 auto;
            position: relative;
            overflow: hidden;
            background: #adadad;
        }
        .img-box{
            width: 100%;
            min-height: 400px;
        }
        .img-box>li{
            width: 100%;
            height:100%;
            text-align: center;
            line-height: 400px;
            font-size:30px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            color: #fff3a5;
        }
        .img-on{
            display: block !important;
        }
        .active-box{
            position: absolute;
            left: 50%;
            margin-left:-60px;
            bottom:50px;
            display: block;
            width: auto;
        }
        .active-box>li{
            float: left;
            width: 25px;
            height: 25px;
            border-radius: 25px;
            background: gray;
            text-align: center;
            line-height:25px;
            color: #ffffff;
            margin-left:10px;
        }
        .active-box>li.on{
            background: #2b542c;
        }
        .btn{
            position: absolute;
            top:50%;
            margin-top:-25px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height:50px;
            background: #000;
            color: #fff;
        }
        .prev{
            left:20px;
        }
        .next{
            right:20px;
        }
        .btn:hover,
        .active-box>li:hover{
            background: #2b542c;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="banner-box">
    <ul class="img-box">
        <li style="background: #000;" class="img-on">one</li>
        <li style="background: #1b6d85;">two</li>
        <li style="background: #2d2d2d;">there</li>
    </ul>
    <ol class="active-box">
        <li class="on"></li>
        <li></li>
        <li></li>
    </ol>
    <a href="javascript:void(0)" class="btnprev">&lt;</a>
    <a href="javascript:void(0)" class="btn reTime next">&gt;</a>
</div>


<script src="js/jQuery-v1.8.3.js"></script>
<script>
    function move(num,imgItem,status){
        var nowLeft = "100%";
        var nextLeft = "100%";
        if(status){
            nowLeft = "-100%";
        }else{
            nextLeft = "-100%";
        }
        // 在点击之前 下一个要显示的img动画
        $(".img-box>li").eq(num).css({
            "left":nextLeft
        }).addClass("img-on").animate({
            "left":"0"
        });
        // 在点击之前 当前显示的img动画
        $(".img-box>li").eq(imgItem).animate({
            "left":nowLeft
        },function(){$(".img-box>li").eq(imgItem).removeClass("img-on")}).animate({
            "left":"0"
        });
        // active
        $(".active-box>li").eq(num).addClass("on").siblings().removeClass("on");
    }
    // 记录当前显示banner的下标
    function nowActive(oImgLi){
        var number = 0;
        for(var i = 0; i<oImgLi.length; i++){
            if(oImgLi[i].getAttribute('class') ==='img-on'){
                number = i;
            }
        }
        return number;
    }
    function banner(){
        var num = 0;
        var imgItem = 0; // 储存当前显示的img下标
        var oImgLi = $(".img-box>li");
        var time = "";
        $(".next").click(function(){
            if(oImgLi.eq(num).is(":animated")){
                return false;
            }
            imgItem = nowActive(oImgLi);
            num++;
            if(num >= oImgLi.length){
                num = 0;
            }
            move(num,imgItem,true);
        });
        $(".prev").click(function(){
            if(oImgLi.eq(num).is(":animated")){
                return false;
            }
            imgItem = nowActive(oImgLi);
            num--;
            if(num < 0){
                num = oImgLi.length - 1;
            }
            move(num,imgItem,false);
        });
        $(".active-box>li").click(function(){
            var index = $(".active-box>li").index(this);// 当前点击active的下标
            if(oImgLi.eq(num).is(":animated")){
                return false;
            }
            imgItem = nowActive(oImgLi);
            num = index; // 这个是传给全局 num 的下标，以便当前的下标数++ --；
            if(index > imgItem){
                move(index,imgItem,true);
            }
            if(index < imgItem){
                move(index,imgItem,false);
            }
        });
        time = setInterval(function(){$(".next").click()},5000);
        $(".next,.prev,.active-box>li").click(function(){// 每次手动切换banner时，都会重新计时轮播。
            clearInterval(time);
            time = setInterval(function(){$(".next").click()},5000);
        });
    }

    $(function(){

        banner();



    });
</script>
</body>
</html>

王大人zh

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完美jQuery轮播图

html>lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1"> banner *{ margin: 0; padding: 0; } ul
复制链接

扫一扫