如题,我们将实现这一效果。
首先是html5的部分:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/CarouselFigure.css">
<script type="text/javascript" src="js/CarouselFigure.js"></script>
</head>
<body>
<div id="figure_div">
<img id="img" src="p_w_picpaths/2.jpg">
<div id="dots_div">
<li id="dot1" οnmοuseοver="myChangePicture(1)"></li>
<li id="dot2" οnmοuseοver="myChangePicture(2)"></li>
<li id="dot3" οnmοuseοver="myChangePicture(3)"></li>
<li id="dot4" οnmοuseοver="myChangePicture(4)"></li>
</div>
</div>
</body>
</html>
然后我们写一个简单的CSS,使得hover时改变圆点的背景颜色。
*
{
margin: 0px;
padding: 0px;
}
div#figure_div
{
position: relative;
width: 800px;
height: 500px;
}
div#dots_div
{
position: absolute;
/* width: 100px;*/
height: 20px;
left: 352px;
bottom: 10px;
}
div#figure_div li
{
width: 16px;
height: 16px;
border: 1px solid #666;
display: inline-block;
border-radius: 8px;
}
div#figure_div li:hover
{
background-color: #EAEA06;
}
div#figure_div img
{
width: 800px;
height: 500px;
float: left;
}
然后就是js的部分了,我们用js实现自动播放和鼠标划过li时切换图片。
var now_number; function myChangePicture(picture_number) { switch(picture_number) { case 1: document.getElementById("img").src="p_w_picpaths/2.jpg"; now_number=1; document.getElementById("dot1").style.backgroundColor='#EAEA06'; document.getElementById("dot2").style.backgroundColor=''; document.getElementById("dot3").style.backgroundColor=''; document.getElementById("dot4").style.backgroundColor=''; break; case 2: document.getElementById("img").src="p_w_picpaths/3.jpg"; now_number=2; document.getElementById("dot2").style.backgroundColor='#EAEA06'; document.getElementById("dot1").style.backgroundColor=''; document.getElementById("dot3").style.backgroundColor=''; document.getElementById("dot4").style.backgroundColor=''; break; case 3: document.getElementById("img").src="p_w_picpaths/cy.jpg"; now_number=3; document.getElementById("dot3").style.backgroundColor='#EAEA06'; document.getElementById("dot1").style.backgroundColor=''; document.getElementById("dot2").style.backgroundColor=''; document.getElementById("dot4").style.backgroundColor=''; break; case 4: document.getElementById("img").src="p_w_picpaths/zjnxz.jpg"; now_number=4; document.getElementById("dot4").style.backgroundColor='#EAEA06'; document.getElementById("dot1").style.backgroundColor=''; document.getElementById("dot2").style.backgroundColor=''; document.getElementById("dot3").style.backgroundColor=''; break; } } function myChangePictureAuto() { now_number++; if (now_number==5) { now_number=1; } myChangePicture(now_number); setTimeout("myChangePictureAuto()",3000); } window.οnlοad=function(){ now_number=0; myChangePictureAuto(); }
转载于:https://blog.51cto.com/11827362/1838762