Camera.js 轮播图动画插件(百叶窗为主)

最新推荐文章于 2024-08-10 08:38:24 发布

不语y

最新推荐文章于 2024-08-10 08:38:24 发布

阅读量684

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43215560/article/details/106241371

版权

甲方不满足于CSS3的过渡动画而提出了新的需求,通过搜索引擎找了一些解决方案,camera看起来更简单效果也不错,记个笔记

官网：http://www.pixedelic.com/plugins/camera/

GitHub地址:https://github.com/pixedelic/Camera 2015年最后一次提交了Master分支

基本用法(只在PC端使用了该插件):

引入camera.js文件和camera.css文件和jquery.min.js以及jquery.easing.js后:

HTML代码:

        <div class="camera_wrap" id="camera_wrap_1">
            <div data-src="图片路径"></div>
            <div data-src="图片路径"></div>
            <div data-src="图片路径"></div>
            <div data-src="图片路径"></div>
        </div>

JQ调用代码:

<script type="text/javascript">
  $(document).ready(function(){
    //Slider
    $('#camera_wrap_1').camera({  time: '2000',hover: 'false',loader: 'none',fx: 'random'});

  });
</script>

其中fx属性对应的是动画效果,其他的不赘述了

这样就算是一个最简单的使用方式了,具体还是看官网的各种属性介绍比较好