图片轮播

最新推荐文章于 2025-05-22 13:28:11 发布

转载最新推荐文章于 2025-05-22 13:28:11 发布 · 243 阅读

文章标签：

#特效

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一款基于jQuery的图片轮播插件实现过程，包括HTML结构搭建、CSS样式设置及JavaScript交互逻辑。该插件支持图片左右切换，具备数字指示器与图片底部背景层，同时提供图片信息展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
先看下效果图，图片可以左右切换，数字保留与否取决于自己的需求。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播 jq(左右切换)</title>
<style type="text/css">
    body,div,ul,li,a,img{margin: 0;padding: 0;}
    ul,li{list-style: none;}
    a{text-decoration: none;}

    #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
    #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
    .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
    .imgList li{float:left;display: inline;}
    #prev,
    #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
    #prev{left: 10px;}
    #next{right: 10px;}
    #prev:hover,
    #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
    .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
    .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
    .infoList li{display: none;}
    .infoList .infoOn{display: inline;color: white;}
    .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
    .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
    .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
    <div id="wrapper"><!-- 最外层部分 -->
        <div id="banner"><!-- 轮播部分 -->
            <ul class="imgList"><!-- 图片部分 -->
                <li><a href="#"><img src="img/Sd.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
            <li><a href="#"><img src="img/lm.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
            <li><a href="#"><img src="img/Dh.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
            <li><a href="#"><img src="img/sjszyydjl.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
            <li><a href="#"><img src="img/zghhr.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
            </ul>
            <img src="img/zuo.png" width="20px" height="40px" id="prev">
            <img src="img/you.png" width="20px" height="40px" id="next">
            <div class="bg"></div> <!-- 图片底部背景层部分-->
            <ul class="infoList"><!-- 图片左下角文字信息部分 -->
                <li class="infoOn">素人特工</li>
                <li>龙猫</li>
                <li>大黄蜂</li>
                <li>世界上最遥远的距离</li>
                <li>中国合伙人2</li>
            </ul>
            <ul class="indexList"><!-- 图片右下角序号部分 -->
                <li class="indexOn">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript">
    var curIndex = 0,  //当前index
            imgLen = $(".imgList li").length;  //图片总数
          // 定时器自动变换2.5秒每次
    var autoChange = setInterval(function(){ 
        if(curIndex <  imgLen-1){ 
            curIndex ++; 
        }else{ 
            curIndex = 0;
        }
        //调用变换处理函数
        changeTo(curIndex);  
    },2500);

     //左箭头滑入滑出事件处理
    $("#prev").hover(function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
    },function(){ 
        //滑出则重置定时器
        autoChangeAgain();
    });
    //左箭头点击处理
    $("#prev").click(function(){ 
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
    });
    
    //右箭头滑入滑出事件处理
   $("#next").hover(function(){ 
        //滑入清除定时器
        clearInterval(autoChange);
    },function(){ 
        //滑出则重置定时器
        autoChangeAgain();
    });
    //右箭头点击处理
    $("#next").click(function(){ 
        curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
        changeTo(curIndex);
    });

    //对右下角按钮index进行事件绑定处理等
    $(".indexList").find("li").each(function(item){ 
        $(this).hover(function(){ 
            clearInterval(autoChange);
            changeTo(item);
            curIndex = item;
        },function(){ 
            autoChangeAgain();
        });
    });

    //清除定时器时候的重置定时器--封装
    function autoChangeAgain(){ 
            autoChange = setInterval(function(){ 
            if(curIndex < imgLen-1){ 
                curIndex ++;
            }else{ 
                curIndex = 0;
            }
        //调用变换处理函数
            changeTo(curIndex);  
        },2500);
        }

    function changeTo(num){ 
        var goLeft = num *  400;
        $(".imgList").animate({left: "-" + goLeft + "px"},500);
        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
    }
    </script>
</body>
</html>