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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
详解javascript void(0)
Jul 13 Javascript
JavaScript中window和document用法详解
Jul 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之数据库操作详解及乱码解决!
2007/01/02 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
AngularJS动态菜单操作指令
2017/04/25 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Numpy之random函数使用学习
2019/01/29 Python
django celery redis使用具体实践
2019/04/08 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Python新手学习标准库模块命名
2020/05/29 Python
Python 创建TCP服务器的方法
2020/07/28 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
淘宝好评语大全
2014/05/05 职场文书
2014年村委会工作总结
2014/11/24 职场文书
考试没考好检讨书
2015/05/06 职场文书