<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="picture-switch.css">
</head>
<body>
<div id="page">
<div id="pic">
<img style="display:block;" class="picture" id="pic-1" src="images/t01b916c314a98b2926.png" alt="1">
<img class="picture" id="pic-2" src="images/t012aa03d26132327ff.png" alt="2">
<img class="picture" id="pic-3" src="images/t016db3f957add48905.jpg" alt="3">
<img class="picture" id="pic-4" src="images/t0173ad5da790686f2a.png" alt="4">
</div>
<ul id="nav">
<li class="thumb cur" id="thumb-1">
1
</li>
<li class="thumb" id="thumb-2">
2
</li>
<li class="thumb" id="thumb-3">
3
</li>
<li class="thumb" id="thumb-4">
4
</li>
</ul>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="picture-switch.js"></script>
</body>
</html>
/* CSS Document */
*{
margin:0;
padding:0;
}
#page{
position:relative;
width:950px;
height:260px;
background:grey;
margin:20px auto;
overflow:hidden;
border:medium solid black;
}
#pic{
}
#pic .picture{
display:none;
}
#nav{
position:absolute;
right:0;
top:0;
height:100%;
width:255px;
background:#989898;
}
#nav li{
display:block;
border:thin solid black;
height:65px;
width:100%;
cursor:pointer;
vertical-align:bottom;
}
#nav li.cur{
background:white;
}
// JavaScript Document
$('#nav').on('mouseenter','li',function(){
var $this=$(this);
var index=$this.index();
$this.siblings('li').removeClass('cur');
$this.addClass('cur');
$('#pic .picture').stop(true,true).not(':eq('+index+')').hide();
$('#pic .picture').eq(index).show();
});
http://download.csdn.net/detail/qq_17615475/9485873