如何讓多幅圖像在不同位置（使用絕對）順序無限地淡入和淡出？

<!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> 

<title>H a l f b l u u d</title> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script> 


<style type='text/css'> 
    #rotating-item-wrapper { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    height: 150px; 
} 
.rotating-item-wrapper li{ 
    float: left; 
    list-style-type:none; 
    width: 148px; 
    height: 150px; 
    margin: 0 0 0 6px; 
    padding: 0; 
    position: relative; 
    text-decoration: none; 
} 
.rotating-item-wrapper li div { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.rotating-item{    
    display:block ; 
    position: absolute; 
    width: 148px; 
    height: 150px; 
    } 

.harleypaint { 
    position: absolute; 
    left: 850px; 
    top: -500px; 
    z-index: 2; 
    display:block ; 

} 

.harleydraw { 
    position: absolute; 
    left: -125px; 
    top: -400px; 
    z-index: 2; 
    display:block ; 

} 

.harleyguitar { 
    position: absolute; 
    left: -325px; 
    top: -50px; 
    z-index: 2; 
    display:block ; 

} 

.harleystand { 
    position: absolute; 
    left: 450px; 
    top: 10px; 
    z-index: 2; 
    display:block ; 

} 

.harleyblink { 
    position: absolute; 
    left: -100px; 
    top: -450px; 
    z-index: 2; 
    display:block ; 

} 




    </style> 
<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){ 
    var InfiniteRotator = 
    { 
     init: function() 
     { 
      //initial fade-in time (in milliseconds) 
      var initialFadeIn = 3000; 
      //interval between items (in milliseconds) 
      var itemInterval = 1500; 
      //cross-fade time (in milliseconds) 
      var fadeTime = 3000; 
      //count number of items 
      var numberOfItems = $('.rotating-item').length; 
      //set current item 
      var currentItem = 0; 
      //show first item 
      $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); 
      //loop through the items 
      var infiniteLoop = setInterval(function(){ 
       $('.rotating-item').eq(currentItem).fadeOut(fadeTime); 
       var rand = Math.floor(Math.random()*(numberOfItems-1)) + 1; 
      currentItem = (currentItem+rand) % numberOfItems; 
       $('.rotating-item').eq(currentItem).fadeIn(fadeTime); 
      }, itemInterval); 
     } 
    }; 
    InfiniteRotator.init(); 
}); 
//]]>  
</script>   




    <style type='text/css'> 
    .bmenu{ 
    padding: 0px; 
    margin: 0 0 10px 0; 
    position: relative; 
    text-decoration: none; 
} 
.bmenu li{ 
    font-size: 35px; 
    display: block; 
} 

.bmenu li a{ 
    color: transparent; 
    display: block; 
    text-transform: uppercase; 
    text-shadow: 0px 0px 4px #fff; 
    letter-spacing: 1px; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    text-decoration: none; 
} 


.bmenu:hover li a{ 
    text-shadow: 0px 0px 6px #fff; 
    text-decoration: none; 
} 
.bmenu li a:hover{ 
    color: #fff; 
    text-shadow: 0px 0px 1px #fff; 
    padding-left: 10px; 
    text-decoration: none; 
} 

</style> 

<!--[if lte IE 7]> 
<style> 
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */ 
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */ 
</style> 
<![endif]--> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('body').stratus({ 
     auto_play: false, 
     color: '24242D', 
     download: false, 
     links: 'https://soundcloud.com/halfbluud', 
     random: false 
    }); 
    }); 
</script> 

</head> 

<body> 

<table align="center" border="0" style="border-spacing: 0"> 
    <tr> 

    <td width="598" height="267" >&nbsp;</td> 
    <td width="169">&nbsp;</td> 


    </tr> 

    <tr> 

    <div class="mainpage"><td bgcolor="#000000"><center><iframe src="http://player.vimeo.com/video/75329627?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1&amp;loop=1" width="600" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    </center> 
    </td> 
    <td bgcolor="#000000"> <center><ul class="bmenu"> 
    <li><a href="#">About</a></li><br> 
    <li><a href="#">Tour</a></li><br> 
    <li><a href="#">Media</a></li><br> 
    <li><a href="#">Store</a></li><br> 
    <li><a href="#">News</a></li> 
    </ul></center> 
    </td> 

    </div> 
    </tr> 

</table> 

<ul class="rotating-item-wrapper"> 
    <li> 

     <div class="harleypaint"> 
      <img src="http://www.xaluan.com/images/weathericon/48px/01.png">   </div> 
      <div class="harleypaint" style="background-color: white;"> 
      </div> 

    </li> 
    <li> 
      <div class="harleydraw"> 
      <img src="http://www.xaluan.com/images/weathericon/48px/01.png">   </div> 
      <div class="harleydraw" style="background-color: white;"> 
      </div> 

    </li> 
    <li> 
      <div class="harleyguitar"> 
      <img src="http://www.xaluan.com/images/weathericon/48px/01.png">   </div> 
      <div class="harleyguitar" style="background-color: white;"> 
      </div> 

    </li> 
    <li> 
      <div class="harleystand"> 
      <img src="http://www.xaluan.com/images/weathericon/48px/01.png">   </div> 
      <div class="harleystand" style="background-color: white;"> 
      </div> 

    </li><li> 
      <div class="harleyblink"> 
      <img src="http://www.xaluan.com/images/weathericon/48px/01.png">   </div> 
      <div class="harleyblink" style="background-color: white;"> 
      </div> 

    </li> 
</ul> 




</body> 
</html>

我有一個網站，我想提出，將有一個VIMEO視頻，在頁面的中心，就在旁邊的菜單。所以，它最終會成爲一個全白頁，中間是這個黑色矩形。如何讓多幅圖像在不同位置（使用絕對）順序無限地淡入和淡出？

該網站爲藝術家。我試圖讓他工作的不同圖像在黑色矩形周圍的不同位置淡入淡出（除了美學以外）。菜單很簡單，頁面極其簡約。在不同的地方淡入淡出的圖片會給它「某種東西」......一種令人困擾的效果。

我發現隨機代碼，但我不希望一個圖像能夠背對背背對背。我希望它從一個圖像開始並移動到另一個圖像5，然後返回到第一個圖像。大部分按順序淡入淡出的東西都沒有放置在不同的位置（這是我遇到問題的地方）。我得到的代碼工作，但後來我把圖像周圍（使用'絕對'定位）出現問題。

當試圖實現網上隨時可用的幫助時，它不會按照我的要求去做。

我想我可以試着從字面上只是在相同的代碼改變版本調用（只是改變了絕對位置和定時器），每幅圖像，但似乎沒有必要。它似乎也不會讓我能夠無限循環。

我爲我的文章的冗長道歉，但我只是想明確的是，「容易找到」腳本和崗位有關淡入/淡出圖像不回答我的問題。我已經搜索和搜索無濟於事。

我知道我的代碼根本不起作用，但它是我最近一次接觸它的地方。提前感謝！

來源

2013-10-01 Algernon

這並不完美，但它應該讓你開始。它循環訪問一系列圖像，並更改一個img標籤上的src。然後隨機選取頂部和左側位置，並將圖像淡入淡出。 http://jsfiddle.net/bhlaird/TH7t7/3/

的Javascript：

var images = [{ 
    src: "http://placeKitten.com/g/500/500", 
    width: 500, 
    height: 500 
}, { 
    src: "http://placeKitten.com/g/300/300", 
    width: 300, 
    height: 300 
}, { 
    src: "http://placeKitten.com/g/600/600", 
    width: 600, 
    height: 600 
}, { 
    src: "http://placeKitten.com/g/400/400", 
    width: 400, 
    height: 400 
}, , { 
    src: "http://placeKitten.com/g/200/200", 
    width: 200, 
    height: 200 
}]; 


var counter = { 
    val: 0, 
    top: 0, 
    left: 0 
}; 

function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

function fadeImage(counter) { 
    counter.top = getRandomInt(0, $("body").height() - images[counter.val].height); 
    counter.left = getRandomInt(0, $("body").width() - images[counter.val].width); 

    $("#haunting").fadeTo(2000, 0.3).delay(1000).fadeOut(2000); 
    $("#haunting").attr({ 
     src: images[counter.val].src 
    }).css({ 
     top: counter.top, 
     left: counter.left 
    }); 

    if (counter.val < images.length) counter.val++; 
    else counter.val = 0; 


} 
setInterval(function() { 
    fadeImage(counter); 
}, 6000);

HTML：

<img id="haunting" style="display:none" src="http://placeKitten.com/g/500/200" /> 
<div id="video"> 
    <img src="http://placekitten.com/200/200" /> 
    <div id="menu">Some text</div> 
</div>

CSS：

html, body { 
    height: 100%; 
} 
#video { 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width:200px; 
    height:210px; 
    text-align:center; 
} 
#haunting { 
    position: absolute; 
    top:0; 
    left:0; 
}

來源

2013-10-02 14:23:45

感謝芭芭拉！有沒有辦法做到這一點與按順序選擇圖像？另外，有沒有辦法讓特定的圖像總是在特定的地方出現？即如果pictureA彈出第一和在（右：100像素;頂：150像素）和pictureB總是第二彈出並總是在彈出（右：300像素;頂：200像素）？這些不是我的具體細節，但他們更具體地表明我的意思。非常感謝@ barbara-laird！ – Algernon

RE：@barbaralaird – Algernon

@Algernon這已經按順序選擇了圖像。如果您不想將它們放置在隨機位置，則可以將頂部和左側成員添加到圖像數組，然後更改淡入淡出圖像函數以使用這些值，而不是獲取隨機計算的值。 –

如何讓多幅圖像在不同位置（使用絕對）順序無限地淡入和淡出？

回答

相關問題