阅读(4436)
赞(12)
图片全屏自适应轮播
2016-08-09 15:06:31 更新
插件描述:jQuery自适应全屏轮播插件Full-Screen-Carousel
调用方法
引入JS文件
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/fullplay.js"></script>
HTML文件
<div id="bodyPage">
<img src="images/bg1.jpg" class="bg">
<img src="images/bg2.jpg" class="bg">
<img src="images/bg3.jpg" class="bg">
</div>
注意 每张img图片都要加 class="bg"
CSS
#bodyPage{ width:100%; min-height:100%; height:auto !important; height:100%; position:fixed; top:0; left:0; }
img.bg { position:absolute; top: 0px; left: 0px; z-index:1; display:none;}
调用方法
$("#bodyPage").fullImages({
ImgWidth: 1920,
ImgHeight: 980,
autoplay : 3500,
fadeTime : 1500
});
说明:
ImgWidth : 1920 图片的宽度
ImgHeight: 980 图片的高度
autoplay : 3500 幻灯片自动播放时间
fadeTime : 1500 图片淡入时间