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


Posted in Javascript onSeptember 07, 2015

本文实例讲述了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://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满屏焦点图左右滚动特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
JavaScript库 开发规则
Jan 31 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
js实现AI五子棋人机大战
May 28 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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
You might like
php限制文件下载速度的代码
2015/10/20 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
激活 ActiveX 控件
2006/10/09 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
Python实现图片转字符画的示例
2017/08/22 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
职工运动会邀请函
2014/01/19 职场文书
会计岗位职责模板
2014/03/12 职场文书
教师产假请假条范文
2014/04/10 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书