<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*设置左边显示的div样式*/
#big{
height: 170px;
width: 400px;
background-color: black;
position: relative;
margin-left: 100px;
margin-top: 100px;
background-image: url(t1.jpg);
background-size: cover;
overflow: hidden;
}
/*设置下面的圆点的div*/
ul{
height: 20px;
width: 150px;
position: absolute;
list-style-type: none;
margin-top:140px;
margin-left: 180px;
}
li{
height: 20px;
width: 20px;
border: 1px solid gray;
border-radius: 50px;
float: left;
background-color: lightgray;
text-align: center;
}
/*/!*设置五个div，全部绝对定位*!/放在右边*/
#first1{
height: 170px;
width: 400px;
background-color: black;
position: absolute;
margin-left: 400px;
background-image: url(t1.jpg);
background-size: cover;
}
#first2{
height: 170px;
width: 400px;
background-color: black;
position: absolute;
margin-left: 400px;
background-image: url(t2.jpg);
background-size: cover;
}
#first3{
height: 170px;
width: 400px;
margin-left: 400px;
background-color: black;
position: absolute;
background-image: url(t3.jpg);
background-size: cover;
}
#first4{
height: 170px;
width: 400px;
margin-left: 400px;
background-color: black;
position: absolute;
background-image: url(t4.jpg);
background-size: cover;
}
#first5{
height: 170px;
width: 400px;
margin-left: 400px;
background-color: black;
position: absolute;
background-image: url(t5.jpg);
background-size: cover;
}
</style>
<script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('li').mouseover(function(){
// 鼠标一定到相应的li上面然后取Li 里面的值
var aLi=$(this).html();
//console.log('div#first'+aLi);
/*外层div，触发某个Li的时候改变每一个div的间距为0,然后
如果只是向左移动div，那么移动五次之后右边就没有div了，
所以每次移动之后再移动回右边，然后把左边的div背景设置成当前div*/
$('div#first'+aLi).animate({marginLeft:'0'},1000,function(){
$(this).css('margin-left','400px')
$('div#big').css('background-image','url(t'+aLi+'.jpg)')
});
})
})
</script>
</head>
<body>
<div id="big">
<div id="first1"></div>
<div id="first2"></div>
<div id="first3"></div>
<div id="first4"></div>
<div id="first5"></div>
<ul>
<li id="second1">1</li>
<li id="second2">2</li>
<li id="second3">3</li>
<li id="second4">4</li>
<li id="second5">5</li>
</ul>
</div>
</body>
</html>
