jquery 焦点轮转背景图片消失, css 在作怪！_jq在fadein还没完成的时候调用fadeout导致图片消失-优快云博客

本文链接：https://blog.youkuaiyun.com/dong123dddd/article/details/7890379

本文介绍了一种使用CSS实现幻灯片布局的方法，并通过jQuery控制幻灯片的切换效果。文章详细解释了如何设置绝对定位以确保幻灯片正确显示，并提供了一段jQuery代码来自动播放幻灯片。

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

先贴上代码然后再指明原因：（注意改代码以及修改正确）

/* banner */
#banner{ width:100%; height:306px;float:left;}
#banner .showimg{width:100%; height:300px;float:left;position:relative;}
#banner .showimg .pic{width:100%; height:300px; margin:0px auto; float:left; overflow:hidden; position:absolute; }

/* 上一行 position:absolute; 之前没有，为修改后的，错误原因也就在这里 */
#banner .showimg .pic li{list-style:none; text-align:center; width: 990px;height:300px; overflow: hidden; margin:0px auto;  position:relative;}
#banner .showimg .pic li img{ margin: 0px auto; width: 990px; height: 300px; }

#banner .showimg .num{ height:10px; width:125px; display:block; top:270px; left:445px;position:absolute;}
#banner .showimg .num li{ width:10px; height:10px; display:block; float:left; position:relative; list-style:none; background:url(images/scroll_bg.gif) no-repeat 0px 0px; margin-left:15px; overflow:hidden;}
#banner .showimg .num .on{background:url(images/scroll_bg.gif) no-repeat 0px -20px;}
#banner .bannerbg{width:100%; height:6px; float:left; background:url(images/banner_btbg.png) no-repeat 0px 0px;}

说明一下上面的页面关系：见下面的页面代码，很清晰明了的。现在明白了，两个ul 都要用 position:absolute;

<div id="banner">
            <div class="showimg">
                <ul class="pic">
                    <li><img src="photo/1.jpg" alt="111.jpg" /></li>
                    <li><img src="photo/2.jpg" alt="222.jpg" /></li>
                    <li><img src="photo/3.jpg" alt="333.jpg" /></li>
                </ul>
                <ul class="num">
                    <li class="on"></li>
                    <li class=""></li>
                    <li class=""></li>
                </ul>
            </div>
            <div class="bannerbg"></div>
        </div>

顺便贴上 jQuery 代码共和我一样的菜鸟。共享参考。

用之前别忘了引用jquery 类库。

<script type="text/javascript">
         $(function () {
             $(".pic li").fadeOut(0).eq(0).fadeIn(0); //先隐藏所有图片，再将对象移到第一张图片，使之淡入
             var len = $(".num > li").length;
             var index = 0;
             var adTimer;
             $(".num li").mouseover(function () {
                 index = $(".num li").index(this);
                 showImg(index);
             }).eq(0).mouseover();
             $('.showimg').hover(function () {
                 clearInterval(adTimer);
             }, function () {
                 adTimer = setInterval(function () {//setInterval是每隔一段时间循环一个动作
                     if ($(".pic li").length > (index + 1)) {//判断是否执行到最后一张图片
                         $(".pic li").eq(index).fadeOut(200).next("li").fadeIn(300); //索引值为i的图片淡出，它的下一张图片淡入
                         $(".num li").eq(index).removeClass("on").next("li").addClass("on"); //图片展示
                         index++; //使索引值增加1，下一次执行动作的图片索引值为i+1，
                     }
                     else {//如果为最后一张图片，将执行下面的代码
                         $(".pic li").eq(index).fadeOut(200).siblings("li").eq(0).fadeIn(300); //索引值为i的图片淡出，这里不同于上面，是第一张图片淡入
                         $(".num li").eq(index).removeClass("on").siblings("li").eq(0).addClass("on"); // 图片展示
                         index = 0; //将索引值变为0，回到初始状态
                     }
                 }, 8000); //8000ms执行一次淡入淡出的动作
             }).trigger("mouseleave");
         });
         // 通过控制top ，来显示不同的幻灯片
         function showImg(index) {
             $(".pic li").fadeOut(200).eq(index).fadeIn(300); //所指图片淡入
             $(".num li").removeClass("on").eq(index).addClass("on"); //图片展示

         }
     </script>