剛開通博客,希望來點人氣,不過本人技術不佳,奉上今天的作品,有問題盡量反饋,我會盡力改正,大家一起進步,不是專業做插件的,難免忽略問題,請多多包涵!
因為有用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去看下吧!