jquery轮播动画

AnythingSlider 插件的使用：

简单介绍:

很简单，很绚丽的一个效果，当然基于jquery去实现轮播的动画效果其实很简单，这里作者也并有去拓展很复杂的效果，可以说这个应用的实现也是很简单的。

本文章为原创文章，转载请注明出处:http://www.cnblogs.com/rafx/

Html code:

< div id ="wrapper" >

< ul id ="slider" >

< li >< img src ="http://placekitten.com/300/200" alt ="" /></ li >

< li >< img src ="http://placehold.it/300x200" alt ="" /></ li >

< li >< img src ="http://ipsumimage.appspot.com/300x200.png" alt ="" /></ li >

< li >< img src ="http://dummyimage.com/300x200/000/fff.jpg" alt ="" /></ li >

</ ul >

</ div >

Css code: 

#wrapper { width : 100% ; height : 900px ; } /* used when "expand" is true */

/* Conditional comments don't work in this playground, If testing in IE7 or older browsers, uncomment out the CSS below:

Also note, this may not work properly on themes other than the default as the chosen theme stylesheet is loaded after this CSS and will over-ride it */

/*

div.anythingSlider .arrow {
top: 35% !important;
}
div.anythingSlider-metallic .arrow {
top: 40% !important;
}
div.anythingSlider-construction .arrow {
top: 14% !important;
}
div.anythingSlider-minimalist-round .arrow , div.anythingSlider-minimalist-square .arrow {
top: 45% !important;
}
div.anythingSlider-cs-portfolio .arrow {
bottom: -24px !important;
}

div.anythingSlider .arrow a,
div.anythingSlider-metallic .arrow a,
div.anythingSlider-minimalist-square .arrow a,
div.anythingSlider-construction .arrow a,
div.anythingSlider-minimalist-round .arrow a {
margin: 0 !important;
}

*/

Jquery  code：

// *********** Appearance ***********
// Override the default CSS width
width: 600 ,
// Override the default CSS height
height: 200 ,
// If true, the entire slider will expand to fit the parent element
expand: false ,
// If true, solitary images/objects in the panel will expand to fit the viewport
resizeContents: true ,
// Set this value to a number and it will show that many slides at once
showMultiple: false ,
// Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
tooltipClass: ' tooltip ' ,
// Theme name; choose from: minimalist-round, minimalist-square, metallic, construction, cs-portfolio
theme: ' default ' ,
// Theme directory & filename {themeName} is replaced by the theme value above
themeDirectory: ' http://proloser.github.com/AnythingSlider/css/theme-{themeName}.css ' ,

// *********** Navigation ***********
// This sets the initial panel
startPanel: 1 ,
// Should links change the hashtag in the URL?
hashTags: true ,
// if false, the slider will not wrap
infiniteSlides: true ,
// if false, keyboard arrow keys will not work for the current panel.
enableKeyboard: true ,
// If true, builds the forwards and backwards buttons
buildArrows: true ,
// If true, side navigation arrows will slide out on hovering & hide @ other times
toggleArrows: false ,
// If true, builds a list of anchor links to link to each panel
buildNavigation: true ,
// if false, navigation links will still be visible, but not clickable.
enableNavigation: true ,
// if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
toggleControls: false ,
// A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
appendControlsTo: null ,
// Details at the top of the file on this use (advanced use)
navigationFormatter: null ,
// Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
forwardText: " &raquo; " ,
// Link text used to move the slider back (hidden by CSS, replace with arrow image)
backText: " &laquo; " ,

// *********** Slideshow options ***********
// if false, the play/stop button will still be visible, but not clickable.
enablePlay: true ,
// This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
autoPlay: true ,
// If true, user changing slides will not stop the slideshow
autoPlayLocked: false ,
// If autoPlay is on, this can force it to start stopped
startStopped: false ,
// If true & the slideshow is active, the slideshow will pause on hover
pauseOnHover: true ,
// If true & the slideshow is active & a youtube video is playing, it will pause the autoplay until the video is complete
resumeOnVideoEnd: true ,
// If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
stopAtEnd: false ,
// If true, the slideshow will move right-to-left
playRtl: false ,
// Start button text
startText: " Start " ,
// Stop button text
stopText: " Stop " ,
// How long between slideshow transitions in AutoPlay mode (in milliseconds)
delay: 3000 ,
// Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
resumeDelay: 15000 ,
// How long the slideshow transition takes (in milliseconds)
animationTime: 600 ,
// Anything other than "linear" or "swing" requires the easing plugin
easing: " swing " ,

// *********** Callbacks ***********
// Callback before the plugin initializes
onBeforeInitialize: function (e, slider) {},
// Callback when the plugin finished initializing
onInitialized: function (e, slider) {},
// Callback on slideshow start
onShowStart: function (e, slider) {},
// Callback after slideshow stops
onShowStop: function (e, slider) {},
// Callback when slideshow pauses
onShowPause: function (e, slider) {},
// Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
onShowUnpause: function (e, slider) {},
// Callback when slide initiates, before control animation
onSlideInit: function (e, slider) {},
// Callback before slide animates
onSlideBegin: function (e, slider) {},
// Callback when slide completes - no event variable!
onSlideComplete: function (slider) {},

// *********** Interactivity ***********
// Event used to activate arrow functionality (e.g. "click" or "mouseenter")
clickArrows: " click " ,
// Events used to activate navigation control functionality
clickControls: " click focusin " ,
// Event used to activate slideshow play/stop button
clickSlideshow: " click " ,

// *********** Misc options ***********
// If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
addWmodeToObject: " opaque " ,
// Max width (in pixels) of combined sliders (side-to-side); set to 32766 to prevent problems with Opera
maxOverallWidth: 32766

});

效果图:

 

http://jsfiddle.net/Mottie/pbbYP/

根据官方的方法写一个简单的html这里为了直观的表达此插件的用法直接将插件样式写在html结构中:

<! doctype html public "-//w3c//dtd html 4.0 transitional//en" >
< html >
< head >
< title > new document </ title >
< meta name ="generator" content ="editplus" >
< meta name ="author" content ="" >
< meta name ="keywords" content ="" >
< meta name ="description" content ="" >
<!-- jQuery -->
< script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type ="text/javascript" ></ script >

<!-- Anything Slider optional plugins -->
< script src ="js/jquery.easing.1.2.js" type ="text/javascript" ></ script >
<!-- http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js -->
< script src ="js/swfobject.js" type ="text/javascript" ></ script >

<!-- Anything Slider -->
< link href ="css/anythingslider.css" type ="text/css" rel ="stylesheet" />
< script src ="js/jquery.anythingslider.min.js" type ="text/javascript" ></ script >

<!-- ColorBox -->
< link href ="demos/colorbox/colorbox.css" type ="text/css" rel ="stylesheet" />
< script src ="demos/colorbox/jquery.colorbox-min.js" type ="text/javascript" ></ script >
< style type ="text/css" >
/* CSS to expand the image to fit inside colorbox */
#cboxPhoto { width : 100% ; height : 100% ; margin : 0 !important ; }

/* Change metallic theme defaults to show thumbnails -
using #demo2 (page wrapper) to increase this CSS priority */
#demo2 div.anythingSlider-metallic .thumbNav a {
background-image : url() ;
height : 30px ;
width : 30px ;
border : #000 1px solid ;
border-radius : 2px ;
-moz-border-radius : 2px ;
-webkit-border-radius : 2px ;
text-indent : 0 ;
}
/* border around link (image) to show current panel */
#demo2 div.anythingSlider-metallic .thumbNav a:hover,
#demo2 div.anythingSlider-metallic .thumbNav a.cur {
border-color : #fff ;
}
/* reposition the start/stop button */
#demo2 div.anythingSlider-metallic .start-stop {
margin-top : 15px ;
}
</ style >
</ head >
< body >
< ul id ="slider1" >
< li >< img src ="demos/images/slide-civil-1.jpg" /></ li >
< li >< img src ="demos/images/slide-env-1.jpg" /></ li >
< li >< img src ="demos/images/slide-civil-2.jpg" /></ li >
< li >< img src ="demos/images/slide-env-2.jpg" /></ li >
</ ul >
</ body >
< script type ="text/javascript" >
$(document).ready( function (){
$( ' #slider1 ' )
.anythingSlider({
width : 400 ,
height : 300 ,
toggleControls : true ,
startStopped : true ,
theme : ' metallic ' ,
navigationFormatter : function (i, panel){ // add thumbnails as navigation links
return ' <img src="demos/images/th-slide- ' + [ ' civil-1 ' , ' env-1 ' , ' civil-2 ' , ' env-2 ' ][i - 1 ] + ' .jpg"> ' ;
}
})
// target all images inside the current slider
// replace with 'img.someclass' to target specific images
.find( ' .panel:not(.cloned) img ' ) // ignore the cloned panels
.attr( ' rel ' , ' group ' ) // add all slider images to a colorbox group
.colorbox({
width: ' 90% ' ,
height: ' 90% ' ,
href: function (){ return $( this ).attr( ' src ' ); },
// use $(this).attr('title') for specific image captions
title: ' Press escape to close ' ,
rel: ' group '
});
});
</ script >
</ html >

效果图:

其中参数这里就不在做介绍，可以参考一下官方的文档。

 以上只是一个模板的轮播效果效果，仅供参考！

  qq:313247313
 Email:rafx.z@hotmail.com
 新浪微博: Mr-sniper

转载于:https://www.cnblogs.com/rafx/archive/2011/06/23/AnythingSlider.html