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
时间： 2024-10-17 16:13:32