HTML部分代碼
Start with having a wrapping container div called main_view , and two sections nested inside called image_reel and 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.
?
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="reel_1.jpg" alt="" /></a>
<a href="#"><img src="reel_2.jpg" alt="" /></a>
<a href="#"><img src="reel_3.jpg" alt="" /></a>
<a href="#"><img src="reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
?
?
CSS部分代碼
Take a look at the comments below for an explanation of the styles.
?
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:286px; width: 790px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.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 the
image_reel
according to how many slides there are.
?
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".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).
?
//Paging and Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation and Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
$active = $('.paging a.active').next(); //Move to the next paging
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (7 seconds)
};
rotateSwitch(); //Run function on launch
?
?
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.
?
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation timer
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotateSwitch(); // Resume rotation timer
rotate(); //Trigger rotation immediately
return false; //Prevent browser jump to link anchor
});
?
?
?
?
一些網站實例
Below are some sites that use similar techniques, check them out for inspiration!
?
?
?
?
?
淡入淡出幻燈片效果
?
首先我們建一個DIV，里面包括5張img，其中主要css部分代碼如下：
?
#slider1{
margin:20px auto;
height:240px;
width:740px;
position:relative;
}
#slider1 img{
position: absolute;
top: 0px;
left: 0px;
display:none;
}
?
原理分析：通過間隔一定時間來改變下一張圖片的z-index，實現淡入淡出的幻燈片效果，具體js部分代碼如下：
?
var now=0;
setInterval(function (){
pre=now===0?2:now-1;
nxt=now===4?0:now+1;
var div=$("#slider1").children();
div.eq(now).fadeOut(0,function(){
div.css('z-index',1);
div.eq(nxt).css("z-index",6).fadeIn(600);
div.eq(pre).css("z-index",4);
div.eq(now).css("z-index",5);
now=nxt;
});
},3000);
?
?
滾動幻燈片效果
建立兩個DIV，ID分別為slider2跟children，slider2為父div，children為子DIV，包含5張img，父 DIV（slider2）設置為overflow：hidden。主要CSS部分如下：
?
?
#slider2{
overflow:hidden;
margin:20px auto;
height:240px;
width:740px;
position:relative;
}
#children img{
width:740px;
height:240px;
margin:0;
padding:0;
float:left;
}
#children{
height:240px;
position:relative;
width:740px;
}
?
原理分析：通過間隔一定時間，來改變圖片的絕對位置，時間滾動動畫的幻燈片代碼，具體js部分代碼如下：
?
?
var slider=1;
setInterval(function(){
slider=slider===5?0:slider;
var t=-slider*240;
slider++;
$("#children").animate({top:t},600);
},3000);
?
程序演示地址 ： http://www.js8.in/mywork/jquery_slider/
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
