jquery 自制广告轮播小插件

最新推荐文章于 2022-11-10 08:40:49 发布

X月亮代表我的心

最新推荐文章于 2022-11-10 08:40:49 发布

阅读量587

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/XiaoKangmemeda/article/details/49872657

版权

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!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){ var i=0; var selector=this.selector;//this==>>adv && selector==>>#adv img=new Image();//创建img对象 img.src=imgs[i];//指定路径 img.οnlοad=function(){ $(selector).append(img);//在adv中显示图片 } function lunbo(){//定义轮播 i++; if(i>=imgs.length){ i=0; } img.src=imgs[i]; img.οnlοad=function(){ $(selector).append(img); } $('.ctrlbtn li').eq(i).addClass('current').siblings().removeClass('current'); } var t=setInterval(function(){lunbo()},timer);//循环播放; $(function(){//手动停止定时器 $(selector).hover(function(){ clearInterval(t); t=null; },function(){ t=setInterval(function(){lunbo()},timer); }); $('.ctrlbtn li').mouseover(function(){//手动看图 clearInterval(t); $(this).addClass('current').siblings().removeClass('current'); var i=$('.ctrlbtn li').index(this); img.src=imgs[i]; }); }) }

X月亮代表我的心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 自制广告轮播小插件

摘要分享：唯美散文旧时光没有一条路漫无尽头，没有一段青春挥之不去，没有一份心情不能释怀。曾几何时，有人路过我们的倾城时光，无奈，天不时地不利人不和，生命里的万水千山任你一一告别。原来，那哒哒的马蹄声是美丽的错误，你不是归人，是个过客。天依旧很蓝，风依旧再吹，日子就这样苍白无力地继续着。带着一缕伤感，带着一些彷徨，带着一点叹息。挥不尽是我落寞的惆怅。青春是道明媚的忧伤，一如满地曾经的繁花，花落而有痕，落后仍有情。原来不管你是谁，有着怎样的过去和现在，都要生活的不太执着才好。人，总要学着
复制链接

扫一扫

专栏目录