jQuery を使用して、潜在的な顧客向けにメイン ページの画像スライドショーを模倣しようとしています。画像がスムーズに遷移するようにしたいだけです。image0.jpg ... imagen.jpg. JavaScript 内の一重引用符は、マークアップがタグで囲まれているためであることに注意してください。
ジャバスクリプト:
<script type="text/javascript">
function swapImages()
{
var $active = $(\'#myGallery .active\');
var $next = ($(\'#myGallery .active\').next().length > 0) ? $(\'#myGallery .active\').next() : $(\'#myGallery img:first\');
$active.fadeOut(function(){
$active.removeClass(\'active\');
$next.fadeIn().addClass(\'active\');
});
}
$(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval(\'swapImages()\', 5000);
}
</script>
CSS:
<style type="text/css">
.clear
{
clear:left;
}
/* transition effects */
#myGallery
{
position:relative;
width:1000px; /* Set your image width */
height:400px; /* Set your image height */
}
#myGallery img
{
display:none;
position:absolute;
top:0;
left:0;
}
#myGallery img.active
{
display:block;
}
</style>
HTML:
<div id="myGallery">
<img src="'.$baseLink.'/images/slide/0.jpg" alt="Wholesalers" class="active" />
<img src="'.$baseLink.'/images/slide/1.jpg" alt="Premier eShop Software" />
<img src="'.$baseLink.'/images/slide/2.jpg" alt="Team Work" />
</div>