Hello, I'm having trouble with changing the command of .img command with back round, and instead to put an image,
Can anyone please help me and explain how i can add "img src" to the ".img1" etc, Because when i try to do, I lose the image display.
Thanks from adavance!
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="src">
</script>
<meta charset=utf-8 />
<style>
.rotator-wrapper{
width: 0px;
border: 0px solid black;
}
ul#rotator, ul#rotator li{
float: left;
width: x;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#rotator li{
width: 0px;
position: relative;
}
.rotator-image{
position: absolute;
display: none;
width: 100px;
height: 100px;
}
.img1{
background-color: red;
}
.img2{
background-color: blue;
}
</style>
</head>
<body>
<div class="rotator-wrapper">
<ul id="rotator">
<li>
<div class="rotator-image img1"></div>
<div class="rotator-image img2"></div>
</li>
</ul>
</div>
<script>$(function(){
// time between image rotate
var delay = 1500;
// for each list item in
// the rotator ul, generate
// show a random list item
$('#rotator > li').each(function(){
// save images in an array
var $imgArr = $(this).children();
// show a random image
$imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
});
// run the changeImage function after every (delay) miliseconds
setInterval(function(){
changeImage();
},delay);
function changeImage(){
// save list items in an array
var $liArr = $('#rotator > li');
// select a random list item
var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
// get the currently visible image
var $currImg = $('.rotator-image:visible', $currLi);
if ($currImg.next().length == 1) {
var $next = $currImg.next();
} else {
var $next = $('.rotator-image:first', $currLi);
}
$currImg.fadeOut();
$next.fadeIn();
}
});
</script>
</body>
</html>
Can anyone please help me and explain how i can add "img src" to the ".img1" etc, Because when i try to do, I lose the image display.
Thanks from adavance!
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="src">
</script>
<meta charset=utf-8 />
<style>
.rotator-wrapper{
width: 0px;
border: 0px solid black;
}
ul#rotator, ul#rotator li{
float: left;
width: x;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#rotator li{
width: 0px;
position: relative;
}
.rotator-image{
position: absolute;
display: none;
width: 100px;
height: 100px;
}
.img1{
background-color: red;
}
.img2{
background-color: blue;
}
</style>
</head>
<body>
<div class="rotator-wrapper">
<ul id="rotator">
<li>
<div class="rotator-image img1"></div>
<div class="rotator-image img2"></div>
</li>
</ul>
</div>
<script>$(function(){
// time between image rotate
var delay = 1500;
// for each list item in
// the rotator ul, generate
// show a random list item
$('#rotator > li').each(function(){
// save images in an array
var $imgArr = $(this).children();
// show a random image
$imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
});
// run the changeImage function after every (delay) miliseconds
setInterval(function(){
changeImage();
},delay);
function changeImage(){
// save list items in an array
var $liArr = $('#rotator > li');
// select a random list item
var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
// get the currently visible image
var $currImg = $('.rotator-image:visible', $currLi);
if ($currImg.next().length == 1) {
var $next = $currImg.next();
} else {
var $next = $('.rotator-image:first', $currLi);
}
$currImg.fadeOut();
$next.fadeIn();
}
});
</script>
</body>
</html>
