Html
<div id='sliderPlay' style='visibility: hidden'>
<a href='http://www.webrhai.com/' target="_blank"><img src='http://ww3.sinaimg.cn/large/adde8400gw1ebn1vgnos8j20k00ag0us.jpg' alt='这是标题一' height='376px' width='720px'/></a>
<a href='http://www.webrhai.com/' target="_blank"><img src='http://ww4.sinaimg.cn/large/adde8400gw1ebn1vktdigj20k00ag0vt.jpg' alt='这是标题二' height='376px' width='720px'/></a>
<a href='http://www.webrhai.com/' target="_blank"><img src='http://ww3.sinaimg.cn/large/adde8400gw1ebn1vokqzqj20k00ag3zo.jpg' alt='这是标题三' height='376px' width='720px'/></a>
<a href='http://www.webrhai.com/' target="_blank"><img src='http://ww4.sinaimg.cn/large/adde8400gw1ebn1vqhh67j20k00aggo0.jpg' alt='这是标题四' height='376px' width='720px'/></a>
<a href='http://www.webrhai.com/' target="_blank"><img src='http://ww2.sinaimg.cn/large/adde8400gw1ebn1vuhpzcj20k00agq4v.jpg' alt='这是标题五' height='376px' width='720px'/></a>
</div>
JavaScript
$('#sliderPlay').sliderPlay({
speed: 300,
timeout: 4000,
moveType: 'randomMove',
mouseEvent: 'click',
isShowTitle: true,
isShowBtn: true
});
//----2----
$('#sliderPlay2').sliderPlay({
speed: 500,
timeout: 5000,
moveType: 'randomMove',
mouseEvent: 'mouseover',
isShowTitle: true,
isShowBtn: true
});
附所有参数列表:
speed:700, //动画效果持续时间
timeout: 4000, //幻灯间隔时间
moveType: 'moveTo' //运动类型 可选值:【 moveTo | opacity | randomMove 】moveTo:无缝切换, opacity: 淡入淡出, randomMove:随机方向切换 [默认moveTo]
direction: 'left' //运动方向 可选值:【 left | top 】left: 向左切换, top: 向右切换 [默认left] 注:前提是moveType为 moveTo
isShowTitle: true //是否显示标题 可选值:【 true | false 】[默认为true] 注:文字内容是img的alt值
isShowBtn: true //是否显示按钮 可选值:【 true | false 】[默认为true]
mouseEvent:'click' //事件类型 可选值:【 click | mouseover 】click: 点击, mouseover: 鼠标移入 [默认click] 注:前提是isShowBtn为 true
小提示1:
外层div建议加上一句样式:style="visibility:hidden;"
不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子
这是因为sliderPlay 要等页面加载完成才能解析页面中要设置成焦点图的HTML
虽然只有不到0.01秒的瞬间但用户体验不太好,所以建议加上。不加对程序也没影响!
小提示2:
想要兼容Chrome需要在img标签中写上图片的实际宽度和高度 或者放到window.onload里面执行调用 <img src= width="xx" height="xx" alt="标题" > 其他浏览器不需要。<img src="" alt="标题" >