<!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>
<title></title>
<style>
.active
{
color: Red;
}
</style>
<script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divOne">
<ul id="banner">
<li>
<img src='http://future.iptid.com/Files/News/52714d00-5a01-4c5a-9a47-41d2ec9d4ca2.jpg' /></li>
<li style="display: none">
<img src='http://future.iptid.com/Files/News/a2f39039-d17f-4085-8d99-8c214a474f34.jpg' /></li>
<li style="display: none">
<img src='http://future.iptid.com/Files/News/1fd79e78-616f-4fbf-b35f-94703a1017ee.jpg' /></li>
<li style="display: none">
<img src='http://future.iptid.com/Files/News/9317e802-7cdb-4acb-823a-49bd9d8e5923.jpg' /></li>
</ul>
<div id="dot">
<ul>
<li class="active">1 </li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
</ul>
</div>
</div>
<div id="txtTimer">
</div>
<script type="text/javascript">
var arr = new Array("6000", "8000", "9000", "9000");
var bannerlength = 0;
var i = 0;
var _timer = 0;
var _stepping = 1000;
var bannerTimer = null;
function turnChange() {
if (_timer < arr[i]) {
_timer += _stepping;
}
else {
_timer = 0;
++i;
if (i > bannerlength) {
i = 0;
}
$("#banner li").eq(i).show().siblings().hide();
$("#dot li").eq(i).addClass("active").siblings().removeClass("active");
}
$("#txtTimer").text(_timer);
};
$(function () {
bannerlength = $("#banner li").length;
bannerTimer=setInterval(turnChange, _stepping);
});
$(function () {
$("#dot li").click(function () {
clearInterval(bannerTimer);
i = $(this).index();
_timer = 0;
$("#banner li").eq(i).show().siblings().hide();
$("#dot li").eq(i).addClass("active").siblings().removeClass("active");
bannerTimer=setInterval(turnChange, _stepping);
});
});
// setTimeout("show()", arr[i]);
// function show() {
// ++i;
// $("#banner li").eq(i).show().siblings().hide();
// $("#dot li").eq(i).addClass("active").siblings().removeClass("active");
// setTimeout("show()", arr[i]);
// }
// $(function () {
// $("#dot li").click(function () {
// i = $(this).index() - 1;
// setTimeout("show()", arr[i]);
// });
// });
</script>
</body>
</html>