首页
所有分类
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高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
js实现短信发送倒计时功能（正则验证）
Feb 10 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 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
全表扫描(1) 索引树扫描(1) 绝对定位(1) lua(3) into outfile(1) 相对定位(1) geoserver(1) postcss-px2rem(1) 匹配(1) sql模式(1)
You might like
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
fsockopen pfsockopen函数被禁用，SMTP发送邮件不正常的解决方法
2015/09/20 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP7匿名类用法分析
2016/09/26 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
深入认识JavaScript中的函数
2007/01/22 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
jQuery选择器源码解读（八）：addCombinator函数
2015/03/31 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
python安装与使用redis的方法
2016/04/19 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
详解Python发送email的三种方式
2018/10/18 Python
python turtle 绘制太极图的实例
2019/12/18 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
奥地利时尚、美容、玩具和家居之家：Kastner & Öhler
2020/04/26 全球购物
linux面试题参考答案（4）
2013/01/28 面试题
仓库管理制度
2014/01/21 职场文书
上课说话检讨书大全
2014/01/22 职场文书
2014两会学习心得：榜样精神伴我行
2014/03/17 职场文书
国庆节活动总结
2014/08/26 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技