jQuery制作的幻灯片``

最新推荐文章于 2024-07-10 21:05:14 发布

简生

最新推荐文章于 2024-07-10 21:05:14 发布

阅读量739

点赞数

分类专栏： JavaScript 文章标签： jquery function stylesheet class xhtml html

本文链接：https://blog.csdn.net/jiancm2001/article/details/6868094

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

slide-style.css文件:

#slide-show {
	width:930px;
	height:300px;
	position:relative;
	border:1px solid #aaa;
}

#slide-img {
	width:930px;
	height:300px;
	position:absolute;
}

#slide-img img {
	width:930px;
	height:300px;
	display:none;
}

#slide-num {
	position:absolute;
	height:20px;
	right:10px;
	bottom:20px;
}

#slide-num ul {
	list-style:none;
	display:block;
}

#slide-num ul li {
	display:inline;
	width:20px;
	height:20px;
	border:1px solid #aaa;
	background:#3a91e7;
	padding:2px 5px;
	text-align:center;
	cursor:pointer;
	font-size:14px;
	font-weight:bold;
	color:#fff;
}

#slide-num ul li.now-num {
	background:#aaa;
	background:rgba(0,0,0,0.5);
/*	color:#3a91e7;*/
}

html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<!--<script src="jquery.js" type="text/javascript"></script>-->
<link href="slide-style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="slide-show">
    	<div id="slide-img">
        	<img src="show1.jpg" style="display:block;" class="img-show"/>
            <img src="show2.jpg" />
            <img src="show3.jpg" />
        </div>
        <div id="slide-num">
        	<ul>
            	<li class="now-num">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
    
<script type="text/javascript">
	function autoFlide() {
		var nownum = $("#slide-num ul li.now-num");
		var imgshow = $("#slide-img img.img-show");
		var nownumnext = $("#slide-num ul li.now-num").next();
		var imgshownext = $("#slide-img img.img-show").next();
		//alert(nownumnext.html());
		if(!nownumnext.html()) {
			nownumnext = $("#slide-num ul li").eq(0);
			imgshownext = $("#slide-img img").eq(0);
		}
		nownum.removeClass();
		nownumnext.addClass("now-num");
		$("#slide-img img").removeClass();
		imgshownext.addClass("img-show");
		imgshow.slideUp(100,function() {
			imgshownext.slideDown(200);
		});
	}
	var time = 5000;
	var autoslide = setInterval("autoFlide()",time);

	$(document).ready(function() {
		$("#slide-num ul li").each(function(i){
			$(this).click(function() {
				if(!$(this).attr("class")) {
					window.clearInterval(autoslide);
					$("#slide-num ul li").removeClass();
					$(this).addClass("now-num");
					$("#slide-img img.img-show").slideUp(100,function() {
						$("#slide-img img").removeClass();
						$("#slide-img img").eq(i).slideDown(200,function() {
							$(this).addClass("img-show");
						});
					});
				}
			}).hover(
				function() {
					window.clearInterval(autoslide);
				},
				function() {
					autoslide = setInterval("autoFlide()",time);
				}
			);
		});
	});
	
	
	
</script>
</body>
</html>