适应性更强的网页3D轮播图封装

本文介绍了一种适应性极强的网页3D轮播图实现,该轮播图采用jQuery封装,具有调用灵活、样式预设、参数可配置、图片大小自适应以及良好的浏览器兼容性等特点。只需引入jQuery库和封装好的脚本,通过简单的HTML结构即可创建轮播图。此外,还提供了btn函数用于自定义切换按钮的样式和行为。
摘要由CSDN通过智能技术生成

网页伪3D轮播图,其实就是轮播图旋转木马效果。其实在jquery插件库也有很多旋转木马的插件,但是博主封装的这个新的插件比起以上的都适应性更好。其适应性好表现在:调用灵活性高用法更简单,css样式都封装好了基本不用写,在body里面写ul>li>img标签即可,可设置参数多,甚至不同图片的大小都可以自适应轮播,各个浏览器兼容性好(包括IE,虽然我没测过IE8以下浏览器,不过IE8以上都没问题),好了,以下看代码和用法。

head引入两个文件,第一个是jquery的插件(这是1.11.0版本,当然其他版本也可以哦,不过低版本的相对IE兼容性更好),第二个是我封装好的javascript脚本

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Figure_3D.js" type="text/javascript" charset="utf-8"></script>

body里面插入轮播图,ul的id要为pic_play,当然我这里是7张图,你也可以增加减少图片,但是这里有一个重要问题是,图片数量要为单数,不能为偶数,否则会出问题,这是一个小小的bug。当然你也可以在li里面写<a><img src/></a>也是可以的。

<ul id="pic_play">
	<li><img src="img/dc1.jpg"/></li>
	<li><img src="img/dc2.jpg"/></li>
	<li><img src="img/dc3.jpg"/></li>
	<li><img src="img/dc4.jpg"/></li>
	<li><img src="img/dc5.jpg"/></li>
	<li><img src="img/dc6.jpg"/></li>
	<li><img src="img/dc7.jpg"/></li>
</ul>

css基本不用写,不过要习惯性给padding和margin归0

*{
	margin: 0;
	padding: 0;
	list-style: none;
}

重要封装脚本Figure_3D.js

//		ulwidth:父节点ul总宽度(number),
//		height:ul和图片的初始化最大高度(中间)(number),
//		liwidth:图片的初始化最大宽度(中间)(number),
//		minopacity:图片最小透明度(0~1),
//		minscale:图片最小缩放系数(0~1),
//		direction:默认轮播方向("left","right"),
//		speed:动画速度(number),
//		delayed:每张图片延时停留时间(number)(注:delayed>=speed),
//		mousestop:鼠标经过是否停止(false,true),
		function init(ulwidth,height,liwidth,minopacity,minscale,direction,speed,delayed,mousestop){
			$("#pic_play").css({"position":"relative","width":ulwidth,"height":height});
			$("#pic_play>li").css({"position"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值