[Web-development (jquery)] Create Image Rotate Slider

Create Image Rotate Slider










CSS Code

 <style>
body{
background:#1f1f1f;
margin:0;
}
#intro .slide, #intro .slide li{
 width:366px;
 height:196px;
 overflow:hidden;
 margin:0;
 padding:0;
 }
#intro{
 border:5px solid #FFFFFF;
 width:366px;
 height:196px;
 margin:20px;
 }
</style>

Javascript Code

 <script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
rotate();
});
this.rotate = function(){

$(".rotate").each(function(){ 
var obj = this; 
var pause = 5000;
var length = $("li",obj).length;
var temp = 0;
var randomize = false;

function getRan(){
 var ran = Math.floor(Math.random()*length) + 1;
 return ran;
};
function show(){
 if (randomize){
 var ran = getRan();
 while (ran == temp){
 ran = getRan();
 };
 temp = ran;
 } else {
 temp = (temp == length) ? 1 : temp+1 ;
 };
 $("li",obj).hide();
 $("li:nth-child(" + temp + ")",obj).fadeIn("slow");
};
show(); setInterval(show,pause);

});
};
</script>

HTML Code

<div>
<ul>
 <li><img src="images/img_slide1.jpg" /></li>
 <li><img src="images/img_slide2.jpg" /></li>
 <li><img src="images/img_slide3.jpg" /></li>
</ul>
</div>

Download

http://dl.dropbox.com/u/3293191/r-ednalan/randomize_slider.zip

Posted by Tutik W