1. 自動カルーセルはドット上をスクロールし、マウスがドット上にあるときにドットを離れるときに一時停止します。 コードをコピー コード フォーカス画像 *{margin:0; ;} <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</title> <br><script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <br><style type="text/css">*{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>.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(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>},<br>}) <br><br>} )</スクリプト> <br></body> <br></html> <br> <br>3.自動轮播 点击上一个、下一个、圆点滚動 离开上一个、下一个、圆点自動轮播： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="18623" class="copybut" id="copybut18623" onclick="doCopy('code18623')"><u>复制代码</u></a></span>代码如下:</div> <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><head> <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; padding:0; list-style:none;} <br>.clear-fix{*zoom:1;} <br>.clear-fix:after{ content:"</div>
