jquery圖像滑塊修改

我試圖修改下面的一段代碼，以使淡出函數不會發生。我希望下一張圖像能夠淡入現有圖像中。任何人都可以幫助，因爲我已經嘗試刪除淡出功能，它不起作用。jquery圖像滑塊修改

$(function() { 

    var changeTime = 5000; 
    var speed = 1500; 

    var slider = $("#imageSlide"), 
     listItems = slider.children('li'), 
     listLen = listItems.length, 
     i = 0, 

     changeList = function() { 

      listItems.eq(i).fadeOut(speed, function() { 
       i += 1; 
       if (i === listLen) { 
        i = 0; 
       } 
       listItems.eq(i).fadeIn(speed); 
      }); 

     }; 

    listItems.not(':first').hide(); 
    setInterval(changeList, changeTime); 

});

CSS我是：

#imageSlide { 
margin:0; 
padding:0; 
} 
ul#imageSlide { 
list-style:none; 
list-style-image:none; 
margin-left:0px; 
} 
li#imageSlide { 
position:absolute; 
top:0; 
left:0; 
}

HTML標記是：

<ul id="imageSlide"> 
<li><img alt="" src="/Images/image1.jpg" /></li> 
<li><img alt="" src="/Images/image2.jpg" /></li> 
<li><img alt="" src="/Images/image3.jpg" /></li> 
<li><img alt="" src="/Images/image4.jpg" /></li> 
<li><img alt="" src="/Images/image5.jpg" /></li>

來源

2013-10-16 jolen

你有沒有試圖刪除fadeOut這樣

$(function() { 

var changeTime = 5000; 
var speed = 1500; 

var slider = $("#imageSlide"), 
    listItems = slider.children('li'), 
    listLen = listItems.length, 
    i = 0, 

    changeList = function() { 
     i += 1; 
     if (i === listLen) { 
      i = 0; 
     } 
     listItems.eq(i).fadeIn(speed); 
    }; 

listItems.not(':first').hide(); 
setInterval(changeList, changeTime); 

});

來源

2013-10-16 10:12:41 matewka

是 - 圖像淡入每個圖像的下方，而比在上面。 – jolen

然後問題連接到CSS。這完全是另一個問題。但是如果你用一些HTML標記和CSS更新你的問題，我會爲你解決它。 – matewka

謝謝 - 對不起，我是jquery的新手 – jolen

你的代碼工作中有你在你的頁面包含任何jquery version

見工作Demo1和Demo2和Demo3

而且Demo4無淡出

來源

2013-10-16 10:21:04

謝謝，但我需要fadeIN發生在它自己的，而不是與fadeOut – jolen

@ user2783347看到這個演示http://jsfiddle.net/rohankumar1524/jVjaR/4/ –

謝謝 - 它幾乎在那裏，fadeIn需要發生在現有的圖像不刪除然後淡入。 – jolen

jquery圖像滑塊修改

回答

相關問題