编程 Javascript

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

Posted in Javascript onSeptember 07, 2015

本文实例讲述了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://3water.com/jiaoben/" target="_blank"><img alt="厨房收纳整理工具" src="images/5.jpg" /></a>
   <a node-type="picItem" href="https://3water.com/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/1.jpg" /></a>
   <a node-type="picItem" href="https://3water.com/jiaoben/" target="_blank"><img alt="百搭落地灯" src="images/2.jpg" /></a>
   <a node-type="picItem" href="https://3water.com/jiaoben/" target="_blank"><img alt="清新格子床品" src="images/3.jpg" /></a>
   <a node-type="picItem" href="https://3water.com/jiaoben/" target="_blank"><img alt="特色墙纸壁纸" src="images/4.jpg" /></a>
   <a node-type="picItem" href="https://3water.com/jiaoben/" target="_blank"><img alt="开放式简约现代一居室装修" src="images/5.jpg" /></a>
   <a node-type="picItem" href="https://3water.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="https://3water.com/jiaoben/" class="currentImg"><img alt="百搭落地灯" src="images/1.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="2" href="https://3water.com/jiaoben/"><img alt="清新格子床品" src="images/2.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="3" href="https://3water.com/jiaoben/"><img alt="特色墙纸壁纸" src="images/3.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="4" href="https://3water.com/jiaoben/"><img alt="开放式简约现代一居室装修" src="images/4.jpg" /></a>
   <a node-type="smallPic" target="_blank" data-index="5" href="https://3water.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满屏焦点图左右滚动特效代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js获取变量

Aug 24 Javascript

JavaScript 事件参考手册

Dec 24 Javascript

JS格式化数字保留两位小数点示例代码

Oct 15 Javascript

js实现文本框选中的方法

May 26 Javascript

针对初学者的jQuery入门指南

Aug 15 Javascript

深入分析jQuery的ready函数是如何工作的(工作原理)

Dec 17 Javascript

js实现商城星星评分的效果

Dec 29 Javascript

bootstrap flask登录页面编写实例

Nov 01 Javascript

vue2.0 axios跨域并渲染的问题解决方法

Mar 08 Javascript

javaScript中"=="和"==="的区别详解

Mar 16 Javascript

vue中实现动态生成二维码的方法

Feb 21 Javascript

vue实现几秒后跳转新页面代码

Sep 09 Javascript

jquery中表单多选框的一种巧妙写法

Sep 06 #Javascript

jquery中val()方法是从最后一个选项往前读取的

Sep 06 #Javascript

js实现带缓冲效果的仿QQ面板折叠菜单代码

Sep 06 #Javascript

js实现的Easy Tabs选项卡用法实例

Sep 06 #Javascript

基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片

Sep 06 #Javascript

js实现鼠标点击左上角滑动菜单效果代码

Sep 06 #Javascript

jQuery横向擦除焦点图特效代码分享

Sep 06 #Javascript