jquery遍历轮播图

2023年8月19日 325次阅读 来源: 数据结构之图 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历轮播图</title>
    <style>
        *{padding:0;margin:0;}
        .focus{
            position:relative;
            width:730px;
            height:454px;
            margin:50px auto;
            overflow:hidden;
        }
        .page-con{
            position:absolute;
            z-index:2;
            text-align:center;
            bottom:10px;
            width:100%;
            font-size:0;
        }
        .page-con li{
            font-size:12px;
            display:inline-block;
            width:18px;
            height:18px;
            line-height:18px;
            border-radius:50%;
            margin:0 2px;
            color:#fff;
            background:#3e3e3e;
            cursor:pointer;
        }
        .focus a{display:none;}
    </style>
</head>
<body>
<div class="focus">
    <div class="img-box">
        <a href=""><img src="img/focus.jpg"/></a>
        <a href=""><img src="img/focus1.jpg"/></a>
        <a href=""><img src="img/focus2.jpg"/></a>
        <a href=""><img src="img/focus3.jpg"/></a>
        <a href=""><img src="img/focus4.jpg"/></a>
    </div>
    <ul class="page-con">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script>
    var aimg=$(".img-box a");
    var ali=$(".page-con li");
    var index=0;
    function lunbo() {
        index++;
        if(index>=aimg.length){
            index=0
        }
        show();
    }
    function show() {
        aimg.eq(index).stop(true,true).fadeIn(2000)
            .siblings().stop(true,true).fadeOut(2000)
        ali.eq(index).css("background","red")
            .siblings().css("background","")
    }
    var time=setInterval(lunbo,2000)
    //浮动停止轮播
    $(".focus").hover(function () {
        clearInterval(time)
    },function () {
       time=setInterval(lunbo,2000)
    })
    //页面功能
    ali.bind({
        mouseover:function () {
           clearInterval(time) ;
           index=ali.index($(this))
            show()
        },
        mouseout:function () {
            
        }
    })

    //上一页>下一页功能
    $("#con1").click(function () {
        clearInterval(time);
        index--;
        if(index<0){
            index=oimg.length-1;
        }
        show();
        time=setInterval(fn,1000)
    });
    $("#con2").click(function () {
        index++;
        clearInterval(time);
        if(index>=oimg.length){
            index=0
        }
        show();
        time=setInterval(fn,1000)
    })
</script>
</body>
</html>
    原文作者：数据结构之图
    原文地址: https://blog.csdn.net/xcj888it/article/details/81165442
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞