这是标题一 这是标题二 这是标题三 这是标题四 这是标题五

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="标题" >