注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery焦点图插件SliderPlay

媒体 fishcity 866浏览

jquery焦点图SliderPlay

这个太多人用了,也太过普通大众了,但是我们还是来看下吧,也许会用到,网络这样的样式有很多不是用jquery写的,但这个真真切切的是用jqeruy写的,但有没有点不合潮流的味道呢,不管了,先学了再说嘛,会用总比不会强,是吧。史上最大众的焦点图

jquery实例:SliderPlay的使用方法。

首先引入必须的jquery库,还有本例的主角sliderPlay,当然样式也是必须的。

<link rel="stylesheet" type="text/css" href="./js/sliderPlay-2.0.min.css">
<script src="http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src='./js/jquery-sliderPlay-2.0.min.js'></script>

接着来建立所需的html标签,现在知道为什么这么多网点这个焦点图吗,因为它代码非常简洁,易用,易懂。不信,请看

<div id='sliderPlay' style='visibility: hidden'>
	<a href='http://www.jqcool.net/' target="_blank"><img src='images/01.jpg' alt='这是标题一'/></a>
	<a href='http://www.jqcool.net/' target="_blank"><img src='images/02.jpg' alt='这是标题二'/></a>
	<a href='http://www.jqcool.net/' target="_blank"><img src='images/03.jpg' alt='这是标题三'/></a>
	<a href='http://www.jqcool.net/' target="_blank"><img src='images/04.jpg' alt='这是标题四'/></a>
	<a href='http://www.jqcool.net/' target="_blank"><img src='images/05.jpg' alt='这是标题五'/></a>
</div>

不要和我说你看不懂,要真不懂你可以撞墙了,因为我不懂用什么语言来表达这个的意思了。

好了,很轻松完成了上面的工作,接下来就是建立JS调用插件了,这个也是很简洁,8行代码搞定了。

$('#sliderPlay').sliderPlay({
	speed: 500, 		//动画效果持续时间
	timeout: 5000,		//幻灯间隔时间
	moveType: 'opacity',  // randomMove: 随机运动,moveTo: 切换运动 ,opacity: 淡入淡出
	mouseEvent: 'click', //事件类型,默认是 click ,mouseover
	isShowTitle: true,	//是否开始标题,开启则采用img标签alt的文字
	isShowBtn:  true    //是否显示按钮
});

好了,就这么快的完成了,赶紧上到自己的网站吧,如果你的站点需要的话。这个简洁的焦点图切换,打开的速度应该是相当的快的,也许这就是它的精华所在。

转载请注明:jQ酷 » jquery焦点图插件SliderPlay

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。