首页 > 其他分享> > 新手写的一个使用jq封装的轮播图可能会有点不足希望大佬给点意见不喜勿喷

新手写的一个使用jq封装的轮播图可能会有点不足希望大佬给点意见不喜勿喷

2020-10-10 15:01:01 作者：互联网

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./banner.css">
</head>
<body>
    <div id="Header">
        <ul class="Header_ul">
            <!-- 这里面的class的值是不能变的 -->
            <li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3547587137,2341154120&fm=26&gp=0.jpg" alt=""></li>
            <li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3816029645,1774218254&fm=15&gp=0.jpg" alt=""></li>
            <li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2763265930,2900269443&fm=15&gp=0.jpg" alt=""></li>
            <li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1564496763,3761315122&fm=15&gp=0.jpg" alt=""></li>
            <li class="item"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2130954828,808697001&fm=15&gp=0.jpg" alt=""></li>
        </ul>
        <!-- 这个id是不可以变的 -->
        <ul id="tabs"></ul> 
    </div>
</body>
<script src="./jquery-1.10.2.min.js"></script>
<script src="./banner2.js"></script>
<script>
    // 这个是需要传的参数
    var RotationParameters = {
        dot : true, // 是否需要小圆点true是需要false是不需要
        Button: true, // 是否需要左右按钮true是需要false是不需要
        automatic: true, // 是否需要自动轮播true是需要false是不需要
        InputTime : 3000, // 多少秒轮播一次(可以更改默认是3000)
    }
</script>
</html>

css代码：

*{padding: 0;margin: 0;list-style: none;}

    #Header{
        width:1370px;
        height: 200px;
        overflow: hidden;
        position: relative;
    }

    #Header .Header_ul{
        width: 100%;
        height:100%;
    }

    #Header .Header_ul .item{
        float: left;
        width: 100%;
        height: 200px;
    }

    #Header .Header_ul .item img{
        width:100%;
        height: 100%;
    }

    #Header .prev{
        position: absolute;
        left:30px;
        top:40%;
        text-align: center;
        font-size: 40px;
        width: 40px;
        height: 60px;
        background-color:rgba(0,0,0,0.2);
        color: #ccc;
        display: none;
    }

    #Header .next{
        position: absolute;
        right:30px;
        top:40%;
        text-align: center;
        font-size: 40px;
        width: 40px;
        height: 60px;
        background-color:rgba(0,0,0,0.2);
        color: #ccc;
        display: none;
    }

    #Header:hover .next{
        display: block;
    }

    #Header:hover .prev{
        display: block;
    }

    #Header #tabs{
        position: absolute;
        bottom: 0;
        left:0;
        z-index:999;
        width: 200px;
        height: 20px;
    }

    #Header #tabs .tab{
        width: 15px;
        height: 15px;
        margin-left: 2px;
        border-radius:50%;
        background: #ccc;
        float: left;
    }

    #Header #tabs .active{
        background: chartreuse;
    }

js代码：

$(document).ready(function(){
    var i = 0;
    var timer;

    $('.item').eq(0).show().siblings('.item').hide();
    showTime();

   // 判断是否创建小圆点
   if(RotationParameters.dot ==  true){
    // 动态创建小圆点
    for(let index = 0; index < $('.item').length; index++){

        $('#tabs').append('<li class="tab"></li>')

    }
    $('.tab').eq(0).addClass('active')
    // 当鼠标划过小圆点的执行事假
    $('.tab').hover(function(){
        // 获取当前i的值, 并显示，同时还要清除定时器
        i = $(this).index();
        Show();
        clearInterval(timer);
    
    },function(){
    
        showTime();
    
    })
    
   }

   // 判断是否创建左右按钮
   if(RotationParameters.Button == true){

        // 虚拟创建左侧按钮
        $('#Header').append('<div class="btn next">></div>')
    
        // 虚拟创建右侧按钮
        $('#Header').append('<div class="btn prev"><</div>')
    
        // 鼠标点击左侧的箭头
        $('.prev').click(function(){
            clearInterval(timer);
            if( i == 0){
                i = 0; // 注意此时i的值
            }
            i--;
            Show();
            showTime();
        })
    
        // 执行鼠标点击右侧的箭头
        $('.next').click(function(){
            clearInterval(timer);
            if(i == 4){
                i = -1; // 注意i的值
            }
            i++;
            Show();
            showTime();
        });

   }


    // 用来执行定时器的
    function showTime(){
        timer = setInterval(() => {
            Show();  // 在这里执行
            if(RotationParameters.automatic == true){
                i++; // 每一次执行i都加1
                if(i==$('.item').length){ // 判断当i的长度等于li的长度就让i等于0
                    i=0;
                }
             }
        },RotationParameters.InputTime || 3000);
    }

    // 创建一个show函数
    function Show(){
        // 执行图片轮播
        $('.item').eq(i).fadeIn(300).siblings('.item').fadeOut(300);
        
        // 执行当点击小按钮跳到对应的图片

        $('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');
    }
})

可能会有点坑希望不要介意

标签：function,轮播,item,jq,height,Header,不喜,true,width
来源： https://www.cnblogs.com/fuxiaoyon/p/13792682.html