图片容器的左下角加一排数组,当鼠标指向某个数字时,就显示相应的图片,并且还有图片轮播效果,使用了jQuery库,实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script>
$(document).ready(function(){
var len = $(".num li").length;
var index = 0;
var startRollOne;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
$(".box").hover(function () {
clearInterval(startRollOne);
}, function () {
startRollOne=setInterval(function () {
showImg(index);
index++;
if(index==len){
index=0;
}
},2000);
}).trigger("mouseleave");
function showImg(index){
$(".picBox").stop(true,false).animate({
marginLeft:-200*index+"px"
},1000);
$(".num li").removeClass("on").eq(index).addClass("on");
}
});
</script>
<style>
.box{
width: 200px;
height: 260px;
margin: 160px auto;
overflow: hidden;
position: relative;
}
.box p{
text-align: center;
}
.picBox{
margin: 0px;
padding: 0px;
list-style: none;
width: 1500px;
position: absolute;
}
.picBox:hover{
cursor: pointer;
}
.picBox li{
float: left;
}
.picBox img{
width: 200px;
height: 240px;
}
.num {
list-style: none;
position: absolute;
bottom: 1px;
right: 10px;
}
.num li{
text-align: center;
width: 15px;
height:15px;
background-color: white;
opacity: 1;
line-height: 18px;
float: left;
border: red solid 1px;
margin-left: 2px;
font-size: 15px;
}
.num li.on{
text-align: center;
width: 20px;
height:20px;
background-color: red;
opacity: 1;
font-size: 18px;
line-height: 20px;
float: left;
border: red solid 1px;
margin-left: 2px;
}
</style>
</head>
<body>
<div class="box">
<p> 图片轮播</p>
<ul class="picBox">
<li><img src="a.jpg" /></li>
<li><img src="b.jpg" /></li>
<li><img src="c.jpg" /></li>
<li><img src="d.jpg" /></li>
<li><img src="e.jpg" /></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>