[英]How can I have multiple images fade in and fade out infinitely,in sequence, in different locations (using abolute)?
<!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" > </td>
<td width="169"> </td>
</tr>
<tr>
<div class="mainpage"><td bgcolor="#000000"><center><iframe src="http://player.vimeo.com/video/75329627?title=0&byline=0&portrait=0&color=ffffff&autoplay=1&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個圖像,然后返回到第一個圖像。 依序淡入淡出的大多數事物不會放在不同的位置(這是我遇到問題的地方)。 我使代碼正常工作,但是一旦我將圖像放置在周圍(使用“絕對”定位),就會出問題。
嘗試實施可隨時在線獲得的幫助時,它無法滿足我的要求。
我想我可以嘗試從字面上僅對每個圖像調用相同代碼的更改版本(只需更改絕對位置和計時器),但這似乎是不必要的。 似乎我也無法實現無限循環。
對於冗長的帖子我深表歉意,但我只是想清楚一點,關於淡入/淡出圖像的“易於查找”腳本和帖子並不是解決我問題的答案。 我搜索了,搜索都沒有用。
我知道我擁有的代碼根本無法工作,但這是我最近一次嘗試的地方。 提前謝謝!
這不是完美的方法,但是應該可以幫助您入門。 它循環顯示一組圖像,並更改一個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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.