jq写轮播图_淡入淡出

原文：https://blog.csdn.net/li3196672779/article/details/73146520

<div class="slide">
                <img src="img/lunbo/xmad_14871298987687_CGYcO.jpg"/>
                <img src="img/lunbo/xmad_14954204614402_ryTxl.jpg"/>
                <img src="img/lunbo/xmad_14962272925733_Uprhk.jpg">
                <img src="img/lunbo/xmad_14971058031374_HWZNE.jpg"/>
                <img src="img/lunbo/xmad_14971843770896_GmXvi.jpg"/>
                <img src="img/lunbo/xmad_14972648805726_rRPJn.jpg"/>
                
                <a href="javascript:;" class="s" id="pre"> < </a>
                <a href="javascript:;" class="s" id="next"> > </a>
                    
                <ul>
                    <li style='background: red; border: 1px solid #B0B0B0;'></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

 

.slide{
           
            width: 1226px;
            height: 460px;
            position: relative;
                 img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 1226px;
                    height: 460px;
                }
            .s{
                width: 50px;
                height: 30px;
                position: absolute;
                color: #B0B0B0;
                font-size: 20px;
                line-height: 30px;
                text-align: center;
                background: rgba(0,0,0,.5);
            }
            #pre{
                left: 234px;
                top: 48%;
            }
            #next{
                top: 48%;
                right: 0;
            }
            ul{
                position: absolute;
                bottom: 10px;
                right: 20px;
                width: 120px;
                height: 20px;
                li{
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: rgba(0,0,0,.5);
                    margin-right: 3px;
                    float: left;
                }
            }
           
        }

 

$(function(){
    var num = 0;
    var timer = setInterval(run,2000);
 
    function run()
    {
        num++;
        if(num == $('.slide img').length)
        {
            num = 0;
        }
 
        $('.slide img').eq(num).fadeIn(500).siblings('img').fadeOut(500);
        $('.slide ul li').eq(num).css({'background':'red','border':'1px solid #b0b0b0'}).siblings().css({'background':'rgba(0,0,0,.5)','border':'none'})
    }
    
    $('.slide').hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(run,2000);
    })
    
    $('#pre').click(function(){
        num--;
        if(num == -1)
        {
            num = $('.slide img').length - 1;
        }
        $('.slide img').eq(num).fadeIn(500).siblings('img').fadeOut(500);
        $('.slide ul li').eq(num).css({'background':'red','border':'1px solid #b0b0b0'}).siblings().css({'background':'rgba(0,0,0,.5)','border':'none'})
    })
    
    $('#next').click(function(){
        num++;
        if(num == $('.slide img').length)
        {
            num = 0;
        }
        $('.slide img').eq(num).fadeIn(500).siblings('img').fadeOut(500);
        $('.slide ul li').eq(num).css({'background':'red','border':'1px solid #b0b0b0'}).siblings().css({'background':'rgba(0,0,0,.5)','border':'none'})
    })
    
    $('.slide ul li').click(function(){
        num = $(this).index();
        $('.slide img').eq(num).fadeIn(500).siblings('img').fadeOut(500);
        $('.slide ul li').eq(num).css({'background':'red','border':'1px solid #b0b0b0'}).siblings().css({'background':'rgba(0,0,0,.5)','border':'none'})
    })
    
})