slides效果实现的原理，
首先列出它们的包含结构如#slides(absolute)->.slides_contianer(relative,display:none,overflow:hidden)->.slides_control(jquery中添加的,relative,width等于显示图片的三倍宽度)->.slide(absolute,display:none)
然后把所有的照片都按照声明的前后层叠（因为绝对定位且z-index相同）在.slides_control第二个照片的位置，加载第一照片的时候把第一张照片的z-index设为5；显示下一张图片的时候，先设置.slide中left=2*width把下一张照片移到.slides_control中第三张照片的位置然后再用animate函数实现.slides_control中left=-2*width;的效果，这样就表现出下一张图片的效果，接着再设置.slides_control中的left=-width复位，接着再设置.slide的left=width这样就保持着刚才那下一张照片的效果，就不会因为刚才的复位使图片被移走，由于left=**电脑实现的操作很快，所以人的眼睛根本看不出这期间有变动，发现很多这类的程序都用到这个手法，包括下面的两个；显示上一张的效果原理跟下一张差不多，设置.slide的left=0这样就可以把上一张照片移到.slides_control第一张照片的位置，然后再用animate函数实现.slides_control中left=0;的效果，这样就表现出上一张图片的效果，接着再设置.slides_control中的left=-width复位，接着再设置.slide的left=width这样就保持着刚才那上一张照片的效果，就不会因为刚才的复位使图片被移走。
以上就是slides实现图片连播动画效果的原理
slider http://www.slidesjs.com
images-with-captions中的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slides, A Slideshow Plugin for jQuery</title>
<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="example">
<img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
<div class="caption" style="bottom:0">
<p>Happy Bokeh Thursday!</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
<div class="caption">
<p>Taxi</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
<div class="caption">
<p>Happy Bokeh raining Day</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
<div class="caption">
<p>We Eat Light</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
<div class="caption">
<p>“I must go down to the sea again, to the lonely sea and the sky...”</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
<div class="caption">
<p>twelve.inch</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
<div class="caption">
<p>Save my love for loneliness</p>
</div>
</div>
</div>
<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
<div id="footer">
<p>For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
<p>Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/" target="_blank">Premium Pixels</a></p>
<p>© 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
</div>
</div>
</body>
</html>
images-with-captions 中的 global.css
/*
Resets defualt browser settings
reset.css
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }
/*
Page style
*/
body {
font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
letter-spacing:0;
color:#434343;
background:#efefef url(../img/background.png) repeat top center;
padding:20px 0;
position:relative;
text-shadow:0 1px 0 rgba(255,255,255,.8);
-webkit-font-smoothing: subpixel-antialiased;
}
#container {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
}
#example {
width:600px;
height:350px;
position:relative;
}
#ribbon {
position:absolute;
top:-3px;
left:-15px;
z-index:500;
}
#frame {
position:absolute;
z-index:0;
width:739px;
height:341px;
top:-3px;
left:-80px;
}
/*
Slideshow
*/
#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width:570px;
overflow:hidden;
position:relative;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container div.slide {
width:570px;
height:270px;
display:block;
}
/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left:585px;
}
/*
Pagination
*/
.pagination {
margin:26px auto 0;
width:100px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(../img/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}
/*
Caption
*/
.caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:30px;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.5);
width:540px;
font-size:1.3em;
line-height:1.33;
color:#fff;
border-top:1px solid #000;
text-shadow:none;
}
/*
Footer
*/
#footer {
text-align:center;
width:580px;
margin-top:9px;
padding:4.5px 0 18px;
border-top:1px solid #dfdfdf;
}
#footer p {
margin:4.5px 0;
font-size:1.0em;
}
/*
Anchors
*/
a:link,a:visited {
color:#599100;
text-decoration:none;
}
a:hover,a:active {
color:#599100;
text-decoration:underline;
}/* 以下是分析源码中得出的css */.slides_control{
position:'relative';
width:(width * 3);
height:height;
left:-width;
}
************************************************************************************************************
304
.slide{
position:'absolute';
top:0px;
left:control.children().outerWidth();
zIndex:0;
display:'none'
}
************************************************************************************************************
324
.slides_container
display:block
341
background: url(/img/loading.gif) no-repeat 50% 50%
361
.slide[0]
zIndex:5
366
.slides_container
background:''//去除加载图片
(function($){
$.fn.slides = function( option ) {
// override defaults with specified option
option = $.extend( {}, $.fn.slides.option, option );
return this.each(function(){
// wrap slides in control container, make sure slides are block level
//wrapAll在匹配元素的外层增加一层html结构
$('.' + option.container, $(this)).children().wrapAll('<div class="slides_control"/>');
var elem = $(this),
control = $('.slides_control',elem),
//.size()返回的jQuery对象匹配的DOM元素的数量
total = control.children().size(),
//outerWidth([includeMargin])为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，border。includeMargin为true时不包含margin默认false
width = control.children().outerWidth(),
height = control.children().outerHeight(),
start = option.start - 1,//start图片开始位置，默认为1
//effect，上/下一张,分页效果，格式用逗号隔开的两个值，默认值为slide，即两个值都为slide。第一个值为上下的效果，第二个为分页的效果
effect = option.effect.indexOf(',') < 0 ? option.effect : option.effect.replace(' ', '').split(',')[0],
paginationEffect = option.effect.indexOf(',') < 0 ? effect : option.effect.replace(' ', '').split(',')[1],
next = 0, prev = 0, number = 0, current = 0, loaded, active, clicked, position, direction, imageParent, pauseTimeout, playInterval;//这一行没有缺省值
//alert(total);$('.slides_container').children().length
// animate slides
function animate(direction, effect, clicked) {
//第一次调用animate函数active为undefined
if (!active && loaded) {
//为了从active=true到active=false间程序执行不被中断
active = true;
// start of animation
//这里+1为了方便current从1开始读起
option.animationStart(current + 1);
switch(direction) {
case 'next':
// change current slide to previous
prev = current;
// get next from current + 1
next = current + 1;
// if last slide, set next to first slide
next = total === next ? 0 : next;
// set position of next slide to right of previous
position = width*2;
// distance to slide based on width of slides
direction = -width*2;
// store new current slide
current = next;
break;
case 'prev':
// change current slide to previous
prev = current;
// get next from current - 1
next = current - 1;
// if first slide, set next to last slide
next = next === -1 ? total-1 : next;
// set position of next slide to left of previous
position = 0;
// distance to slide based on width of slides
direction = 0;
// store new current slide
current = next;
break;
case 'pagination':
// get next from pagination item clicked, convert to number
next = parseInt(clicked,10);
// get previous from pagination item with class of current
prev = $('.' + option.paginationClass + ' li.'+ option.currentClass +' a', elem).attr('href').match('[^#/]+$');
// if next is greater then previous set position of next slide to right of previous
if (next > prev) {
position = width*2;
direction = -width*2;
} else {
// if next is less then previous set position of next slide to left of previous
position = 0;
direction = 0;
}
// store new current slide
current = next;
break;
}
// fade animation
if (effect === 'fade') {
// fade animation with crossfade
if (option.crossfade) {
// put hidden next above current
control.children(':eq('+ next +')', elem).css({
zIndex: 10
// fade in next
}).fadeIn(option.fadeSpeed, option.fadeEasing, function(){
if (option.autoHeight) {
// animate container to height of next
control.animate({
height: control.children(':eq('+ next +')', elem).outerHeight()
}, option.autoHeightSpeed, function(){
// hide previous
control.children(':eq('+ prev +')', elem).css({
display: 'none',
zIndex: 0
});
// reset z index
control.children(':eq('+ next +')', elem).css({
zIndex: 0
});
// end of animation
option.animationComplete(next + 1);
active = false;
});
} else {
// hide previous
control.children(':eq('+ prev +')', elem).css({
display: 'none',
zIndex: 0
});
// reset zindex
control.children(':eq('+ next +')', elem).css({
zIndex: 0
});
// end of animation
option.animationComplete(next + 1);
active = false;
}
});
} else {
// fade animation with no crossfade
control.children(':eq('+ prev +')', elem).fadeOut(option.fadeSpeed, option.fadeEasing, function(){
// animate to new height。autoHeight=false 默认
if (option.autoHeight) {
control.animate({
// animate container to height of next
height: control.children(':eq('+ next +')', elem).outerHeight()
}, option.autoHeightSpeed,
// fade in next slide
function(){
control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing);
});
} else {
// if fixed height
control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing, function(){
// fix font rendering in ie, lame
if($.browser.msie) {
$(this).get(0).style.removeAttribute('filter');
}
});
}
// end of animation
option.animationComplete(next + 1);
active = false;
});
}
// slide animation
} else {
// move next slide to right of previous
control.children(':eq('+ next +')').css({
//如果position为0，即把next移到control容器的前端，control容器宽度一共能放三张图片，left=0即把该照片放在第一张的位置
left: position,
display: 'block'
});
//control.css({'border':'1px solid red'});
//alert(control.children(':eq(0)').css('zIndex'));
//alert($('.' + option.container, elem).css('overflow'));
//alert(control.css());
//return;
// animate to new height
//autoHeight=false 默认
if (option.autoHeight) {
control.animate({
left: direction,
height: control.children(':eq('+ next +')').outerHeight()
},option.slideSpeed, option.slideEasing, function(){
control.css({
left: -width
});
control.children(':eq('+ next +')').css({
left: width,
zIndex: 5
});
// reset previous slide
control.children(':eq('+ prev +')').css({
left: width,
display: 'none',
zIndex: 0
});
// end of animation
option.animationComplete(next + 1);
active = false;
});
// if fixed height
} else {
// animate control
control.animate({
left: direction
},option.slideSpeed, option.slideEasing, function(){
// after animation reset control position
control.css({
left: -width
});
// reset and show next
control.children(':eq('+ next +')').css({
left: width,
zIndex: 5
});
alert(control.children(':eq('+ prev +')').css('left')+','+width+',pre'+prev+',next'+next);
//最先声明的叠在下面
// reset previous slide
control.children(':eq('+ prev +')').css({
left: width,
display: 'none',
zIndex: 0
});
// end of animation
option.animationComplete(next + 1);
active = false;
});
}
}
// set current state for pagination
if (option.pagination) {
// remove current class from all
$('.'+ option.paginationClass +' li.' + option.currentClass, elem).removeClass(option.currentClass);
// add current class to next
$('.' + option.paginationClass + ' li:eq('+ next +')', elem).addClass(option.currentClass);
}
}
} // end animate function
//stop()与pause有一个bug，当鼠标在option.pause毫秒内快速移动到图像中时，图像还是播放下一张图片，因为pause函数中option.pause
//毫秒后才setInterval，所以鼠标在option.pause毫秒内移动到图像中clearInterval时，函数setTimeout还没被执行，所以clearInterval
//无效。注意js是解析型语言。实践中这里只播到下一张，没有连续下去，还不清楚有没有修正代码。。
function stop() {
mylog('stop'+(i++));
// clear interval from stored id
clearInterval(elem.data('interval'));
}
function pause() {
mylog('pause'+(i++));
//默认pause=0，调用参数为2500(option.paly,5000)。elem.data相当于全局变量数组
if (option.pause) {
// clear timeout and interval
clearTimeout(elem.data('pause'));
//javascript函数clearInterval
clearInterval(elem.data('interval'));
// pause slide show for option.pause amount
pauseTimeout = setTimeout(function() {
// clear pause timeout
clearTimeout(elem.data('pause'));
// start play interval after pause
playInterval = setInterval( function(){
animate("next", effect);
},option.play);
// store play interval
elem.data('interval',playInterval);
},option.pause);
// store pause interval
elem.data('pause',pauseTimeout);
} else {
// if no pause, just stop
stop();
}
}
// 2 or more slides required
//要求大于或等于2个
if (total < 2) {
return;
}
// error correction for start slide
//错误修正
if (start < 0) {
start = 0;
}
//.size()返回的jQuery对象匹配的DOM元素的数量
//total = control.children().size()
if (start > total) {
start = total - 1;
}
// end 错误修正
// change current based on start option number
if (option.start) {
current = start;
}
// randomizes slide order
//随机的滑动顺序
//默认randomize=false
if (option.randomize) {
control.randomize();
}
// make sure overflow is hidden, width is set
$('.' + option.container, elem).css({
overflow: 'auto',
// fix for ie
position: 'relative'
});
// set css for slides
control.children().css({
position: 'absolute',
top: 0,
left: control.children().outerWidth(),
zIndex: 0,
display: 'none'
});
// set css for control div
control.css({
position: 'relative',
// size of control 3 x slide width
//width=control.children().outerWidth()
width: (width * 3) ,
// set height to slide height
height: height,
// center control to slide
left: -width
});
// show slides
$('.' + option.container, elem).css({
display: 'block'
});
// if autoHeight true, get and set height of first slide
//autoHeight=false 默认
if (option.autoHeight) {
control.children().css({
height: 'auto'
});
control.animate({
height: control.children(':eq('+ start +')').outerHeight()
},option.autoHeightSpeed);
}
// checks if image is loaded
//perload=false默认,调用时设置为true
if (option.preload && control.find('img:eq(' + start + ')').length) {
// adds preload image
$('.' + option.container, elem).css({
//preloadImage=/img/loading.gif
background: 'url(' + option.preloadImage + ') no-repeat 50% 50%'
});
// gets image src, with cache buster
//start默认为1，调用时已设置为0
var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
// check if the image has a parent
//$('img',elem)这里搜的是id=slides下面所有的img,包括.prev img和.next img
//下面if条件结果为true
if ($('img', elem).parent().attr('class') != 'slides_control') {
// If image has parent, get tag name
//eq(0)
imageParent = control.children(':eq(0)')[0].tagName.toLowerCase();
} else {
// Image doesn't have parent, use image tag name
//.find();获得当前元素匹配集合中每个元素的后代
imageParent = control.find('img:eq(' + start + ')');
}
// checks if image is loaded
//有两个load函数，调用那个看参数，一个是ajax方法，另一个是事件处理函数（相当于bind('load',handler)的快捷方式）。
//下面是事件处理函数,即为load事件绑定一个处理函数
//这里的作用清除图片缓存的影响，在图像地址后加上一个随机数
control.find('img:eq(' + start + ')').attr('src', img).load(function() {
// once image is fully loaded, fade in
control.find(imageParent + ':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){
$(this).css({
zIndex: 5
});
// removes preload image
$('.' + option.container, elem).css({
background: ''
});
// let the script know everything is loaded
loaded = true;
// call the loaded funciton
//slidesLoaded在index.html
//css中.caption的bottom属性为-35，在index.html中第一个div.caption中style为bottom=0
option.slidesLoaded();
});
});
} else {
// if no preloader fade in start slide
//运用fadeIn函数时，元素的display属性值为none,元素依然会显示
control.children(':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){
// let the script know everything is loaded
loaded = true;
// call the loaded funciton
option.slidesLoaded();
});
}
// click slide for next
//默认bigTarget=false
if (option.bigTarget) {
// set cursor to pointer
control.children().css({
cursor: 'pointer'
});
// click handler
control.children().click(function(){
// animate to next on slide click
animate('next', effect);
return false;
});
}
var i=1;
function mylog(i)
{console.log(i);}
// pause on mouseover
//默认play=0,调用参数5000
//默认hoverPause=false,调用参数true
if (option.hoverPause && option.play) {
control.bind('mouseover',function(){
// on mouse over stop
//stop(){clearInterval(elem.data('interval'));}
stop();
});
control.bind('mouseleave',function(){
// on mouse leave start pause timeout
pause();
});
}
// generate next/prev buttons,产生next/prev 按钮
//option.generateNextPrev默认为false
if (option.generateNextPrev) {
$('.' + option.container, elem).after('<a href="#" class="'+ option.prev +'">Prev</a>');
$('.' + option.prev, elem).after('<a href="#" class="'+ option.next +'">Next</a>');
}
// next button
$('.' + option.next ,elem).click(function(e){
//preventDefault阻止默认事件行为的触发。例如点击一个锚点<a />，就不会让浏览器跳转到新的 URL 去了
e.preventDefault();
if (option.play) {
pause();
}
//effect=slide
animate('next', effect);
});
//read
// previous button
$('.' + option.prev, elem).click(function(e){
e.preventDefault();
if (option.play) {
pause();
}
//effect=slide
animate('prev', effect);
});
// generate pagination，产生分页。option.generatePagination默认true
if (option.generatePagination) {
// create unordered list
//elem = $(this)。prependPagination默认false
if (option.prependPagination) {
elem.prepend('<ul class='+ option.paginationClass +'></ul>');
} else {
elem.append('<ul class='+ option.paginationClass +'></ul>');
}
// for each slide create a list item and link
control.children().each(function(){
$('.' + option.paginationClass, elem).append('<li><a href="#'+ number +'">'+ (number+1) +'</a></li>');
number++;
});
} else {
// if pagination exists, add href w/ value of item number to links
$('.' + option.paginationClass + ' li a', elem).each(function(){
$(this).attr('href', '#' + number);
number++;
});
}
// add current class to start slide pagination
$('.' + option.paginationClass + ' li:eq('+ start +')', elem).addClass(option.currentClass);
// click handling
$('.' + option.paginationClass + ' li a', elem ).click(function(){
// pause slideshow。默认pause=0，调用参数为2500(option.paly,5000)
if (option.play) {
pause();
}
// get clicked, pass to animate function
//match(searchvalue|regexp),regexp该参数不是 RegExp 对象，则首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。
clicked = $(this).attr('href').match('[^#/]+$');
// if current slide equals clicked, don't do anything
if (current != clicked) {
animate('pagination', paginationEffect, clicked);
}
return false;
});
// click handling
$('a.link', elem).click(function(){
// pause slideshow
if (option.play) {
pause();
}
// get clicked, pass to animate function
clicked = $(this).attr('href').match('[^#/]+$') - 1;
// if current slide equals clicked, don't do anything
if (current != clicked) {
animate('pagination', paginationEffect, clicked);
}
return false;
});
if (option.play) {
// set interval
playInterval = setInterval(function() {
animate('next', effect);
}, option.play);
// store interval id
elem.data('interval',playInterval);
}
});
};//end $.fn.slides
// default
$.fn.slides.option = {
preload: false, // boolean, Set true to preload images in an image based slideshow
preloadImage: '/img/loading.gif', // string, Name and location of loading image for preloader. Default is "/img/loading.gif"
container: 'slides_container', // string, Class name for slides container. Default is "slides_container"
generateNextPrev: false, // boolean, Auto generate next/prev buttons
next: 'next', // string, Class name for next button
prev: 'prev', // string, Class name for previous button
pagination: true, // boolean, If you're not using pagination you can set to false, but don't have to
generatePagination: true, // boolean, Auto generate pagination
prependPagination: false, // boolean, prepend pagination
paginationClass: 'pagination', // string, Class name for pagination
currentClass: 'current', // string, Class name for current class
fadeSpeed: 350, // number, Set the speed of the fading animation in milliseconds
fadeEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/
slideSpeed: 350, // number, Set the speed of the sliding animation in milliseconds(sliding animation滑动动画)
slideEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/
start: 1, // number, Set the speed of the sliding animation in milliseconds
effect: 'slide', // string, '[next/prev], [pagination/分页]', e.g. 'slide, fade' or simply 'fade' for both
crossfade: false, // boolean, Crossfade images in a image based slideshow
randomize: false, // boolean, Set to true to randomize slides
play: 0, // number, Autoplay slideshow, a positive number will set to true and be the time between slide animation in milliseconds
pause: 0, // number, Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in milliseconds
hoverPause: false, // boolean, Set to true and hovering over slideshow will pause it
autoHeight: false, // boolean, Set to true to auto adjust(调整) height
autoHeightSpeed: 350, // number, Set auto height animation time in milliseconds
bigTarget: false, // boolean, Set to true and the whole slide will link to next slide on click
animationStart: function(){}, // Function called at the start of animation
animationComplete: function(){}, // Function called at the completion of animation
slidesLoaded: function() {} // Function is called when slides is fully loaded
};
// Randomize slide order on load
$.fn.randomize = function(callback) {
function randomizeOrder() { return(Math.round(Math.random())-0.5); }
return($(this).each(function() {
var $this = $(this);
var $children = $this.children();
var childCount = $children.length;
if (childCount > 1) {
$children.hide();
var indices = [];
for (i=0;i<childCount;i++) { indices[indices.length] = i; }
indices = indices.sort(randomizeOrder);
$.each(indices,function(j,k) {
var $child = $children.eq(k);
var $clone = $child.clone(true);
$clone.show().appendTo($this);
if (callback !== undefined) {
callback($child, $clone);
}
$child.remove();
});
}
}));
};
})(jQuery);
**************************************************************************************************************************************************************************************
flashSlider
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.flashSlider-1.0.js" type="text/javascript"></script>
<link href="css/jquery.flashSlider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("#slider").flashSlider();
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li>
<img src="images/01.jpg" alt="" /></li>
<li>
<img src="images/02.jpg" alt="" /></li>
<li>
<img src="images/03.jpg" alt="" /></li>
<li>
<img src="images/04.jpg" alt="" /></li>
<li>
<img src="images/05.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
jquery
//====================================================================================================
// [插件名称] jQuery flashSlider
//----------------------------------------------------------------------------------------------------
// [描 述] jQuery flashSlider图片展示插件，它是基于jQuery类库，实现了不使用flash也同样可以在
// 页面上展示图片的效果，支持数字导航，纵向滑动和横向滑动，自动滚动和连续滑动
// 可设置滑动速度、是否自动、停顿间隔,自定义容器高度和宽度,支持Jquery的easing效果
// （更多效果需要easing插件的支持，默认是swing）
//[使用方法] http://www.cnblogs.com/dushouke/archive/2009/12/30/1636390.html
//[源码下载] http://files.cnblogs.com/dushouke/jquery.flashSlider1.0.rar
//----------------------------------------------------------------------------------------------------
// [作者网名] MicroCoder
// [邮 箱] dushouke@qq.com
// [作者博客] http://dushouke.cnblogs.com
// [更新日期] 2009-12-30
// [版 本 号] ver1.0
//====================================================================================================
(function($) {
$.fn.flashSlider = function(options) {
//extend把除了第一个参数外其他参数合并到第一个参数
var options = $.extend({}, $.fn.flashSlider.defaults, options);
//this.length结果为1
this.each(function() {
var obj = $(this);
var curr = 1; //当前索引
var $img = obj.find("img");
var s = $img.length;//s为5
var w = $img.eq(0).width();//照片的宽度
var h = $img.eq(0).height();//照片的高度
var $flashelement = $("ul", obj);//意思即在obj中匹配(筛选)ul标签
(options.height == 0) ? obj.height(h) : obj.height(options.height);//设置显示容器的高度
(options.width == 0) ? obj.width(w) : obj.width(options.width);//设置显示容器的宽度
obj.css("overflow", "hidden");
obj.css("position", "relative");
//设置ul的宽度为所有的照片宽度的和，obj从而出现滚动条，但obj.css("overflow","hidden");所以滚动条没显示出来
$flashelement.css('width', s * w);
if (!options.vertical) {//是否垂直滚动,true为是,默认为false
$("li", obj).css('float', 'left')
}
else {
$img.css('display', 'block')//block后每个图像占一行
};
if (options.controlsShow) {//是否显示数字导航默认true(是)
var navbtnhtml = '<div id="flashnvanum">';
for (var i = 0; i < s; i++) {
navbtnhtml += '<span>' + (i + 1) + '</span>';
}
navbtnhtml += '</div>';
//在obj(<div id='slider'></div>)最后插入navbtnhtml代码,即在</div>标签之前
obj.append(navbtnhtml);
obj.find("#flashnvanum span").hover(function() {//鼠标滑入滑出事件
var num = $(this).html();//html()为取标签之间的文本
flash(num, true);
}, function() {
timeout = setTimeout(function() {
flash((curr / 1 + 1), false); //curr在flash函数体第三句有改变,curr/1取整,为了避免出现小数
}, options.pause / 4); // options.pause/4为了鼠标滑出后加快播放，给人连续的感觉
});
};//开始执行结束，第一步执行结束
function setcurrnum(index) {
//siblings()获得匹配元素集合中每个元素的兄弟元素,原始元素中不包括兄弟姐妹
/*
#flashnvanum span.on
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
*/
obj.find("#flashnvanum span").eq(index).addClass('on').siblings().removeClass('on');
}
function flash(index, clicked)
{
/*
当一个元素调用.stop()，当前正在运行的动画（如果有的话）立即停止。如果，例如，一个元素用.slideUp()隐藏的时候
.stop()被调用，元素现在仍然被显示，但将是先前高度的一部分。
*/
$flashelement.stop();
var next = index == s ? 1 : index + 1;
curr = index - 1;
setcurrnum((index - 1));
if (!options.vertical)
{
p = ((index - 1) * w * -1);
/*
animate,执行一个CSS属性设置的自定义动画。
.animate( properties, [ duration ], [ easing ], [ callback ] )
properties一组CSS属性，动画将朝着这组属性移动。
duration一个字符串或者数字决定动画将运行多久。
easing要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。
callback在动画完成时执行的函数。
*/
$flashelement.animate(
{ marginLeft: p },
options.speed, options.easing
);
} else {
p = ((index - 1) * h * -1);
$flashelement.animate(
{ marginTop: p },//相当向下拉竖轴滚动条p个像素
options.speed, options.easing
);
};
if (clicked) {
clearTimeout(timeout);
};
if (options.auto && !clicked) {
timeout = setTimeout(function() {
flash(next, false);
}, options.speed + options.pause);
};
}//end flash
//第二步开始执行
// javascript函数setTimeout延迟执行，只执行一次
var timeout;
//初始化
setcurrnum(0);
if (options.auto) {
timeout = setTimeout(function() {
flash(2, false);
}, options.pause);
};
});
//第二步执行结束
};
//默认值
$.fn.flashSlider.defaults = {
controlsShow: true, //是否显示数字导航
vertical: false, //纵向还是横向滑动
speed: 800, //滑动速度
auto: true, //是否自定滑动
pause: 2000, //两次滑动暂停时间
easing: "swing", //easing效果，默认swing，更多效果需要easing插件支持
height: 0, //容器高度，不设置自动获取图片高度
width: 0//容器宽度，不设置自动获取图片宽度
}
})(jQuery);
css
html
{
color: #000;
background: #FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td
{
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img
{
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var
{
font-style: normal;
font-weight: normal;
}
li
{
list-style: none;
}
caption, th
{
text-align: left;
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
font-weight: normal;
}
q:before, q:after
{
content: '';
}
abbr, acronym
{
border: 0;
font-variant: normal;
}
/* to preserve line-height and selector appearance */
sup
{
vertical-align: text-top;
}
sub
{
vertical-align: text-bottom;
}
input, textarea, select
{
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
/*to enable resizing for IE*/
input, textarea, select
{ *font-size:100%;}
/*because legend doesn't inherit in IE */
legend
{
color: #000;
}
del, ins
{
text-decoration: none;
}
/*容器*/
slider ul, #slider li
{
margin: 0;
padding: 0;
list-style: none;
}
/*数字导航样式*/
#flashnvanum
{
bottom: 10px;
position: absolute;
right: 20px;
width: 90px;
}
#flashnvanum span
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll -15px 0;
color: #86A2B8;
cursor: pointer;
float: left;
font-family: Arial;
font-size: 12px;
height: 15px;
line-height: 15px;
margin: 1px;
text-align: center;
width: 15px;
}
#flashnvanum span.on
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
************************************************************************************************************************************
dfafasdfa
2648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
