Hi Below I mention full code, Who want this take and enjoy.
Insert the html or php file inside below body tag:
<!– Slider Start –>
<script type=”text/javascript”>// <![CDATA[
document.write(‘<style type=”text/css” _mce_bogus=”1″> #rotator li { display: none; } </style>’);
// ]]></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js” type=”text/javascript”></script>
<script src=”your_path/js/rotator.js” type=”text/javascript”></script>
<div id=”rotator_wrapper”>
<ul id=”rotator”>
<!– This type for Magento : “{{skin url=’images/banner/road_cycling_img.jpg’}}” –>
<li id=”photo_1″><img src=”{{skin url=’images/banner/road_cycling_img.jpg’}}” alt=”Photo” /> </li>
<li id=”photo_2″><img src=”your_path/images/banner/road_cycling_img1.jpg” alt=”Photo” /> </li>
<li id=”photo_3″><img src=”{{skin url=’images/banner/road_cycling_img.jpg’}}” alt=”Photo” /> </li>
<li id=”photo_4″><img src=”your_path/images/banner/road_cycling_img1.jpg” alt=”Photo” /> </li>
</ul>
<ul id=”rotator_controls”>
<li><a href=”#photo_1″>1</a> </li>
<li><a href=”#photo_2″>2</a> </li>
<li><a href=”#photo_3″>3</a> </li>
<li><a href=”#photo_4″>4</a> </li>
</ul>
<div> </div>
<div id=”rotator_play_pause_div”><a id=”rotator_play_pause” href=”#”>PAUSE</a></div>
</div>
<!– Slider End –>
And Paste your CSS in your Stylesheet file inside :
/*** Rotator Image Start ***/
/*********** — **********/
/* `Rotator >> `Wrapper
—————————————————————————————————-*/
#rotator_wrapper {
overflow: hidden;
position: relative;
width: 579px;
height: 255px;
margin:0 auto 10px auto;
z-index:100;
}
#rotator_wrapper li {
list-style: none;
}
/* `Rotator
—————————————————————————————————-*/
#rotator,
#rotator li,
#rotator img {
width: 579px;
height: 255px;
}
#rotator {
background: #fff;
position: relative;
}
#rotator li {
position: absolute;
top: 0;
left: 0;
}
/* `Rotator >> `Controls
—————————————————————————————————-*/
#rotator_controls {
overflow: hidden;
position: absolute;
bottom: 10px;
right: 80px;
padding:5px;
}
#rotator_controls li {
display: inline;
float: left;
margin: 0 0 0 5px;
width: 30px;
}
#rotator_play_pause,
#rotator_controls a {
background:#575757;
border: 1px solid #3C3C3C;
color: #fff;
display: block;
font: bold 11px Verdana, sans-serif;
/*padding: 1px 10px 4px;*/
padding:7px;
text-align: center;
text-decoration: none;
}
#rotator_play_pause{
width:54px;
/*padding:1px 0 4px 0;*/
padding:7px 5px;
text-align:center;
}
#rotator_controls a.current {
color: #fff;
text-decoration: none;
background:#1676DF;
border: 1px solid #3C3C3C;
}
#rotator_play_pause:hover,
#rotator_controls a:hover {
background: #1676DF;
border: 1px solid #3C3C3C;
color: #fff;
}
#rotator_play_pause_div {
position: absolute;
bottom: 8px;
right: 10px;
/*padding: 5px 4px 5px 4px;*/
padding:7px 3px;
display: block;
}
/* For IE6. */
* html #rotator_play_pause,
* html #rotator_controls a {
height: 1%;
}
/*********** — **********/
/*** Rotator Image End ***/
And Paste Your Javascript File Inside this :
// Initialize.
var $j = jQuery.noConflict();
function init_rotator() {
// Does element exist?
if (!$j(‘#rotator’).length) {
// If not, exit.
return;
}
// Rotate speed.
var speed = 2000;
// Pause setting.
var pause = false;
// Rotator function.
function rotate(element) {
// Stop, if user has interacted.
if (pause) {
return;
}
// Either the next /first <li>.
var $jnext_li = $j(element).next(‘li’).length ? $j(element).next(‘li’) : $j(‘#rotator li:first’);
// Either next / first control link.
var $jnext_a = $j(‘#rotator_controls a.current’).parent(‘li’).next(‘li’).length ? $j(‘#rotator_controls a.current’).parent(‘li’).next(‘li’).find(‘a’) : $j(‘#rotator_controls a:first’);
// Animate.
$j(‘#rotator_controls a.current’).removeClass(‘current’);
$jnext_a.addClass(‘current’);
// Continue.
function doIt() {
rotate($jnext_li);
}
// Fade out <li>.
$j(element).fadeOut(speed);
// Show next <li>.
$j($jnext_li).fadeIn(speed, function() {
// Slight delay.
setTimeout(doIt, speed);
});
}
// Add click listeners for controls.
$j(‘#rotator_controls a’).click(function() {
// Change button text.
$j(‘#rotator_play_pause’).html(‘PLAY’);
// Show target, hide other <li>.
$j($j(this).attr(‘href’)).show().siblings(‘li’).hide();
// Add and remove from all others.
$j(this).addClass(‘current’).parent(‘li’).siblings(‘li’).find(‘a’).removeClass(‘current’);;
// Pause animation.
pause = true;
// Nofollow.
this.blur();
return false;
});
// Pause / Play the animation.
$j(‘#rotator_play_pause’).click(function() {
// What does the button say?
if ($j(this).html() === ‘PAUSE’) {
// Stop rotation.
pause = true;
// Change the text.
$j(this).html(‘PLAY’);
} else {
// Remove.
pause = false;
// Start the rotation.
rotate(‘#rotator li:visible:first’);
// Change the text.
$j(this).html(‘PAUSE’);
}
this.blur();
return false;
});
// Hide all but first <li>.
$j(‘#rotator li:first’).show();
// Wait for page load.
$j(window).load(function() {
// Begin rotation.
rotate($j(‘#rotator li:visible:first’));
});
}
// Kick things off.
$j(document).ready(function() {
init_rotator();
});
that is all now, you are ready to start your rotating image work.
welcome all :).