在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ jquery為什么不能實(shí)現(xiàn)圖片輪播？

jquery為什么不能實(shí)現(xiàn)圖片輪播？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.picture {
    position: relative;
    left: 200px;
    width: 960px;
    height: 500px;
}
.Plist {
    position: absolute;
    z-index: 10;
    bottom: -10px;
}
.picturelist {
    display: inline-block;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.24);
    width: 20px;
    height: 20px;
    margin: 0 6px;
    position: relative;
    bottom: 40px;
    left: 360px;
    cursor: pointer;
}
.selected{
    background-color: rgba(255, 255, 255, 0.44);
}
.photo {
    position: absolute;
    display: none;
    -webkit-user-drag: none;
}
</style>
</head>
<body>
<div class="picture">
    <a href="#"><img class="photo" src="image/picture1.jpg" style="display: inline;">        </a>
    <a href="#"><img class="photo" src="image/picture2.jpg"></a>
    <a href="#"><img class="photo" src="image/picture3.jpg"></a>
    <a href="#"><img class="photo" src="image/picture4.jpg"></a>
    <a href="#"><img class="photo" src="image/picture5.jpg"></a>
    <a href="#"><img class="photo" src="image/picture6.jpg"></a>
    <ul class="Plist">
      <li class="picturelist selected"></li>
      <li class="picturelist"></li>
      <li class="picturelist"></li>
      <li class="picturelist"></li>
      <li class="picturelist"></li>
      <li class="picturelist"></li>
    </ul>
</div>
<script src="script/jquery.js"></script>
<script>
    $(function(){
    var index = 0;
    var t = setInterval(function play() {
        index++;
        if (index > 5) {
            index = 0;
        }
        $(".photo").eq(index).fadeIn(1200).siblings().fadeOut(1200,function(){console.log(index);});
        $(".picturelist").eq(index).addClass("selected").siblings().removeClass("selected");    
    }, 3000);

});
</script>
</body>
</html>

求助各位為什么fadeout里面沒(méi)有輸出實(shí)現(xiàn)不了這個(gè)效果？

回答
編輯回答
久舊酒

$(".photo a").eq(index).fadeIn(1200).siblings().fadeOut(1200,function(){console.log(index);});

    $(".Plist .picturelist").eq(index).addClass("selected").siblings().removeClass("selected");  然后把html的結(jié)構(gòu)修改一下。
2018年6月27日 07:31
編輯回答
裸橙

<script>

$(function(){
var index = 0;
var t = setInterval(function() {
     $(".photo").eq(index).fadeOut(1200,function(){
     index++;
     if (index > 5) {
            index = 0;
     }

       $(".photo").eq(index).fadeIn(1200);
    });

    $(".picturelist").eq(index).addClass("selected").siblings().removeClass("selected");    
}, 3000);

});
</script> 可以試試看這樣寫(xiě)

2017年3月17日 22:41
編輯回答
貓小柒

你控制顯示隱藏的應(yīng)該是a標(biāo)簽， $(".photo").siblings()是找不到的，因?yàn)閕mg是沒(méi)有兄弟標(biāo)簽的，只有a標(biāo)簽有，把.photo的 display: none;去掉，style="display: inline;"加在a上

 $(".picture a").eq(index).fadeIn(1200).siblings().fadeOut(1200,function(){console.log(index);})
2018年9月19日 20:28
編輯回答
毀與悔

沒(méi)有初始化。

2018年6月15日 23:49