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: 'moveTo', direction: 'left', mouseEvent: 'click', isShowTitle: true, isShowBtn: true }); //----2---- $('#sliderPlay2').sliderPlay({ speed: 500, timeout: 5000, moveType: 'moveTo', direction: 'top', 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为 moveToisShowTitle: 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="标题" >