1.自动轮播+经过圆点滚动+鼠标停留在圆点上 时候暂停+离开圆点自动轮播: 复制代码 代码如下: 焦点图 *{margin:0; padding:0; list-style:none;} <BR>.clear-fix{*zoom:1;} <BR>.clear-fix:after{ content:"\0020"; clear:both; height:0; display:block;} <BR>h1{ text-align:center;} <BR>.slider{width:980px; height:365px; margin:0 auto; position:relative;} <BR>.slider .img_box{width:980px; height:365px; overflow:hidden;} <BR>.slider ul{width:100000px;} <BR>.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;} <BR>.slider .num_box{ position:absolute; bottom:10px; right:10px;} <BR>.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;} <BR>.slider .num_box a.c{ background:#C00;} 鼠标经过圆点切换 1 2 3 4 5 //鼠标经过圆点的滚动: <BR>var n=0; <BR>function slider(n){ <BR>$("ul").animate({marginLeft:-n*980},1000); <BR>$(".num_box a").removeClass("c").eq(n).addClass("c"); <BR>} <BR>t=setInterval(function(){ <BR>n++; <BR>n=n>=$(".num_box a").length?0:n; <BR>slider(n); <BR>},3000) <BR>slider(n); <BR>$(".num_box a").hover(function(){ <BR>clearInterval(t); <BR>slider($(this).index()); <BR>},function(){ <BR>t=setInterval(function(){ <BR>n=$(".num_box a.c").index()+1; <BR>n=n>=$(".num_box a").length?0:n; <BR>slider(n); <BR>},3000) <BR>}) 2.自动轮播+鼠标点击圆点滚动+离开圆点自动轮播: 复制代码 代码如下: 焦点图1 *{margin:0; padding:0; list-style:none;} <BR>.clear-fix{*zoom:1;} <BR>.clear-fix:after{ content:"\0020"; clear:both; height:0; display:block;} <BR>h1{ text-align:center;} <BR>.slider{width:980px; height:365px; margin:0 auto; position:relative;} <BR>.slider .img_box{width:980px; height:365px; overflow:hidden;} <BR>.slider ul{width:100000px;} <BR>.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;} <BR>.slider .num_box{ position:absolute; bottom:10px; right:10px;} <BR>.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;} <BR>.slider .num_box a.c{ background:#C00;} 鼠标点击圆点切换 1 2 3 4 5 var n=0; <BR>function slider(n){ <BR>$("ul").animate({marginLeft:-n*980},500); <BR>$(".num_box a").removeClass("c").eq(n).addClass("c"); <BR>} <BR>t=setInterval(function(){ <BR>n++; <BR>n=n>=$(".num_box a").length?0:n; <BR>slider(n); <BR>},3000) <BR>slider(n); <BR>$(".num_box a").click(function(){ <BR>clearInterval(t); <BR>slider($(this).index()); <br><br>$(".num_box a").mouseout(function(){ <BR>clearInterval(t); <BR>t=setInterval(function(){ <BR>n=$(".num_box a.c").index()+1; <BR>n=n>=$(".num_box a").length?0:n; <BR>slider(n) <BR>},3000); <BR>}) <br><br>}) 3.自动轮播+点击上一个,下一个,圆点滚动+离开上一个,下一个,圆点自动轮播: 复制代码 代码如下: 焦点图2 *{margin:0; padding:0; list-style:none;} <BR>.clear-fix{*zoom:1;} <BR>.clear-fix:after{ content:"\0020"; clear:both; height:0; display:block;} <BR>h1{ text-align:center;} <BR>.top{ width:980px; margin:0 auto; position:relative;} <BR>.top input{ width:100px; position:absolute; top:10px;} <BR>.top .prev{ left:0;} <BR>.top .next{ position:absolute; right:0;} <BR>.slider{width:980px; height:365px; margin:0 auto; position:relative;} <BR>.slider .img_box{width:980px; height:365px; overflow:hidden;} <BR>.slider ul{width:100000px;} <BR>.slider li{ width:980px; height:365px; float:left; background:#ccc; text-align:center; font-size:larger; line-height:365px;} <BR>.slider .num_box{ position:absolute; bottom:10px; right:10px;} <BR>.slider .num_box a{ width:10px; height:10px; background:#fff; border-radius:5px; display:inline-block;} <BR>.slider .num_box a.c{ background:#C00;} 鼠标点击按钮切换 1 2 3 4 5 var n=0; <BR>function slider(index){ <BR>$("ul").stop().animate({marginLeft:-index*980},1000); <BR>$(".num_box a").removeClass("c").eq(index).addClass("c"); <BR>} <BR>//自动播放: <BR>t=setInterval(function(){ <BR>n++; <BR>n=n>=$(".num_box a").length?0:n; <BR>slider(n); <BR>},3000); <br><br><br><br>//上一张: <BR>$(".prev").click(function(){ <BR>clearInterval(t); <BR>var index=$(".num_box a.c").index()-1; <BR>index=index<0?$(".num_box a").length-1:index; <BR>slider(index); <BR>}) <br><br>//下一张: <BR>$(".next").click(function(){ <BR>clearInterval(t); <BR>var index=$(".num_box a.c").index()+1; <BR>index=index>=$(".num_box a").length?0:index; <BR>slider(index); <br><br>}) <br><br>//点击圆点向右滚动: <BR>$(".num_box a").click(function(){ <BR>clearInterval(t); <BR>var index=$(this).index(); <BR>slider(index); <BR>}) <br><br>//鼠标移出按钮和圆点: <BR>$(".num_box a,.next,.prev").mouseout(function(){ <BR>clearInterval(t); <BR>t=setInterval(function(){ <BR>m=$(".num_box a.c").index()+1; <BR>m=m>=$(".num_box a").length?0:m; <BR>slider(m); <BR>},3000); <BR>})