如何在不同位置（使用abolute）依次使多个图像无限地淡入和淡出？

Question

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

I have a website i am making that will have a vimeo video, in the center of the page, and a menu right next to it. 我有一个正在制作的网站，该页面的中心将有一个vimeo视频，旁边是一个菜单。 So, it will end up being an all white page with this black rectangle in the middle. 因此，最终将是一个全白色的页面，中间有一个黑色矩形。

The website is for an artist. 该网站适用于艺术家。 I am trying to have different images of him working fade in and out in different locations around the black rectangle (for nothing other than aesthetics.). 我试图让他的工作的不同图像在黑色矩形周围的不同位置淡入和淡出（除了美观之外）。 The menu is straightforward and the page is overwhelmingly minimalistic. 菜单简单明了，页面绝大多数简约。 The pictures fading in and out in different places will give it "something"....a sort of haunting effect. 图片在不同地方淡入淡出会给它“某种东西”……一种令人困扰的效果。

I have found randomizing code but i dont want one image to be able to appear back-to-back-to-back. 我找到了随机代码，但我不希望一张图像能够背对背出现。 I want it to start with one image and move around to the other 5, and then return to the first image. 我希望它从一个图像开始，然后移至其他5个图像，然后返回到第一个图像。 Most things that fade in and out in sequence aren't placed in different positions (which is where im running into problems). 依序淡入淡出的大多数事物不会放在不同的位置（这是我遇到问题的地方）。 I get the code working but then once i place the images around (using 'absolute' positioning) something goes wrong. 我使代码正常工作，但是一旦我将图像放置在周围（使用“绝对”定位），就会出问题。

When attempting to implement the help that is readily available online, it doesn't do what i want. 尝试实施可随时在线获得的帮助时，它无法满足我的要求。

I guess i could try to literally just call on altered versions of the same code (just change the absolute position and the timer) per image but that seems unnecessary. 我想我可以尝试从字面上仅对每个图像调用相同代码的更改版本（只需更改绝对位置和计时器），但这似乎是不必要的。 It also doesn't seem like i would be able to have that infinitely loop. 似乎我也无法实现无限循环。

I apologize for the lengthiness of my post, but i just want to be clear that the 'easy to find' scripts and posts regarding fade in/out images are not the answer to my problem. 对于冗长的帖子我深表歉意，但我只是想清楚一点，关于淡入/淡出图像的“易于查找”脚本和帖子并不是解决我问题的答案。 I have searched and searched to no avail. 我搜索了，搜索都没有用。

I'm aware that the code i have doesn't work at all, but it's where i got the most recent time i took a swing at it. 我知道我拥有的代码根本无法工作，但这是我最近一次尝试的地方。 THANKS ahead of time! 提前谢谢！

Answer 1

This isn't perfect, but it should get you started. 这不是完美的方法，但是应该可以帮助您入门。 It cycles through an array of images and changes the src on one img tag. 它循环显示一组图像，并更改一个img标签上的src。 It then randomly picks a top and left position and fades the image in and out. 然后，它随机选择顶部和左侧位置，并淡入和淡出图像。 http://jsfiddle.net/bhlaird/TH7t7/3/ http://jsfiddle.net/bhlaird/TH7t7/3/

Javascript: 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: 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: 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;
}

如何在不同位置（使用abolute）依次使多个图像无限地淡入和淡出？

问题描述

1 个解决方案

解决方案1
0 2013-10-02 14:23:45

如何在不同位置（使用abolute）依次使多个图像无限地淡入和淡出？

问题描述

1 个解决方案

解决方案1 0 2013-10-02 14:23:45

解决方案1
0 2013-10-02 14:23:45