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

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

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

这是最终效果图

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

css文件连接地址：https://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:

（不好意意思，半夜写的，可能没在状态，都没检查就传上来了；地址已更新）
https://files.cnblogs.com/wyflogo/RunImg.zip

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

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

谢谢@水淼的反馈！

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

runimg.zIndex=1000;

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