jQuery之家-htmleaf.com免费提供各种jquery、html5、css3前端开发插件素材。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.slidorion.js"></script>
<body>
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>
<script>
$(document).ready(function(){
$('#slidorion').slidorion();
});
</script>
<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/