现在的位置: 首页 > 综合 > 正文

仿淘宝首页焦点图轮播效果

2012年08月09日 ⁄ 综合 ⁄ 共 1217字 ⁄ 字号 评论关闭

刚开通博客,希望来点人气,不过本人技术不佳,奉上今天的作品,有问题尽量反馈,我会尽力改正,大家一起进步,不是专业做插件的,难免忽略问题,请多多包涵!

因为有用css3所以请在高级浏览器中查看 暂不支持ie圆角!

这是最终效果图

js文件连接地址:http://files.cnblogs.com/wyflogo/runImg.js

css文件连接地址:http://files.cnblogs.com/wyflogo/runImg.css

 

使用方法是在页面中引用之后

用onload事件调用:

window.onload=function(){
var runimg=new runImg();
runimg.count=5;
runimg.imgurl=[
"<img src=\"http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>",
"<img src=\"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>",
"<img src=\"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>",
"<img src=\"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>",
"<img src=\"http://img03.taobaocdn.com/tps/i3/T1ITuTXbRnXXXXXXXX-490-170.png\"/>"];
runimg.info("#box");
runimg.action("#box");
}

runimg.count是设置轮播图的个数 最大支持5张轮播;

runimg.imgurl这里存放列表里要显示的东西 可以是<a>加<img>我的案例中偷懒了;以数组形式存放的数据 请记得用,隔开用""括起来;

然后就是找到你要引用的最外层的容器的id 然后runimg.info("#id")runimg.action("#id")就OK了。

你网页上需要的只是一个最外层的容器就可以了!

可能我语文功底有限无法表达清楚意思 附上demo:

(不好意意思,半夜写的,可能没在状态,都没检查就传上来了;地址已更新)
http://files.cnblogs.com/wyflogo/RunImg.zip

实属技术有限,不过我觉得有成果就要分享,起码分享了之后我自己得到了满足和开心;还有技术上得进步。

已经更新了!现在bug修复了,实在是自己的疏忽大意了,忘了用<a>标签测试了!

谢谢@水淼的反馈!

现在使用规则上加上一条设置图片层的z-index值,要大于0但是又要小于countNum的值,就是css的问题了,可以自行修改;

runimg.zIndex=1000;

可能表达的不清楚,可以的话就那dome去看下吧!

抱歉!评论已关闭.