Flashのようなアニメーションの動きをする jQuery プラグインのデモページ

headタグ内

   <script type="text/javascript" src="fa/jquery_003.js"></script>
   <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
   <script src="js/jquery.timer.js" type="text/javascript"></script>
   <script src="js/image-rotator.js" type="text/javascript"></script>

XHTML

<div id="window">  
     <ul id="slideshow">
         <li><img src="images/101.jpg" alt=" 画像1"/></li>
         <li><img src="images/102.jpg" alt=" 画像2"/></li>  
         <li><img src="images/103.jpg" alt=" 画像3"/></li>  
         <li><img src="images/104.jpg" alt=" 画像4"/></li>  
     </ul>  
</div>

CSS

#window{
     overflow:hidden;/* 必須 */  
     position:relative;/* 必須 */  
     width:960px;/* 画像1枚の横幅 */  
     height:350px;/* 画像1枚の高さ */  
     background:url(images/bg.gif);/* 任意 */
     border:3px solid #333;/* 任意 */
 }

上記指定だと下記のような感じになります。

 #slideshow{ 
     width:1920px;/* 画像2枚分の横幅 */  
     height:700px;/* 画像2枚分の縦幅 */  
     overflow:hidden;/* 必須 */  
     position:relative;/* 必須 */  
     padding:0;  
     margin:0;  
 }  
 #slideshow li{
     width:960px;/* 画像1枚の横幅 */
     height:350px;/* 画像1枚の高さ */
     float:left;/* 横並びに */
     display:inline;  
 }

overflow:hidden; の指定がなかったら下記のようになります。

image-rotator.js

 $(document).ready(function(){  
       
     var current_panel = 1;  
       
     var animation_duration = 2500;//スライド時の動きの速さ  
       
     $.timer(6000, function (timer) {  
         //スライド至るまでの動きの速さ  
         switch(current_panel){  
             case 1:  
                 $("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
                 //↑①左に何px 上に何px 移動するか指定  
                 current_panel = 2;  
             break;  
             case 2:  
                 $("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
                 //↑②左に何px 上に何px 移動するか指定  
                 current_panel = 3;  
             break;  
             case 3://③左に何px 上に何px 移動するか指定
                 $("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});  
                 current_panel = 4;  
             break;  
             case 4://④左に何px 上に何px 移動するか指定  
                 $("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});  
                 current_panel = 1;  
             break;    
             timer.reset(12000);  
         }  
     });  
       
 });