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

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

posted @ 2015-10-05 17:07  最后的武士  阅读(1790)  评论(0)  编辑  收藏  举报