Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade,动画顺畅,也更易于控制,非常适合于商品的展示。
主要的特点有:
支持水平或垂直方向旋转。
支持移动触摸事件。
支持滚动事件。
图片预加载处理。
可以反向和循环旋转图片。
源码下载(内含完整图片)https://download.csdn.net/download/zero________________/10424539
1.引入js文件
<!-- y这是一个jquery插件,所以先引入jquery --> <script src="js/jquery.min.js"></script> <script src="js/circlr.min.js"></script>>
2.html结构
<div class="container"> <div id="circlr"> <img data-src="images/1.png" /> <img data-src="images/2.png" /> <img data-src="images/3.png" /> ... // 这里放入所需图片即可, 图片太多可用js动态添加 <div id="loader"></div> </div> </div>
图片太多了咱们用js动态添加
<div class="container"> <div id="circlr"> <div id="loader"></div> </div> <script> // 需要准备 74个图片 for (var i = 1; i <= 74; i++) { // 创建图片 别忘更换属性 var img = $("<img data-src='images/" + i + ".png'/>"); // 追加到 circlr里面 $("#circlr").append(img);// prepend 内部的前面添加 append 内部的后面添加 } </script> </div>
3.css样式(可省略)
#circlr { cursor: move; margin: 0 auto; min-height: 100px; position: relative; } #circlr #loader { background: url(../images/loader.gif) center center no-repeat; bottom: 0; display: none; left: 0; position: absolute; right: 0; top: 0; }
4.js
<script> $(function () { // 加一个入口函数 ,意思是等上面的 74张图片加载完毕之后,才执行 var crl = circlr('circlr', { scroll: true, // 滚动滚轮也能旋转 loader: 'loader' }) }) </script>
源码下载(内含完整图片)https://download.csdn.net/download/zero________________/10424539
有什么不足的地方,希望大家可以指出来,共同努力共同进步。案例中用到了很多图片,都在上面链接地址中可以下载。