js案例--轮播图

冷不防 2022-03-20 11:38 200阅读 0赞

css.css

*{padding: 0px;margin: 0px;}
    ul,li{list-style: none;}
    .clear{clear:both;}
    
    .imgs{
       position: relative;
       width: 800px;
       height: 360px;
       margin: 45px auto;
    }
    .imgs img{
       width: 100%;
       height: 360px;
    }
    .imgs .btn{
       position: absolute;
       z-index: 999;
       width: 60px;
       height: 100px;
       background: rgba(0,0,0,0.4);
       color:rgba(255,255,255,0.4);
       top: 130px;
       text-align: center;
       line-height: 100px;
       font-size: 24px;
       transition: all 0.3s;
       opacity: 0;
    }
    .imgs:hover .btn{
       opacity: 1;
    }
    .imgs .next{
       right: 0px;
    }
    .imgs ul{
       overflow: hidden;
       width: 800px;
       height: 360px;
       position: relative;
    }
    .imgs ul li{
       position: absolute;
       top: 0px;
       left: 100%;
       width: 100%;
    }
    .imgs ul li:first-child{
       left: 0px;
    }

js.js

$(document).ready(function()\{

//点击图片向左移动  
    var obj = $('.imgs ul li');//获取li节点对象  
    var setTime = 2000; //自动播放间隔时间  
    var aniTime = 200; //动画时间  
    var index = 0; //当前图片下标  
    $('.imgs .pre').click(function(event) \{  
        scrollLeft(obj,index,aniTime);  
    \});  
    //点击图片向右移动  
    $('.imgs .next').click(function(event) \{  
        //获取当前显示图片的下标  
        for(var i=0;i<obj.length;i++)\{  
            if(parseInt(obj.eq(i).css('left'))==0)\{  
                index=i;  
            \}  
        \}  
        //把当前不显示的图片全部移到右侧  
        obj.css('left','-100%');  
        obj.eq(index).css('left','0px');  
        if(index-1>0)\{  
            obj.eq(index).animate(\{left:'100%'\}, aniTime);  
            obj.eq(index-1).animate(\{left:'0px'\}, aniTime);  
        \}else\{  
            obj.eq(index).animate(\{left:'100%'\}, aniTime);  
            index=obj.length-1;  
            obj.eq(index).animate(\{left:'0px'\}, aniTime);  
        \}  
    \});  
    //自动滚动  
    var setAni = setInterval(scrollLeft,setTime,obj,index,aniTime);  
    $('.imgs').mouseover(function(event) \{  
        clearInterval(setAni);  
    \});  
    $('.imgs').mouseout(function(event) \{  
        setAni = setInterval(scrollLeft,setTime,obj,index,aniTime);  
    \});  
\})  
// 自动滚动  
function scrollLeft(obj,index,aniTime)\{  
    //获取当前显示图片的下标  
    for(var i=0;i<obj.length;i++)\{  
        if(parseInt(obj.eq(i).css('left'))==0)\{  
            index=i;  
        \}  
    \}  
    //把当前不显示的图片全部移到右侧  
    obj.css('left','100%');  
    obj.eq(index).css('left','0px');  
    if(index+1<obj.length)\{  
        obj.eq(index).animate(\{left:'-100%'\}, aniTime);  
        obj.eq(index+1).animate(\{left:'0px'\}, aniTime);  
    \}else\{  
        obj.eq(index).animate(\{left:'-100%'\}, aniTime);  
        index=0;  
        obj.eq(index).animate(\{left:'0px'\}, aniTime);  
    \}  
\}

index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <link rel="stylesheet" href="./css/css.css">  
    <script src="./js/jquery.min.js"></script>  
    <script src="./js/js.js"></script>  
</head>  
<body>  
    <div class="imgs">  
        <div class="pre btn"><-</div>  
        <div class="next btn">-></div>  
        <ul>  
            <li><a href="javascript:"><img src="./img/1.jpg" alt=""></a></li>  
            <li><a href="javascript:"><img src="./img/2.jpg" alt=""></a></li>  
            <li><a href="javascript:"><img src="./img/3.jpg" alt=""></a></li>  
            <li><a href="javascript:"><img src="./img/4.jpg" alt=""></a></li>  
            <li><a href="javascript:"><img src="./img/5.jpg" alt=""></a></li>  
        </ul>  
    </div>  
</body>  
</html>