一个简单的jquery幻灯片插件

最新推荐文章于 2021-07-18 14:55:47 发布

kankan231

最新推荐文章于 2021-07-18 14:55:47 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/kankan231/article/details/8773430

版权

只需要定义一个有高度和宽度的div，然后调用函数，将该div的id传入即可。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>幻灯片</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
		function sliderInit(box){
			var jbox=$('#'+box);
			var w=jbox.width();
			var h=jbox.height();
			jbox.css({border:'1px solid #dfdfdf',position:'relative'});
			var divs=$('div',jbox);
			var num = divs.size();
			divs.each(function(i){
				if(i!=0)
				$(this).hide();
				$('img',this).css({width:w,height:h});
				$('a',this).css({display:'block',width:w,height:'24px',lineHeight:'24px',position:'absolute',bottom:'0px',left:'0px',background:'#000',color:'#ffffff',fontSize:'12px',opacity:'.7',fontWeight:'bold'});
			});
			var dsq=setInterval(loop,3000);
			function loop(){
				var curr=$('div:visible',jbox);
				var index=divs.index(curr);
				if(index==(num-1))
					next=0;
				else
					next=index+1;
				curr.hide();
				$(divs.get(next)).show();
				
			}
		}
		
    </script>
   <style type="text/css">
   	#slider{
		width:300px;
		height:200px;
	}
   </style>
</head>
<body>

<div id="slider">
	<div>
		<img src="images/1.jpg"/>
		<a href="#">幻灯片1</a>
	</div>
	<div>
		<img src="images/2.jpg"/>
		<a href="#">幻灯片2</a>
	</div>
	<div>
		<img src="images/3.jpg"/>
		<a href="#">幻灯片3</a>
	</div>
</div>
<script>
	sliderInit('slider');
</script>

</body>
</html>

运行效果图：

kankan231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的jquery幻灯片插件

只需要定义一个有高度和宽度的div，然后调用函数，将该div的id传入即可。幻灯片 function sliderInit(box){ var jbox=$('#'+box); var w=jbox.width(); var h=jbox.height(); jbox.css({border:'1px solid #dfd
复制链接

扫一扫