1.自動輪播經過圓點滾動滑鼠停留在圓點上時候暫停離開圓點自動輪播： 複製程式碼代碼如下: 焦點圖 *{margin:0; padding:0; list-style:none;} <BR>.clear-fix{*zoom:1 ;} <BR>.clear-fix:after{ content:"<div class="codebody" id="code40650"> <BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <BR><html xmlns="http://www.w3.org/1999/xhtml"> <BR><頭> <BR><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />> <BR><title>焦點圖1 <BR><腳本類型=“text/javascript”src=“js/jquery-1.8.0.min.js”> <BR><style type="text/css">*{margin:0;填充：0; list-style:none;} <BR>.clear-fix{*zoom:1;} <BR>.clear-fix:after{ content:" 020";明確：兩者；高度：0；顯示：區塊;} <BR>h1{ 文字對齊：中心;} <BR>.slider{寬度：980px;高度：365px；保證金：0 自動；位置：相對;} <BR>.slider .img_box{寬度：980px;高度：365px；溢出：隱藏;} <BR>.slider ul{寬度：100000px;} <BR>. slider li{ width:980px;高度：365px；浮動：左；背景：#ccc；文字對齊：居中；字體大小：較大；行高：365px;} <BR>.slider .num_box{ 位置：絕對；底部：10px；右:10px;} <BR>.slider .num_box a{ width:10px;高度：10px；背景：#fff；邊框半徑：5px;顯示：內聯塊;} <BR>.slider .num_box a.c { 背景：#C00;} 頭> 點選滑鼠圓點切換 1 2 3 4 5 a> var n=0; <BR>函數滑塊(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>滑桿(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></身體> <BR> <BR><BR> 3.自動輪播點選上一個，下一個，圓點滾動離開上一個，下一個，圓點自動輪播：<BR><BR><div class="codetitle"><span><a style="CURSOR: pointer" data="18623" class="copybut" id="copybut18623" onclick="doCopy('code18623')">複製程式碼<U> 程式碼如下：<div class="codebody" id="code18623"> <BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <BR><html xmlns="http://www.w3.org/1999/xhtml"> <BR><頭> <BR><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <BR><title>焦点图2</title> <BR><script type="text/javascript" src="js/jquery-1.8.0.min.js"> *{margin:0;パディング:0; list-style:none;} <BR>.clear-fix{*zoom:1;} <BR>.clear-fix:after{ content:" 020";クリア:両方;高さ:0; display:block;} <BR>h1{ text-align:center;} <BR>.top{ width:980px;マージン:0 自動;位置:相対;} <BR>.top input{ width:100px;位置:絶対; top:10px;} <BR>.top .prev{ left:0;} <BR>.top .next{position:absolute; right:0;} <BR>.slider{width:980px;高さ:365ピクセル;マージン:0 自動;位置:相対;} <BR>.slider .img_box{幅:980px;高さ:365ピクセル; overflow:hidden;} <BR>.slider ul{width:100000px;} <BR>.slider li{ width:980px;高さ:365ピクセル;フロート:左;背景:#ccc;テキスト整列:中央;フォントサイズ:大きい; line-height:365px;} <BR>.slider.num_box{position:absolute;下:10ピクセル; right:10px;} <BR>.slider .num_box a{ width:10px;高さ:10ピクセル;背景:#fff;境界半径: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>スライダー(n) <BR>},3000); <br><br><br><br>//上一张： <BR>$(".prev").click(function(){ <BR>clearInterval(t); <BR>varindex=$ (".num_box a.c").index()-1; <BR>index=index<0?$(".num_box a").length-1:index; <BR>slider(index); ) <BR><br>//下一张： <br>$(".next").click(function(){ <BR>clearInterval(t); <BR>varindex=$(".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>varindex=$(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>})
