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