3種不同方式的焦點圖輪播特效分享_表單特效

1.自動輪播經過圓點滾動滑鼠停留在圓點上時候暫停離開圓點自動輪播：

複製程式碼 代碼如下:

焦點圖 *{margin:0; padding:0; list-style:none;} .clear-fix{*zoom:1 ;} .clear-fix:after{ content:" > 焦點圖1 *{margin:0;填充：0; list-style:none;} .clear-fix{*zoom:1;} .clear-fix:after{ content:" 020";明確：兩者；高度：0；顯示：區塊;} h1{ 文字對齊：中心;} .slider{寬度：980px;高度：365px；保證金：0 自動；位置：相對;} .slider .img_box{寬度：980px;高度：365px；溢出：隱藏;} .slider ul{寬度：100000px;} . slider li{ width:980px;高度：365px；浮動：左；背景：#ccc；文字對齊：居中；字體大小：較大；行高：365px;} .slider .num_box{ 位置：絕對；底部：10px；右:10px;} .slider .num_box a{ width:10px;高度：10px；背景：#fff；邊框半徑：5px;顯示：內聯塊;} .slider .num_box a.c { 背景：#C00;} 頭>

點選滑鼠圓點切換 1 2 3 4 5

a> var n=0; 函數滑塊(n){ $("ul").animate({marginLeft:-n*980},500); $(".num_box a").removeClass("c").eq(n ).addClass("c"); } t=setInterval(function(){ n ; n=n>=$(".num_box a").length?0: n; slider(n) ; },3000) 滑桿(n); $(".num_box a").click(function(){ clearInterval(t ); slider($(this).index());

$(" .num_box a").mouseout(function(){ clearInterval(t); t=setInterval(function(){ n=$(".num_box a.c").index() 1; n=n>=$(".num_box a").length?0: n; slider(n) },3000)

} )

3.自動輪播點選上一個，下一個，圓點滾動離開上一個，下一個，圓點自動輪播：

複製程式碼 程式碼如下： 焦点图2 *{margin:0;パディング:0; list-style:none;} .clear-fix{*zoom:1;} .clear-fix:after{ content:" 020";クリア:両方;高さ:0; display:block;} h1{ text-align:center;} .top{ width:980px;マージン:0 自動;位置:相対;} .top input{ width:100px;位置:絶対; top:10px;} .top .prev{ left:0;} .top .next{position:absolute; right:0;} .slider{width:980px;高さ:365ピクセル;マージン:0 自動;位置:相対;} .slider .img_box{幅:980px;高さ:365ピクセル; overflow:hidden;} .slider ul{width:100000px;} .slider li{ width:980px;高さ:365ピクセル;フロート:左;背景:#ccc;テキスト整列:中央;フォントサイズ:大きい; line-height:365px;} .slider.num_box{position:absolute;下:10ピクセル; right:10px;} .slider .num_box a{ width:10px;高さ:10ピクセル;背景:#fff;境界半径:5px; display:inline-block;} .slider .num_box a.c{background:#C00;}

ネズミ标点击按钮切换

1 2 3 4 5

//上一张： $(".prev").click(function(){ clearInterval(t); varindex=$ (".num_box a.c").index()-1; index=index slider(index); )

//下一张： $(".next").click(function(){ clearInterval(t); varindex=$(".num_box a.c ").index() 1; index=index>=$(".num_box a").length?0:index; slider(index);

})

//点击圆点方向右滚動作： $(".num_box a").click(function(){ clearInterval(t); varindex=$(this).index (); slider(index); })

// ネズミ标移出按钮和点： $(".num_box a,.next,.prev").mouseout (function(){ clearInterval(t); t=setInterval(function(){ m=$(".num_box a.c").index() 1; m=m> =$(".num_box a").length?0:m; slider(m) })

3種不同方式的焦點圖輪播特效分享_表單特效

點選滑鼠圓點切換

ネズミ标点击按钮切换

相關文章