必优博客

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=482

需要将产品图片或相片等实现Javascript图片滑动旋转Animation效果，能自动播放图片或鼠标控制播放图片，图片固定的滑动在指定的区域内，类似动画播放，使用jQuery插件Step Carousel Viewer可实现该功能，而且使用简单，Step Carousel Viewer中文大概是按步旋转阅读，意思是说每张图片一张一张旋转阅读，示例如下：

使用说明
需要使用jQuery库文件(目前版本1.3)和JQuery Step Carousel Viewer库文件(目前版本1.6)

素材准备
CSS样式文件，控制图片滑动播放效果，主要有三层样式，分别是外层，中间层和图片显示层，参考如下：

1. <style type="text/css">
2. .stepcarousel {
3. position: relative;
4. border: 10px solid black;
5. overflow: scroll;
6. width: 270px;
7. height: 200px;
8. }
9. .stepcarousel .belt {
10. position: absolute;
11. left: 0;
12. top: 0;
13. }
14. .stepcarousel .panel {
15. float: left;
16. overflow: hidden;
17. margin: 10px;
18. width: 250px;
19. }
20. </style>

实例代码
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="stepcarousel.js">

二，HTML部分(三层DIV，class分别是外层stepcarousel，中间层belt和图片显示层panel)

1. <div id="mygallery" class="stepcarousel">
2. <div class="belt">
3. <div class="panel"><img src="biuuu_1.jpg" />
4. </div>
5. <div class="panel"><img src="biuuu_2.jpg" />
6. </div>
7. <div class="panel"><img src="biuuu_3.jpg" />
8. </div>
9. <div class="panel"><img src="biuuu_4.jpg" />
10. </div>
11. <div class="panel"><img src="biuuu_5.jpg" />
12. </div>
13. </div>
14. </div>

显示有三层，控制图片滑动旋转显示效果
1，外层<div id="mygallery" class="stepcarousel"></div>
2，中间层<div class="belt"></div>
3，图片显示层<div class="panel"></div>

三，Javascript部分(jQuery插件Step Carousel Viewer提示条调用)

1. <script type="text/javascript">
2. stepcarousel.setup({
3. galleryid: 'mygallery',
4. beltclass: 'belt',
5. panelclass: 'panel',
6. autostep: {enable:true, moveby:1, pause:3000},
7. panelbehavior: {speed:500, wraparound:false, persist:true},
8. defaultbuttons: {enable: true, moveby: 1, leftnav: ['biuuu_left.gif', -5, 80], rightnav:['biuuu_right.gif', -20, 80]},
9. statusvars: ['statusA', 'statusB', 'statusC'],
10. contenttype: ['inline']
11. })
12. </script>

JQuery Step Carousel Viewer代码分析

1，galleryid  图片滑动旋转外层的DIV，如：mygallery
2，beltclass  图片滑动旋转中间层的Class，如：belt
3，panelclass 图片滑动旋转图片显示层的Class，如：panel
4，autostep   自动播放设置
5，panelbehavior 图片滑动效果
6，defaultbuttons 默认按钮，左导航按钮，如：biuuu_left.gif，右导航按钮，如：biuuu_right.gif
7，statusvars 注册三个变量，包含当前显示start图片数，当前last图片数和总图片数
8，contenttype 内容设置，可选inline或external

其它控制HTML部分

1. <p>
2. <b>当前图片:</b> <span id="statusA"></span>
3. <b style="margin-left: 30px">总图片:</b> <span id="statusC"></span><br />
4. <a href="javascript:stepcarousel.stepBy('mygallery', -1)">往最后图片</a>
5. <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">向前一张图片</a> <br />
6. <a href="javascript:stepcarousel.stepTo('mygallery', 1)">往开始图片</a>
7. <a href="javascript:stepcarousel.stepBy('mygallery', 2) "style="margin-left: 80px">向前二张图片</a>
8. </p>

1，当前图片数<span id="statusA"></span> 总图片数<span id="statusC"></span>
2，往最后图片stepcarousel.stepBy('mygallery', -1)
3，往开始图片stepcarousel.stepTo('mygallery', 1)
4，向前一张图片stepcarousel.stepBy('mygallery', 1)
5，向前二张图片stepcarousel.stepBy('mygallery', 2)

实现由文字链接控制当前图片滑动，方法stepcarousel.stepBy()和stepcarousel.stepTo()上面mygallery表示图片滑动旋转外层DIV的ID，直接调用即可实现。

由上面实例可知，jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果需要了解三层关系并进行样式等设置，自动播放设置，其它控制设置等，相对比较简单，jQuery图片滑动Animation效果非常酷，值得推荐。

点我下载jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转Animation效果 DEMO