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>
<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;
}
*/
/* 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
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: "»",
// Link text used to move the slider back (hidden by CSS, replace with arrow image)
backText: "«",
// *********** 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
});
// Override the default CSS 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: "»",
// Link text used to move the slider back (hidden by CSS, replace with arrow image)
backText: "«",
// *********** 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({
'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>
<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({
'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>
效果图:
其中参数这里就不在做介绍，可以参考一下官方的文档。
以上只是一个模板的轮播效果效果，仅供参考！