Jquery焦點圖例項
對於很多建站的朋友來講，焦點圖並不陌生，一般的企業站，門戶站都會用到焦點圖。我們平時在寫html程式碼的時候，很多人為了省時省力，對於焦點圖都是在網上下載一些人家寫好的程式碼，直接套上去即可，很多時候我自己也是這樣來的。因為一個焦點圖有html佈局，css樣式除錯和最關鍵的 javascript語句的編寫。這些都是一個很麻煩的過程。
今天我就以例項講解，手把手教你如何寫Jquery焦點圖。Jquery是js封裝的框架，讓js的語法變得簡單，很多知名網站都在用這個框架。這裡星仔為了語法的簡單，讓大部分網友能看懂，也引用Jquery框架。
長話短說，我直接貼出原始碼，和對應的註釋。如果想要體驗效果可以點選文章後而給的示例連線。
程式碼開始------
<!DOCTYPE html>
<html>
<head>
<title>focus code powered by boyxing.com</title>
<script type="text/javascript" src="http://www.boyxing.com/skin/default/js/jquery.js"></script& gt;<!--引用Jquery框架-->
<!--css定義，可以根據需要自己定義-->
<style type="text/css">
body,ul,li{ margin:0; padding:0}
ul,li{ list-style:none;}
.focus{ margin:0 auto; height:320px; width:980px; overflow:hidden; position:relative; padding:0;}
.focus .bigpic{ position:absolute;padding:0;}
.focus .bigpic li{ width:980px;float:left;padding:0;}
.focus .btn{ overflow:hidden; height:30px;position:absolute; bottom:3px; left:50%; margin-left:-100px;}
.focus .btn li{ float:left; margin:0 10px; padding:5px; cursor:pointer; background: #fff;border:1px #900 solid;border-radius:12px; height:12px; width:12px; overflow:hidden; text-align:center; line-height:12px;opacity:0.6; float:left;}
.focus .btn li.on{ background: #990000; color:#FFFFFF;}
</style>
</head>
<body>
<!--焦點圖div部分開始-->
<div class="focus">
<div class="focuscon">
<ul class="bigpic">
<li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/fbc60c3991284b6ffdb0aa11a1708c41.jpg" border="0"></a></li>
<li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/3d41450340fe053008f8437011b7bcf5.jpg" border="0"></a></li>
<li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/c9a787ef199d47bdb3529bbdecfc989c.jpg" border="0"></a></li>
<li><a href="http://www.boyxing.com/"><img src="http://www.boyxing.com/d/file/2471eddde718c56879171814c8a52153.jpg" border="0"></a></li><!--焦點圖個數不限-->
</ul>
</div>
</div>
<!--焦點圖div部分結束-->
</body>
<script type="text/javascript">
$(document).ready(function(){
var num=$(".bigpic li").length;//獲取焦點圖的個數
var fwidth=$(".bigpic li").width();//獲取每個焦點圖的寬度
var sec=4000;//時間切換間隔
var btn = '<ul class="btn"><li class="on">1</li>';
var btnend = '</ul>';
for(i=2;i<=num;i++){btn += '<li>'+i+'</li>';};
btn += btnend;
if(num == 1){btn = null};
$(".focus").append(btn);//自動根據焦點圖個數，新增切換按鈕，如果只有一張圖片則不顯示切換按鈕。
$(".bigpic").css("width",fwidth*num);//設定大圖集合的寬度，也就是所有焦點圖寬度的和。
$(".btn li").bind("mouseover",function(){
$(this).addClass("on").siblings().removeClass("on");
var i=$(".btn li").index(this);var marginL=fwidth*i;
$(".bigpic").animate({"left":-marginL},500);}
);//滑鼠指向按鈕，焦點圖切換到對應位置，按鈕樣式改變。mouseover是滑鼠經過時，這裡也可以改成click，通過點選切換焦點圖。
picTimer = setInterval(timeset,sec); //指定sec毫秒後執行一次timeset函式。
function timeset(){
var j = $(".btn li").index($(".on"));//取得 當前焦點圖的位置，即class為on的序號。
var timew = fwidth*(j+1);
if(j == num-1){$(".btn li").eq(0).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":0},500);}
else{$(".btn li").eq(j+1).addClass("on").siblings().removeClass("on");$(".bigpic").animate({"left":-timew},500);};
};
$(".focus").mouseover(function(){clearInterval(picTimer);});
$(".focus").bind("mouseout",function(){picTimer = setInterval(timeset,sec);}
);//當滑鼠指向焦點圖或者是切換按鈕時，定時器清除，即不在執行自動切換，滑鼠離開則恢復自動切換。
})
</script>
</html>
------程式碼結束-------
本文出自：http://www.boyxing.com/article/136.html
相關推薦
Jquery焦點圖例項
對於很多建站的朋友來講，焦點圖並不陌生，一般的企業站，門戶站都會用到焦點圖。我們平時在寫html程式碼的時候，很多人為了省時省力，對於焦點圖都是在網上下載一些人家寫好的程式碼，直接套上去即可，很多時候我自己也是這樣來的。因為一個焦點圖有html佈局，css樣式除錯和最關鍵的 javascript語句的編寫。
強大的jQuery焦點圖外掛Owl Carousel + 響應式圖片（案例解析）
GitHub地址：https://github.com/OwlCarousel2/OwlCarousel2 在各式各樣的網站中，都能看到焦點圖外掛的身影。 一個好的焦點圖外掛必須滿足以下特點：1. 支援不同數量的圖片 2. 支援響應式佈局 3. 具有良好的相容性 Owl Carousel
強大的自適應jQuery焦點圖特效
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=
使用 jQuery 制作京東網的焦點圖
焦點 border col 1.3 bsp 按鈕 align none scrip HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t
jQuery 3D圓盤旋轉焦點圖 支援滑鼠滾輪
之前我們分享過很多炫酷實用的jQuery焦點圖外掛了，今天介紹的這款jQuery焦點圖非常特別，所有圖片圍成一個圓圈，組成一個立體視覺的圓盤，並且可以旋轉選擇圓盤中的圖片。另外，這款jQuery 3D圓盤旋轉焦點圖外掛還支援滑鼠滾輪，可以讓你更方便地瀏覽圖片。 線上演示原始碼下載 接下來分析一下實現這
jQuery全屏動畫焦點圖
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery焦點圖 -
jquery延時載入動畫焦點圖- 有點類似視差動畫
<script type="text/javascript">$('.DB_tab25').DB_tabMotionBanner({key:'b28551',autoRollingTime:10000, bgSpeed:500,motion:{
javascript以及jquery框架使用----輪播圖例項
本週主要學習了javascript技術以及jquery框架 1.javascript：簡稱JS，是一種直譯（無需編譯）指令碼語言，是一種動態型別，弱型別，基於原型語言，內建 支援型別。其直譯器被稱為javascript引擎，屬於瀏覽器的一部分，廣泛用於客戶端的指
jQuery手機觸屏左右滑動切換欄目和焦點圖
實現jQuery手機觸屏左右滑動用到一個滑動外掛TouchSlide，大家可以百度下。 首先來看看左右滑動切換焦點圖： JQuery程式碼 $(function(){ TouchSlide({ sl
網站開發，推薦使用SuperSlide 插件-Tab標簽切換，圖片滾動，無縫滾動，焦點圖
更新 www 展示 部分 rdquo 標簽 網上 幻燈片 dex SuperSlide 致力於解決網站大部分特效展示問題，使網站代碼規範整潔，方便維護更新。網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動
原生js實現簡單的焦點圖效果
begin pic false doctype 目標 16px urn 旅行 .cn 用到一些封裝好的運動函數，主要是定時器 效果為圖片和圖片的描述定時自動更換 <!DOCTYPE html> <html> <head>
移動端實現焦點圖
scale 內容 點擊 ice com lba fun maximum 代碼 需要下載的js是：swipe.js文件，http://www.swiper.com.cn/download/index.html 代碼： 1 <!DOCTYPE html> 2
妙味課堂實戰功能開發視頻教程 3D翻轉焦點圖/瀑布流/拖拽購物車/模塊化開發等實戰教程
1-1 html htm 簡易 原理 箱子 zip 3d旋轉 俱樂部 <HTML5夢工廠 - 碼農俱樂部視頻>├<第八期碼農俱樂部-技術之夜-3D翻轉焦點圖>│ ├1-碼農俱樂部技術之夜-3D翻轉焦點圖_.mkv│ ├2-碼農俱樂部技術之夜-3D
jQuery多圖上傳預覽
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery多圖上傳預覽</title> <script src="http://libs.baidu
jQuery原始碼解析（jQuery物件的例項屬性和方法）
1、記錄版本號 以及 修正constructor指向 jquery: core_version, constructor: jQuery, 因為jQuery.prototype={ ... } 這種寫法將自動生成的jQuery.prototype.constructor
jQuery左側選單例項
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 &l
jQuery新增標籤例項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g
jquery餅圖
具體效果如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-
Python Scrapy 煎蛋網妹子圖例項
前面介紹了爬蟲框架的一個例項，那個比較簡單，這裡在介紹一個例項 爬取 煎蛋網 妹子圖，遺憾的是 上週煎蛋網還有妹子圖了，但是這周妹子圖變成了 隨手拍， 不過沒關係，我們爬圖的目的是為了加強實戰應用，管他什麼圖了先爬下來再說。 言歸正傳 這個例項，主要是講將圖片爬了下來，儲存到本地，這個
python selenium 定位截圖例項
其實也沒有什麼好解釋的，原理就是在 截全屏圖之後， 再次二度擷取圖片 找到元素定位的圖片位置， 下面的程式碼複製貼上即可 # from selenium import webdriver # import time # driver = webdriver.Chrome() # driv