总是用别人的例子，出错了不知道怎么改，就自己亲自写了一个，有注释，通俗易懂，希望能跟大家一起沟通交流
目录结构如下：
源代码下载地址：http://pan.baidu.com/s/1zkY5i (下载即可打开)
IE7下效果图如下:
源码下载地址:http://pan.baidu.com/s/1EcqJO (需要复制网址打开)
domo.html代码如下：
.................................................................................................................................................................................................................
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/1.css" />
<title>图片轮播</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/*初始化是向右转动*/
var dir = "right";
var timer;
var speed = 1000;
function direct(old_dir) {
dir = old_dir;
if (dir == "right") {
/*清除计时器*/
window.clearInterval(timer);
/*计时器*/
timer = window.setInterval("right()", speed);
}
if (dir == "left") {
/*清除计时器*/
window.clearInterval(timer);
/*计时器*/
timer = window.setInterval("left()", speed);
}
}
/*向左滚动*/
function left() {
var left = $("#pic").css("left");
var left1 = parseInt(left) + 230;
if (left1 > 0) {
left1 = -1840;
}
k = left1 / -230;
$("#pic").css("left", left1);
$("#banner_btn li").siblings().removeClass("current");
$("#banner_btn li").eq(k).addClass("current");
}
/*向右滚动*/
function right() {
var left = $("#pic").css("left");
var left1 = parseInt(left) - 230;
if (left1 < -1840) {
left1 = 0;
}
k = left1 / -230;
$("#pic").css("left", left1);
$("#banner_btn li").siblings().removeClass("current");
$("#banner_btn li").eq(k).addClass("current");
}
/*页面初始化执行*/
$(function() {
/*自动滚动*/
direct(dir);
/*鼠标移到数字上切换图片*/
$("#banner_btn li").hover(function() {
window.clearInterval(timer);
/*跟自己同级别的所有节点*/
$(this).siblings().removeClass("current");
$(this).addClass("current");
var i = $(this).index();
var j = -230 * parseInt(i);
$("#pic").css("left", j);
});
/*鼠标离开数字时继续滚动*/
$("#banner_btn li").mouseleave(function() {
direct(dir);
});
/*鼠标移到图片上停止滚动*/
$(".pic li img").hover(function() {
window.clearInterval(timer);
});
/*鼠标移开继续滚动*/
$(".pic li img").mouseleave(function() {
direct(dir);
});
});
</script>
</head>
<body>
<div class="a">
<pre class="pre" onClick="direct('left');">pre</pre>
<pre class="next" onClick="direct('right');">next</pre>
<div class="pic1">
<ul class="pic" id="pic">
<li><img src="images/13691345082.jpg"></li>
<li><img src="images/1353485118249.jpg"></li>
<li><img src="images/1355742153253.jpg"></li>
<li><img src="images/1363943359756.jpg"></li>
<li><img src="images/1364279216643.jpg"></li>
<li><img src="images/1366770146652.jpg"></li>
<li><img src="images/1367138383721.jpg"></li>
<li><img src="images/1368518565890.jpg"></li>
<li><img src="images/1372038703930.jpg"></li>
</ul>
</div>
<ul id="banner_btn" class="points">
<!-- creatBtnli() -->
<li num="0" class="current">1</li>
<li num="1" class="">2</li>
<li num="2" class="">3</li>
<li num="3" class="">4</li>
<li num="4" class="">5</li>
<li num="5" class="">6</li>
<li num="6" class="">7</li>
<li num="7" class="">8</li>
<li num="8" class="">9</li>
<!-- <li num="9" class="">9</li> -->
</ul>
</div>
</body>
</html>
............................................................................................................................................
css代码如下：
............................................................................................................................................
body{
margin:0;
padding:0;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
.a {
width: 800px;
margin: 0 auto;
position: relative;
}
.a .pre{
background: url("images/20120606wwwzzjsnet_40.png") no-repeat;
text-indent: -999px;
width: 39px;
height: 81px;
position: absolute;
left: 150px;
top:150px;
cursor: pointer;
}
.a .next{
background: url("images/20120606wwwzzjsnet_40.png") no-repeat 100%;
text-indent: -999px;
width: 39px;
height: 81px;
position: absolute;
right: 150px;
top:150px;
cursor: pointer;
}
.a .pic1{
width: 230px;
height: 350px;
overflow: hidden;
margin: 0 auto;
position:relative;
top:0;
left:0;
}
.a .pic{
left:0px;
width: 10000px;
position: relative;
}
.a .pic li{
float: left;
}
.a .points{
margin: 0 auto;
width: 270px;
height:30px;
}
.a .points li{
float: left;
padding: 1px 7px;
border: 1px solid;
margin: 3px;
cursor: pointer;
}
.a .points .current{
background-color: #DB5C49;
}
-----------------------------------------------------------------------------------------------------------------
源代码下载地址：http://pan.baidu.com/s/1zkY5i (下载即可打开) 欢迎大家共同沟通学习