简单明了的jquery 图片轮播效果

最新推荐文章于 2025-06-04 11:48:07 发布

csdn00520

最新推荐文章于 2025-06-04 11:48:07 发布

阅读量110

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/csdn00520/article/details/95350977

版权

前端专栏收录该内容

4 篇文章

订阅专栏

博客介绍了使用jQuery实现图片播播效果，该方法简单明了，能有效实现图片的动态展示，在前端页面中可增强用户体验，属于前端开发领域的实用技巧。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       #dv{
           width: 223px;
           height: 220px;
           overflow: hidden; /*隐藏所有*/
           border: 1px solid orange;  /*边框*/
           box-shadow: 5px 5px 5px gray;/*阴影*/
           border-radius:10px ;/*圆角*/
       }
       #dv .im li{
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="dv">
    <ul class="im">
        <li><img src="images/dianzi01.jpg" alt=""/></li>
        <li><img src="images/dianzi02.jpg" alt=""/></li>
        <li><img src="images/dianzi03.jpg" alt=""/></li>
        <li><img src="images/dianzi04.jpg" alt=""/></li>
        <li><img src="images/dianzi05.jpg" alt=""/></li>
        <li><img src="images/dianzi06.jpg" alt=""/></li>
    </ul>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(document).ready(function () {
          var len = $('.im li').length;//获取长度
         //  alert(len);
        var index=0;//第一个索引
         setInterval(function () {
              index++;
              if(index==len)  //如果最后一张
              {
                index=0;
              }
             $('.im li').eq(index).css("display","block");//显示当前的
             $('.im li').eq(index).siblings().css("display","none");//隐藏其它所有的
         },1500);
    });
</script>
</html>