jquery轮播动画 Mr

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
     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>

效果图:

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

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

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