html 简单的随机Javascript旋转器
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 简单的随机Javascript旋转器相关的知识,希望对你有一定的参考价值。
<html lang="en">
<head>
<title>Simplest jQuery Slideshow</title>
<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
.fadelinks, .faderandom { position:relative; height:332px; width:500px; }
.fadelinks > *, .faderandom > * { position:absolute; left:0; top:0; display:block; }
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
</head>
<body>
<h1>Simplest jQuery Slideshow</h1>
<p>Check out the <a href="/archives/javascript/simplest-jquery-slideshow">blog post</a>.</p>
<div class="fadein">
<img src="http://barasoft.co.uk/test/images/slides/hosting.png">
<img src="http://barasoft.co.uk/test/images/slides/cms.png">
<img src="http://barasoft.co.uk/test/images/slides/e-learning.png">
</div>
<h2>More Simple jQuery Slideshow: Random</h2>
<script>
$(function(){
$('.faderandom > :gt(0)').hide();
setInterval(function(){
var rand = Math.floor(Math.random() * ($('.faderandom').children().length-1));
$('.faderandom > :first-child').appendTo('.faderandom').fadeOut();
$('.faderandom > *').eq(rand).prependTo('.faderandom').fadeIn();
}, 3000);
});
</script>
<div class="faderandom">
<a href="#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></a>
<a href="#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></a>
<a href="#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></a>
</div>
<h2>More Simple jQuery Slideshow: With Links</h2>
<script>
$(function(){
$('.fadelinks > :gt(0)').hide();
setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');}, 3000);
});
</script>
<div class="fadelinks">
<a href="#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></a>
<a href="#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></a>
<a href="#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></a>
</div>
<h2>More Simple jQuery Slideshow: Multiple Slideshows</h2>
<script>
$(function(){
$('.multipleslides').each(function(){
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 3000);
})
});
</script>
<div class="multipleslides">
<a href="#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></a>
<a href="#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></a>
<a href="#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></a>
</div>
<div class="multipleslides">
<a href="#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></a>
<a href="#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></a>
<a href="#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></a>
</div>
</body>
</html>
以上是关于html 简单的随机Javascript旋转器的主要内容,如果未能解决你的问题,请参考以下文章