素材牛VIP会员

带标题图片轮播jquery插件SliderPlay2.0

 所属分类:网页特效-焦点图/幻灯片

 浏览:1559次  评论:1次  更新时间:2016-07-27
牛币素材VIP可免积分下载
带标题图片轮播jquery插件SliderPlay2.0兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:很早之前邮件联系过这个插件的作者,要求加入渐隐渐现的切换方式,SliderPlay2.0的版本已经实现了,赞一个

详细介绍

很早之前就在用这个插件,兼容、扩展、配置、样式都很棒,值得长期使用

安装方法:

载入CSS样式文件(比较少,建议放到自己的CSS里面去)

<link rel="stylesheet" type="text/css" href="./js/sliderPlay-2.0.min.css">

载入JQ库文件和必要JS插件文件(这里jQuery库文件用的360CND,可以换成本地)

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

HTML部分:

<div id='sliderPlay' style='visibility: hidden;'>
  <a href='http://www.sucainiu.com/' target="_blank"><img src='01.jpg' alt='这是标题一' height='376px' width='720px'/>a>
  <a href='http://www.sucainiu.com/' target="_blank"><img src='02.jpg' alt='这是标题二' height='376px' width='720px'/>a>
  <a href='http://www.sucainiu.com/' target="_blank"><img src='03.jpg' alt='这是标题三' height='376px' width='720px'/>a>
  <a href='http://www.sucainiu.com/' target="_blank"><img src='04.jpg' alt='这是标题四' height='376px' width='720px'/>a>
  <a href='http://www.sucainiu.com/' target="_blank"><img src='05.jpg' alt='这是标题五' height='376px' width='720px'/>a>
div>

要兼容Chrome需要在img标签中写上图片的实际宽度和高度 或者放到window.onload里面执行调用  其他浏览器不需要。

插件配置解析:

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

相关素材 - 焦点图/幻灯片

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

流***雨  
2016年09月04日

参数确实很使用,兼容不错

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)