<!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 自制广告轮播小插件
最新推荐文章于 2022-11-10 08:40:49 发布