首先非常感谢网友涛涛的无私分享,此作品是他的一款原创图片轮播jquery插件SliderPlay2.0
小提示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="标题" >
附所有参数列表:
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
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友涛涛 滑动插件 图片播放 图片滚动 图片轮播 Jquery焦点图 SliderPlay