[基于jquery Circlr插件实现360度3D旋转商品展示案例 - zero________________的博客 - CSDN博客]

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动态添加

注意，是自定义属性 data-src 里面写路径 2. loader 是加载项

<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

有什么不足的地方，希望大家可以指出来，共同努力共同进步。案例中用到了很多图片，都在上面链接地址中可以下载。

原网址: 访问

创建于: 2018-10-11 06:51:04

目录: default

标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到