Code
<div id="content">
<div id="slideshow" style="height:auto" style="width:auto">
<img src="images/001.jpg" width="525" height="300/>
<img src="images/003.jpg" alt="Oonrak Samui School" />
<img src="images/004.jpg" alt="Oonrak Samui School" />
<img src="images/005.jpg" alt="Oonrak Samui School" />
<img src="images/006.jpg" alt="Oonrak Samui School" />
<img src="images/007.jpg" alt="Oonrak Samui School" />
</div>
</div>
Code
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '</p>',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
});
</script>
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
<script type="text/javascript">
/***Simple jQuery Slideshow Script ***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 4000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 7000 );
});
</script>
<style type="text/css">
<!--
.style2 {color: #0099FF}
-->
</style>
ส่วนนี้เรียกมาใช้ <link rel="stylesheet" href="css/style1.css" type="text/css" />
Code
@charset "UTF-8";
/* Main Body */
/*#main_body { width:800px; margin:0 auto; padding:0; top:0px;}
/*** set the width and height to match your images **/
#slideshow {position:relative; height:300px; border: 0px solid #FFFFFF; width: 525px; margin-right: auto; margin-left: auto; }
#slideshow {
position:relative;
height:305px;
border: 0px solid #FFFFFF;
width: 520px;
margin-right: auto;
margin-left: auto;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
/*
height: 300px;
width: 841px;*/
width: 525px;
height: 300px;
}
#slideshow IMG.active { z-index:10; opacity:1.0;}
#slideshow IMG.last-active { z-index:9;}
Load balance : Server 03
