jQuery滿屏焦點圖左右滾動特效代碼分享

更新時間：2015年09月07日 08:40:22 投稿：lijiao

這篇文章主要介紹了jQuery滿屏焦點圖左右滾動特效，一段精致的焦點圖輪播代碼，有需要的小伙伴可以參考下。

本文實例講述了jQuery橫向擦除焦點圖特效。分享給大家供大家參考。具體如下：
jQuery焦點圖是一款滿屏左右滾動，帶左右按鈕，帶縮略圖，支持自動輪播的焦點圖代碼。
運行效果圖： -------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jQuery滿屏焦點圖左右滾動特效代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>住趣家居網滿屏jQuery焦點圖</title>
<link href="css/home.css" rel="stylesheet" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/home.js" type="text/javascript"></script>
</head>
<body>
<div class="zq_homeView" id="jobs_home_homeView">
 <div class="zq_pictureBox" node-type="pictureBox">
  <div class="zq_pictures" node-type="pictures">
   <a node-type="picItem" href="http://www.dhdzp.com/jiaoben/" target="_blank"><img alt="廚房收納整理工具" src="images/5.jpg" /></a>
   <a node-type="picItem" href="http://www.dhdzp.com/jiaoben/" target="_blank"><img alt="百搭落地燈" src="images/1.jpg" /></a>
   <a node-type="picItem" href="http://www.dhdzp.com/jiaoben/" target="_blank"><img alt="百搭落地燈" src="images/2.jpg" /></a>
   <a node-type="picItem" href="http://www.dhdzp.com/jiaoben/" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a>
   <a node-type="picItem" href="http://www.dhdzp.com/jiaoben/" target="_blank"><img alt="特色墻紙壁紙" src="images/4.jpg" /></a>
   <a node-type="picItem" href="http://www.dhdzp.com/jiaoben/" target="_blank"><img alt="開放式簡約現代一居室裝修" src="images/5.jpg" /></a>
   <a node-type="picItem" href="http://www.dhdzp.com/jiaoben/" target="_blank"><img alt="廚房收納整理工具" src="images/1.jpg" /></a>
  </div>
  <div class='zq_mask zq_maskLeft' node-type="maskLeft"></div>
  <div class='zq_mask zq_maskRight' node-type="maskRight"></div>
 </div>
 <div class="zq_imgBox">
  <div class="zq_imgs clearfix">
   <a node-type="smallPic" target="_blank" data-index="1" href="http://www.dhdzp.com/jiaoben/" class="currentImg"><img alt="百搭落地燈" src="images/1.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="2" href="http://www.dhdzp.com/jiaoben/"><img alt="清新格子床品" src="images/2.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="3" href="http://www.dhdzp.com/jiaoben/"><img alt="特色墻紙壁紙" src="images/3.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="4" href="http://www.dhdzp.com/jiaoben/"><img alt="開放式簡約現代一居室裝修" src="images/4.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="5" href="http://www.dhdzp.com/jiaoben/"><img alt="廚房收納整理工具" src="images/5.jpg" /></a>
  </div>
  <div class="zq_slides">
   <a href="javascript:;" class="zq_slideLeft" action-type="prev"><em> </em></a>
   <a href="javascript:;" class="zq_slideRight" action-type="next"><em> </em></a>
  </div>
 </div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是為大家分享的jQuery滿屏焦點圖左右滾動特效代碼，希望大家可以喜歡，并應用到實踐中。

您可能感興趣的文章:

jQuery EasyUi實戰(zhàn)教程之布局篇
jQuery EasyUI Layout是一種基于jQuery的布局框架，今天初次使用Jquery EasyUi，簡單的做了個布局頁面感覺還不錯，特此分享腳本之家平臺供大家學習
2016-01-01
NodeJS使用jQuery選擇器操作DOM
這篇文章主要介紹了NodeJS使用jQuery選擇器操作DOM的相關資料,需要的朋友可以參考下
2015-02-02
jQuery使用$.ajax提交表單完整實例
這篇文章主要介紹了jQuery使用$.ajax提交表單的方法,以完整實例形式分析了jQuery基于ajax數據提交的具體步驟與數據處理技巧,非常簡單實用,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下
2015-12-12
jquery 新建的元素事件綁定問題解決方案
如果在domready之后用js動態(tài)添加幾行，那新增的幾行中的這些按鈕都將失去任何作用，下面與大家分享四種解決方法
2014-06-06
使用jQuery.fn自定義jQuery翻頁插件
第一次寫jQuery插件;自己感覺寫的也不怎么樣。寫jQuery插件利用的就是這個東東jQuery.fn,寫的過程很詳細，感興趣的朋友可以了解下，希望本文對你使用自定義插件有幫助
2013-01-01
密碼框顯示提示文字jquery示例
密碼框提示文字的功能還是比較實用的，下面為大家介紹下使用jquery簡單的實現下，喜歡的朋友可以參考下
2013-08-08
使用jquery解析XML示例代碼
這篇文章通過示例為大家介紹了使用jquery解析XML的方法,經測試比較實用，需要的朋友可以參考下
2014-09-09
jQuery中innerHeight()方法用法實例
這篇文章主要介紹了jQuery中innerHeight()方法用法,實例分析了innerHeight()方法的功能、定義及獲取第一個匹配元素內部區(qū)域高度的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery 選擇器項目實例分析及實現代碼
首先廢話一句，jQuery選擇器真心很強大！接下來詳細介紹jQuery 選擇器項目實例實現方式
2012-12-12
JQuery 引發(fā)兩次$(document.ready)事件
ASP.net MVC 做了個工程，不知道為什么Search按就總是執(zhí)行兩次。
2010-01-01