首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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满屏焦点图左右滚动特效代码，希望大家可以喜欢，并应用到实践中。

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

- Author -

lijiao

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

Javascript 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 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
性能优化(3) 定时任务(2) mysql.user(1) 事务(5) Mysql报错(1) MYSQL函数(1) limit(1) 锁(1) offset(1) 逻辑架构(1)
You might like
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
JS event使用方法详解
2008/04/28 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
Python strip lstrip rstrip使用方法
2008/09/06 Python
python实现自动更换ip的方法
2015/05/05 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python带参数打包exe及调用方式
2019/12/21 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
如何通过命令行进入python
2020/07/06 Python
Python txt文件如何转换成字典
2020/11/03 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
酒吧总经理岗位职责
2013/12/10 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
初中政治教学反思
2016/02/23 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
快速学习Oracle触发器和游标
2021/06/30 Oracle