你的分享就是我们的动力 ---﹥

幻灯片jQuery插件SDImage

时间:2013-05-14 16:04来源:www.chengxuyuans.com 点击:

幻灯片特效想必是很多网站都会用到的,而每个JS特效不光要有源码或插件,还要能准确完美地运用到自己的网站中,这才是我们的最终目的。在这里我向大家推荐一款自己开发的一款jqeury幻灯片插件,感兴趣的童鞋可以下载运用到自己的网站何中去。

1、插件介绍

SDImage插件能够通过参数配置自行控制图片的宽高,而不会导致变形,幻灯片的张数也可以随意添加,使用方便。

2、使用方法

将jquery-1.4.1.js和jquery.SDImage.js两个JS文件和sd.css依次引用到页面中,再加入一下JS代码(源文件中有下载)

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.SDImage.js"></script>
<script type="text/javascript">
	$().SDImage({
	     imgs:new Array("img/u38.jpg", "img/u43.jpg", "img/u65.jpg", "img/u66.jpg"),
	     titles:new Array("完美特效--这是标题1", "完美特效--这是标题2", "完美特效--这是标题3", "完美特效--这是标题4"),
	     urls:new Array("http://www.baidu.com", "http://www.baidu.com", "http://www.du.com", "http://www.u.com")
		});

</script>

然后在需要插入幻灯片的位置插入一下html代码:

</pre>
<div id="hdp"></div>
<pre>
3、jquery SDImage参数配置
width:600,//图片的宽度

height:300,//图片的高度

imgs:"",//所有图片数据(必填)

titles:"",//标题数组(必填)

urls:"",//点击图片打开的链接(必填)

iszT:true,//鼠标移动到图片上的时候是否暂停切换

style:0// 0:鼠标点击切换   1:鼠标滑动切换

转载注明地址:http://www.chengxuyuans.com/jquery_plugin/SDImage.html