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="https://www.jb51.net/jiaoben/" target="_blank"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a>
   <a node-type="picItem" href="https://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/1.jpg" /></a>
   <a node-type="picItem" href="https://www.jb51.net/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/2.jpg" /></a>
   <a node-type="picItem" href="https://www.jb51.net/jiaoben/" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a>
   <a node-type="picItem" href="https://www.jb51.net/jiaoben/" target="_blank"><img alt="特色墙纸壁纸" src="images/4.jpg" /></a>
   <a node-type="picItem" href="https://www.jb51.net/jiaoben/" target="_blank"><img alt="开放式简约现代一居室装修" src="images/5.jpg" /></a>
   <a node-type="picItem" href="https://www.jb51.net/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="https://www.jb51.net/jiaoben/" class="currentImg"><img alt="百搭落地灯" src="images/1.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="2" href="https://www.jb51.net/jiaoben/"><img alt="清新格子床品" src="images/2.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="3" href="https://www.jb51.net/jiaoben/"><img alt="特色墙纸壁纸" src="images/3.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="4" href="https://www.jb51.net/jiaoben/"><img alt="开放式简约现代一居室装修" src="images/4.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="5" href="https://www.jb51.net/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实战教程之布局篇
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动态添加几行，那新增的几行中的这些按钮都将失去任何作用，下面与大家分享四种解决方法
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()方法的功能、定义及获取第一个匹配元素内部区域高度的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery 选择器项目实例分析及实现代码
首先废话一句，jQuery选择器真心很强大！接下来详细介绍jQuery 选择器项目实例实现方式
2012-12-12
JQuery 引发两次$(document.ready)事件
ASP.net MVC 做了个工程，不知道为什么Search按就总是执行两次。
2010-01-01

jQuery满屏焦点图左右滚动特效代码分享

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具