码迷,mamicode.com
首页 > 其他好文 > 详细

camera插件的使用-做出自适应轮播图

时间:2015-10-05 18:12:04      阅读:791      评论:0      收藏:0      [点我收藏+]

标签:

js调用

<script>
    jQuery(function(){

        jQuery(‘#camera_wrap_4‘).camera({
            transPeriod: 500,
            time: 3000,
            height: ‘600‘,
            loader: ‘false‘,
            pagination: true,
            thumbnails: false,
            hover: false,
            playPause: false,
            navigation: false,
            opacityOnGrid: false,
            imagePath: ‘assets/images/‘
        });

    });

</script>

html

<div class="camera_wrap camera_emboss pattern_1" id="camera_wrap_4">
    <div data-thumb="assets/images/slides/thumbs/img1.jpg" data-src="assets/images/slides/img2.jpg">
        <h2>We develop.</h2>
    </div> 
    <div data-thumb="assets/images/slides/thumbs/img2.jpg" data-src="assets/images/slides/img4.jpg">
    </div>
    <div data-thumb="assets/images/slides/thumbs/img3.jpg" data-src="assets/images/slides/img3.jpg">
    </div> 
</div><!-- #camera_wrap_3 -->

引用的css+js文件

<link rel=‘stylesheet‘ id=‘camera-css‘  href=‘assets/css/camera.css‘ type=‘text/css‘ media=‘all‘>
<script type=‘text/javascript‘ src=‘assets/js/jquery.min.js‘></script>
<script type=‘text/javascript‘ src=‘assets/js/jquery.mobile.customized.min.js‘></script>
<script type=‘text/javascript‘ src=‘assets/js/jquery.easing.1.3.js‘></script> 
<script type=‘text/javascript‘ src=‘assets/js/camera.min.js‘></script> 

index.html页面全部代码

<!doctype html>
<html>
<head>
<title>图片自适应截取</title>
<meta charset="utf-8"/>
<link rel=‘stylesheet‘ id=‘camera-css‘  href=‘assets/css/camera.css‘ type=‘text/css‘ media=‘all‘>
<script type=‘text/javascript‘ src=‘assets/js/jquery.min.js‘></script>
<script type=‘text/javascript‘ src=‘assets/js/jquery.mobile.customized.min.js‘></script>
<script type=‘text/javascript‘ src=‘assets/js/jquery.easing.1.3.js‘></script> 
<script type=‘text/javascript‘ src=‘assets/js/camera.min.js‘></script> 
</head>
<body>
<div class="camera_wrap camera_emboss pattern_1" id="camera_wrap_1">
<div data-thumb="assets/images/slides/thumbs/img1.jpg" data-src="assets/images/slides/img2.jpg">
    <!--
    <div class="camera_caption fadeFromBottom">
        Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
    </div>
    -->
</div> 
<div data-thumb="assets/images/slides/thumbs/img2.jpg" data-src="assets/images/slides/img4.jpg">

</div>
<div data-thumb="assets/images/slides/thumbs/img3.jpg" data-src="assets/images/slides/img3.jpg">

</div> 
</div><!-- #camera_wrap_3 -->
</body>
<script>
jQuery(function(){

    jQuery(‘#camera_wrap_1‘).camera({
        transPeriod: 500,
        time: 3000,
        height: ‘600‘,
        loader: ‘false‘,
        pagination: true,
        thumbnails: false,
        hover: false,
        playPause: false,
        navigation: false,
        opacityOnGrid: false,
        imagePath: ‘assets/images/‘
    });

});

</script>
</html>

目录结构

技术分享点击下载
压缩包下载地址 http://pan.baidu.com/s/1dDhm06l

camera插件的使用-做出自适应轮播图

标签:

原文地址:http://www.cnblogs.com/xyws/p/4855961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!