| <!doctype html> | |
| <html> | |
| <head> | |
| <title> test</title> | |
| <meta charset="utf-8"> | |
| <meta name="keywords" content=""> | |
| <meta name="description" content=""> | |
| <script src="jquery-1.11.3.min.js"></script> | |
| <script src="adv_plugin.js"></script> | |
| <style> | |
| *{margin:0; padding:0;list-style:none;} | |
| .ctrlbtn{ | |
| position:absolute;left:110px; bottom:15px; | |
| } | |
| .ctrlbtn li{ | |
| float:left; margin:0 5px; width:22px; height:22px; cursor:pointer; line-height:22px;background:#b29f90;color:white;border-radius:50%;text-align:center | |
| } | |
| .ctrlbtn .current{ | |
| background:#e5007e; | |
| } | |
| #adv{ | |
| width:400px; | |
| height:300px; | |
| border:1px solid red; | |
| position:relative; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="adv"> | |
| <ul class="ctrlbtn"> | |
| <li class="current">1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| <li>4</li> | |
| </ul> | |
| </div> | |
| <script> | |
| var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]; | |
| $("#adv").adv(imgs,1000); | |
| </script> | |
| </body> | |
|
</html> //以下爲插件代碼 $.fn.adv=function(imgs,timer){ |
jquery 自制廣告輪播小插件
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章