JS图片轮播的问题
function adjust(containerID) {
var container = $("#" + containerID);
var imgs = container.find("img");
_self = this;
_self.speed = 3;
_self.imgs = imgs;
_self.container = container;
_self.width = parseInt(container.width());
_self.length = _self.imgs.length;
_self.imgWidth = Math.round(_self.width/_self.length);
_self.run = function () {
var left = Math.abs(parseInt(_self.container.css("left")));
if (left < _self.width - _self.imgWidth) {
_self.container.css("left", (-left - _self.speed) + "px");
console.log(left);
} else {
_self.container.find("img:eq(0)").appendTo(_self.container);
_self.container.css("left", (-left + _self.imgWidth - _self.speed) + "px");
}
setTimeout(function () {
_self.run();
}, 33);
}
_self.run();
}
$(document).ready(function () {
new adjust("imgs");
});
<style type="text/css">
#imgContainer { width:400px; margin:0 auto; z-index:100; height:550px;overflow:hidden; position:relative;}
#imgs { width:1600px; z-index:10; left:0; position:absolute;}
#imgs img { width:400px; height:550px; border:0; margin:0; float:left; border-radius:35px;}
#demos img { width:100px; height:120px; float:left;}
</style>
<div id="imgContainer">
<div id="imgs" >
<img src="img/1.gif" alt="JS图片轮播的有关问题" />
<img src="img/2.gif" alt="JS图片轮播的有关问题" />
<img src="img/3.gif" alt="JS图片轮播的有关问题" />
<img src="img/4.gif" alt="JS图片轮播的有关问题" />
<img src="img/5.gif" alt="JS图片轮播的有关问题" />
<img src="img/6.gif" alt="JS图片轮播的有关问题" />
<img src="img/7.gif" alt="JS图片轮播的有关问题" />
<img src="img/8.gif" alt="JS图片轮播的有关问题" />
</div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<title>无标题文档</title>
<script type="text/javascript">
function adjust(containerID) {
var container = $("#" + containerID);
var imgs = container.find("img");
_self = this;
_self.speed = 3;
_self.imgs = imgs;
_self.container = container;
_self.width = parseInt(container.width());
_self.length = _self.imgs.length;
_self.imgWidth = Math.round(_self.width/_self.length);
_self.run = function () {
var left = Math.abs(parseInt(_self.container.css("left")));
if (left < 128*7) {
_self.container.css("left", (-left - _self.speed) + "px");
console.log(left);
} else {
_self.container.find("img:eq(0)").appendTo(_self.container);
_self.container.css("left", 0 + "px");
}
setTimeout(function () {
_self.run();
}, 33);
}
_self.run();
}
$(document).ready(function () {
new adjust("imgs");
});
</script>
<style type="text/css">
#imgContainer { width:128px; margin:0 auto; z-index:100; height:158px;position:relative;background-color:#ddd;}
#imgs { width:1600px; z-index:10; left:0; position:absolute;}
#imgs img { width:128px; height:158px; border:0; margin:0; float:left; border-radius:35px;}
#demos img { width:100px; height:120px; float:left;}
</style>
</head>
<body>
<div id="imgContainer">
<div id="imgs" >
<img src="http://avatar.csdn.net/A/E/2/1_xiaofanku.jpg" alt="JS图片轮播的有关问题" />
<img src="http://avatar.csdn.net/A/E/2/1_xiaofanku.jpg" alt="JS图片轮播的有关问题" />
<img src="http://avatar.csdn.net/A/E/2/1_xiaofanku.jpg" alt="JS图片轮播的有关问题" />
<img src="http://avatar.csdn.net/A/E/2/1_xiaofanku.jpg" alt="JS图片轮播的有关问题" />
<img src="http://avatar.csdn.net/A/E/2/1_xiaofanku.jpg" alt="JS图片轮播的有关问题" />
<img src="http://avatar.csdn.net/A/E/2/1_xiaofanku.jpg" alt="JS图片轮播的有关问题" />
<img src="http://avatar.csdn.net/A/E/2/1_xiaofanku.jpg" alt="JS图片轮播的有关问题" />
<img src="http://avatar.csdn.net/A/E/2/1_xiaofanku.jpg" alt="JS图片轮播的有关问题" />
</div>
</div>
</body>
</html>
