JQUERY之家

jQuery之家-htmleaf.com免费提供各种jquery、html5、css3前端开发插件素材。

jQuery Slidorion自动切换选项图片轮播的手风琴效果使用方法

引入JS文件

                
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.slidorion.js"></script>
                
            

编写HTML元素

        
<div id="slidorion">
  <div id="slider">
    <div class="slider-image" rel="section1">
      <img src="sample.jpg" width="500" height="400" />
    </div>
    <div class="slider-image" rel="section2">
      <img src="sample.jpg" width="500" height="400" />
    </div>
    <div class="slider-image" rel="section3">
      <img src="sample.jpg" width="500" height="400" />
    </div>
  </div>
  <div id="accordion">
    <div class="header"><a class="slider-link" rel="section1">Kung Fu Panda 2</a></div>
    <div class="content">
      <!-- CONTENT GOES HERE -->
    </div>
    <div class="header"><a class="slider-link" rel="section2">The Dark Knight</a></div>
    <div class="content">
      <!-- CONTENT GOES HERE -->
    </div>
    <div class="header"><a class="slider-link" rel="section3">Hot Fuzz</a></div>
    <div class="content">
      <!-- CONTENT GOES HERE -->
    </div>
  </div>
</div>   

jQuery代码

            
<script>
  $(document).ready(function(){
    $('#slidorion').slidorion();
  });
  </script>
        

Initialising With Options

  <script>
  $(document).ready(function(){
    $('#slidorion').slidorion({
      speed: 1000,
      interval: 4000,
      effect: 'slideLeft'
    });
  });
</script>
            
        

可选参数

                
autoPlay:Automatically plays the slidorion (boolean)
easing:The easing of the animations (string)
effect:The effect of the animation (string),可用效果如下:
    fade - fade's the next image in
    overUp - overlaps the next image from bottom to top
    overRight - overlaps the next image from left to right
    overDown - overlaps the next image from top to bottom
    overLeft - overlaps the next image from right to left
    slideUp - slides images up
    slideRight - slides images right
    slideDown - slides images down
    slideLeft - slides images left
    none - changes image with no effect
first:he first slide to show (the rel of that slide) (string)
hoverPause:The slidorion pauses when hovered over  (boolean)
interval:The time between each slide (number)
speed:The speed of the animation (number)
                
            

查看更多内容:http://www.slidorion.com/