jquery简单实现图像切换效果

<!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://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li").hover(function(){
//$("img").hide().eq($(this).index()).show();
$("img").eq($(this).index()).show().siblings("img").hide(); //两条语句都一样效果。

$("img").eq($(this).index()).removeClass("off").addClass("on").siblings("img").addClass("off"); //使用类实现，效果一样。不过，第1条简便很多。
})
})
</script>
<style type="text/css">
div { width:360px; height:214px; border:1px solid #CCCCCC; position:relative; overflow:hidden; }
ul { margin:0px; padding:0px; position:absolute; bottom:1px; right:1px; }
li { float:left; list-style:none; margin:5px; padding:5px; background-color:#FF9900; font-weight:bold; }
.on { display:block; }
.off { display:none; }
</style>
</head>

<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<img src="http://p5.qhimg.com/dmtfd/360_214_//t017b795a584022f2e3.jpg" />
<img src="http://pic.meizhou.com/data/attachment/forum/201511/25/134656w58o8v0ol9fci0cl.jpg" />
<img src="http://img.bjtata.com/img/09e986a211b6c1e7.jpg" />
</div>
</body>
</html>

posted @ 2016-05-20 11:47  stma  阅读(102)  评论(0)    收藏  举报