使用Jqurey制作的鼠标划过更换图片的banner

最新推荐文章于 2024-07-14 15:54:59 发布

chixiantian4162

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量132

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/RiceLee/blog/647433

版权

HTML部分代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>banner</title>
		<link type="text/css" href="style.css" rel="Stylesheet">
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script src="banner.js"></script>
    </head>
	<body>
		<header>
			<div class="banner">
				<img href="http://www.w3school.com.cn/html/html_attributes.asp" src="images/g1.png" alt="g1" class="bannercell" id="b0"></img>
				<img href="http://www.163.com/" src="images/g2.png" alt="g2" class="bannercell" id="b1"></img>
				<img href="http://youmeijia.120.haohd.cn/" src="images/g3.png" alt="g3" class="bannercell" id="b2"></img>
				<img href="http://www.baidu.com/" src="images/g4.png" alt="g4" class="bannercell" id="b3"></img>
				<img href="http://www.sina.com/" src="images/g5.png" alt="g5" class="bannercell" id="b4"></img>
				<a href="http://www.w3school.com.cn/html/html_attributes.asp" target="_blank"><img src="images/g1.png" class="bannershow" id="bshow" ></img></a>
			</div>
		</header>
    </body>
</html>

CSS样式代码

header .banner{
	display:block;
	margin:0 auto;
	width:390px;
	height:410px;
	background-color:#808080;
}

header .bannercell{
	display:block;
	width:60px;
	height:70px;
	background-color:black;
	margin:10px 10px;
	position:absolute;
}

header .bannershow{
	width:300px;
	height:390px;
	background-color:black;
	position:absolute;
	margin:10px 80px;
}

Jquery部分代码

$(function(){
	banner();
	hoverShow();
})

//设置小图片位置
function banner(){
	for(var i=0 ; i<5 ; i++){
		var bannercell = $("#b"+i);
		bannercell.css("top",getPosTop(i));
	}
}

//鼠标悬停显示图片
function hoverShow(){
	$(".bannercell").hover(function(){
		$("#bshow").attr({"src":$(this).attr("src"),"alt":$(this).attr("alt")});
		$("a").attr("href",$(this).attr("href"))
	})
}

function getPosTop(i){
		return 10+i*80;
	}

转载于:https://my.oschina.net/RiceLee/blog/647433