一、html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.sliper {
width: 330px;
height: 360px;
margin: 20px auto;
position: relative;
overflow: hidden;
/*border: 1px solid blue;*/
}
li {
float: left;
list-style: none;
/*border: 1px solid blue;*/
}
ul {
width: 999px;
position: absolute;
height: 360px;
left: 0px;
/*border: 1px solid red;*/
}
.jindu {
position: absolute;
bottom: 40px;
left: 100px;
/*border: 1px solid;*/
}
.jindu div {
margin-left: 2px;
border: 1px solid;
background-color: #FFFFFF;
width: 35px;
float: left;
height: 6px;
overflow: hidden;
}
.jindu div span {
display: block;
height: 6px;
background-color: red;
}
</style>
<script type="text/javascript">
var width = 0;
var index = 0;
var changeid = 0;
$(function() {
var span = $(".jindu span");
var div = $(".jindu div");
var ul = $(".sliper ul");
var li = $(".sliper li");
for (var i = 0; i < div.length; i++) {
div[i].index=i;
}
if(changeid == 0) {
changeid = setInterval(function(){
autochange(span,ul);
}, 1);
}
li.mouseover(function() {
clearInterval(changeid);
changeid = 0;
width=0;
span[index].style.width = "35px";
});
div.mouseover(function() {
index=this.index;
var left = -330 * index;
if(index > 2) {
left = 0;
}
$(ul).animate({
left: left
}, "normal");
clearInterval(changeid);
changeid = 0;
span.css("width", "0px");
this.firstElementChild.style.width = "35px";
width=0;
});
li.mouseout(function() {
if(changeid == 0) {
changeid = setInterval(function(){
autochange(span,ul);
}, 1);
}
});
});
function add(obj, w) {
$(obj).css("width", w + "px");
}
function autochange(span,ul) {
width += 0.04;
if(parseInt($(span[index]).css("width")) >= 35.1) {
$(span[index]).css("width", "0px");
width = 0;
index++;
var left = -330 * index;
if(index > 2) {
left = 0;
}
$(ul).animate({
left: left
}, "normal");
if(index >= span.length) {
index = 0;
}
}
add(span[index], width);
}
</script>
</head>
<body>
<div class="sliper">
<ul>
<li><img src="img/11f250a5f260ccaeccc1a45efe2a70d7.jpg" /></li>
<li><img src="img/6c0dde10509ae9a6a82895eb473d36ed.jpg" /></li>
<li><img src="img/9bd65af53e596e7f35539c934b525183.jpg" /></li>
</ul>
<div class="jindu">
<div><span style="width: 0px;"></span></div>
<div><span style="width: 0px;"></span></div>
<div><span style="width: 0px;"></span></div>
</div>
</div>
</body>
</html>
二、效果图