jQuery滑动图片教程

 

HTML部分代码

Start with having a wrapping container div called main_view , and two sections nested inside called image_reeland paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.

 

Html代码   

1. <div class="main_view">  
2.     <div class="window">  
3.         <div class="image_reel">  
4.             <a href="#"><img src="reel_1.jpg" alt="" /></a>  
5.             <a href="#"><img src="reel_2.jpg" alt="" /></a>  
6.             <a href="#"><img src="reel_3.jpg" alt="" /></a>  
7.             <a href="#"><img src="reel_4.jpg" alt="" /></a>  
8.         </div>  
9.     </div>  
10.     <div class="paging">  
11.         <a href="#" rel="1">1</a>  
12.         <a href="#" rel="2">2</a>  
13.         <a href="#" rel="3">3</a>  
14.         <a href="#" rel="4">4</a>  
15.     </div>  
16. </div>  

 

 

css+jQuery实现滑动幻灯片实例教程

 

CSS部分代码

Take a look at the comments below for an explanation of the styles.

 

Css代码   

1. /*--Main Container--*/  
2. .main_view {  
3.     float: left;  
4.     position: relative;  
5. }  
6. /*--Window/Masking Styles--*/  
7. .window {  
8.     height:286px;   width: 790px;  
9.     overflow: hidden; /*--Hides anything outside of the set width/height--*/  
10.     position: relative;  
11. }  
12. .image_reel {  
13.     position: absolute;  
14.     top: 0; left: 0;  
15. }  
16. .image_reel img {float: left;}  
17.    
18. /*--Paging Styles--*/  
19. .paging {  
20.     position: absolute;  
21.     bottom: 40px; right: -7px;  
22.     width: 178px; height:47px;  
23.     z-index: 100; /*--Assures the paging stays on the top layer--*/  
24.     text-align: center;  
25.     line-height: 40px;  
26.     background: url(paging_bg2.png) no-repeat;  
27.     display: none; /*--Hidden by default, will be later shown with jQuery--*/  
28. }  
29. .paging a {  
30.     padding: 5px;  
31.     text-decoration: none;  
32.     color: #fff;  
33. }  
34. .paging a.active {  
35.     font-weight: bold;  
36.     background: #920000;  
37.     border: 1px solid #610000;  
38.     -moz-border-radius: 3px;  
39.     -khtml-border-radius: 3px;  
40.     -webkit-border-radius: 3px;  
41. }  
42. .paging a:hover {font-weight: bold;}   

 

 

JS部分代码

The following script contains comments explaining which jQuery actions are being performed.
1.Setting up the Image Slider 
Start by showing the paging and activating the first link. Then we will calculate and adjust the width of theimage_reel according to how many slides there are.

 

 

Js代码   

1. //Show the paging and activate its first link  
2. //显示分页和激活其第一环节
3. $(".paging").show();  
4. $(".paging a:first").addClass("active");  
5.    
6. //Get size of the image, how many images there are, then determin the size of the image reel.  
7. //获得图像的大小，有多少图片，然后确定图像的大小卷。
8. var imageWidth = $(".window").width();  
9. var imageSum = $(".image_reel img").size();  
10. var imageReelWidth = imageWidth * imageSum;  
11.    
12. //Adjust the image reel to its new size  
13. //调整图像的卷轴，新的尺寸
14. $(".image_reel").css({'width' : imageReelWidth});   

 

 

2.Setting up the Slider Function and Timer 
We first create the function for the slide event by itself (rotate ). Then create another function (rotateSwitch ) that will rotate and repeat that slide event (rotate).

 

Js代码   

1. //Paging  and Slider Function
2. //页面和滑块函数
3. rotate = function(){  
4.  //Get number of times to slide  
5. //获取有多少次滑动
6.     var triggerID = $active.attr("rel") - 1;
7. //Determines the distance the image reel needs to slide 
8. //确定幻片片卷动的距离 
9.     var image_reelPosition = triggerID * imageWidth; 
10. //Remove all active class 
11. //移除active类 
12.     $(".paging a").removeClass('active'); 
13. //Add active class (the $active is declared in the rotateSwitch function)  
14. //添加active类(...)
15.     $active.addClass('active'); 
16.    
17.     //Slider Animation
18.   //滑动动画
19.     $(".image_reel").animate({  
20.         left: -image_reelPosition  
21.     }, 500 );  
22.    
23. };   
24.    
25. //Rotation  and Timing Event 
26. //轮转和定时事件 
27. rotateSwitch = function(){  
28.     play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds  
29.   //设置定时器-每7秒重复
30. //Move to the next paging
31. //移动到下一页
32.         $active = $('.paging a.active').next();   
33. //If paging reaches the end...
34. //如果这是最后一页
35.         if ( $active.length === 0) {   
36.             //go back to first 
37.             //返回到第一页 
38.             $active = $('.paging a:first'); 
39.         }  
40.         //Trigger the paging and slider function 
41. //运行函数
42.         rotate(); 
43. //Timer speed in milliseconds (7 seconds)  
44. //计时器的速度以毫秒计(7秒)
45.     }, 7000); 
46. };  
47. //Run function on launch  
48. //运行函数 
49. rotateSwitch();   

 

 

Take a look at this tutorial for an explanation of how the timer (setInterval ) works.

3.Hover and Click Events 
In case the user wants to view the slide for a longer period of time, we will allow the slider to stop when it is hovered. Another thing to consider is we should reset the timer each time the paging is clicked. This will prevent unexpected slide switches and allow for a smoother experience.

 

Js代码   

1. //On Hover  
2. $(".image_reel a").hover(function() {  
3.     clearInterval(play); //Stop the rotation  
4. }, function() {  
5.     rotateSwitch(); //Resume rotation timer  
6. });   
7.    
8. //On Click  
9. $(".paging a").click(function() {  
10.     $active = $(this); //Activate the clicked paging  
11.     //Reset Timer  
12.     clearInterval(play); //Stop the rotation  
13.     rotateSwitch(); // Resume rotation timer  
14.     rotate(); //Trigger rotation immediately  
15.     return false; //Prevent browser jump to link anchor  
16. });   

 

 

css+jQuery实现滑动幻灯片实例教程

 

查看演示 

 

淡入淡出幻灯片效果

 

首先我们建一个DIV，里面包括5张img，其中主要css部分代码如下：

 

Css代码   

1. #slider1{  
2.     margin:20px auto;  
3.     height:240px;  
4.     width:740px;  
5.     position:relative;  
6.     }      
7. #slider1 img{  
8.     position: absolute;   
9.     top: 0px;   
10.     left: 0px;  
11.     display:none;  
12. }   

 

原理分析：通过间隔一定时间来改变下一张图片的z-index，实现淡入淡出的幻灯片效果，具体js部分代码如下：

 

Js代码   

1. var now=0;  
2.      setInterval(function (){  
3.          pre=now===0?2:now-1;  
4.          nxt=now===4?0:now+1;  
5.          var div=$("#slider1").children();  
6.          div.eq(now).fadeOut(0,function(){     
7.           div.css('z-index',1);         
8.              div.eq(nxt).css("z-index",6).fadeIn(600);  
9.              div.eq(pre).css("z-index",4);  
10.              div.eq(now).css("z-index",5);  
11.              now=nxt;  
12.          });  
13.      },3000);  

 

 

滚动幻灯片效果

建立两个DIV，ID分别为slider2跟children，slider2为父div，children为子DIV，包含5张img，父 DIV（slider2）设置为overflow：hidden。主要CSS部分如下：

 

 

Css代码   

1.  #slider2{  
2.     overflow:hidden;  
3.         margin:20px auto;  
4.     height:240px;  
5.     width:740px;  
6.     position:relative;  
7.     }  
8. #children img{  
9.         width:740px;  
10.     height:240px;  
11.     margin:0;  
12.     padding:0;  
13.     float:left;  
14.       }  
15. #children{  
16.     height:240px;  
17.         position:relative;  
18.         width:740px;  
19.     }  

 

原理分析：通过间隔一定时间，来改变图片的绝对位置，时间滚动动画的幻灯片代码，具体js部分代码如下：

 

 

Js代码   

1. var slider=1;  
2. setInterval(function(){  
3.         slider=slider===5?0:slider;       
4.         var t=-slider*240;  
5.         slider++;  
6.         $("#children").animate({top:t},600);  
7. },3000);   

 

程序演示地址 ：http://www.js8.in/mywork/jquery_slider/