做了一下午+一晚上,终于成功了。。。在网上搜了很多,好像都很复杂,所以还是自己弄了一个
javascrpt部分
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
node=0;
function imgchange() //函数要写在 $(document).ready外面,不然调用不了
{
$(“#page page”).eq(node).removeClass(“on”);
$(“#image_list a”).eq(node).fadeOut();
if(node>=3){
node=0;
}else{
node++;
}
$(“#page page”).eq(node).addClass(“on”);
$(“#image_list a”).eq(node).fadeIn();
}
$(document).ready(function(e) {
//图片轮播 js部分
$(“#image_list a”).fadeOut(); //所有图片fadeOut()
$(“#page page”).eq(node).addClass(“on”);
// $(“#image_list a:not(:first-child”).fadeOut(); 谷歌浏览器出问题,IE正常
$(“#image_list a”).eq(node).fadeIn(); //fadeIn()第一张图片
count=$(“#image_list a”).length;
timerID=setInterval(“imgchange()”,3000); //设置定时器
$(“#image”).hover(function(){ //鼠标停留在图片上,停止定时器
clearInterval(timerID);},
function(){
timerID=setInterval(“imgchange()”,3000);
});
//点击翻页功能
$(“#page > page”).click(function(){
$(“#page page”).eq(node).removeClass(“on”);
$(“#image_list a”).eq(node).fadeOut();
node=$(this).attr(“page”);
//$(this).addClass(“on”);
$(“#page page”).eq(node).addClass(“on”);
$(“#image_list a”).eq(node).fadeIn();
});
});
</script>
css部分
#image
{
position:relative;
overflow:hidden;
height:227px;
width:670px;
left: 17px;
}
#image_list a
{
position:relative;
}
#page
{
position:absolute;
z-index:1005;
right:17px;
bottom:5px;
}
page
{
background:#333333;
font-size:16px;
font-weight: bold;
color: #FFFFFF;
}
.on
{
background:#990000;
}
#image_list img
{
border:none;
}
html部分
<div id=”image”>
<div id=”page”>
<page page=0> 1 </page>
<page page=1> 2 </page>
<page page=2> 3 </page>
<page page=3> 4 </page>
</div>
<div id=”image_list”>
<a href=”#”><img src=”../Public/img/1-675×220.jpg” width=”650″ height=”227″ alt=”1″ /></a>
<a href=”#”><img src=”../Public/img/2-675×220.jpg” width=”650″ height=”227″ alt=”2″ /></a>
<a href=”#”><img src=”../Public/img/3-675×220.jpg” width=”650″ height=”227″ alt=”3″ /></a>
<a href=”#”><img src=”../Public/img/5-675×220.jpg” width=”650″ height=”227″ alt=”4″ /></a>
</div>
</div>