特效介绍
仿QQ商城banner图左右滚动jQuery图片滚动插件。可以扩展图片的数量,兼容IE6
使用方法
第一步、在head区域引入<!--引入开始-->和<!--引入结束-->之间的代码。第二步、在html中,需要放置该滚动特效的地方放入下面的代码:
<div id="focus"> <ul> <li><a href="http://www.5imoban.net/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li> <li><a href="http://www.5imoban.net/" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li> <li><a href="http://www.5imoban.net/" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li> <li><a href="http://www.5imoban.net/" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li> <li><a href="http://www.5imoban.net/" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li> </ul> </div>第三步、head区域js代码参数说明:
function(){picTimer = setInterval(function() {showPics(index);index++;if(index == len) {index = 0;}},4000); //此4000代表自动播放的间隔,单位:毫秒})
注:如果想扩展图片数量,直接在最后一个li后面追加li即可。内容不变,只是链接地址和图片路径改下。