仿淘寶首頁焦點圖輪播效果


剛開通博客,希望來點人氣,不過本人技術不佳,奉上今天的作品,有問題盡量反饋,我會盡力改正,大家一起進步,不是專業做插件的,難免忽略問題,請多多包涵!

因為有用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去看下吧!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM