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

jQuery焦点图轮播特效代码分享（3款）

Posted in Javascript onSeptember 05, 2015

本文实例讲述了jQuery焦点图轮播特效代码。分享给大家供大家参考。具体如下：
jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码，是一段拥有三种不同风格和效果的焦点图轮播代码，其中有两款最有意思，一款是在将焦点图图片分成了四块，每个图片都连接到不同的地址，并且还拥有鼠标悬浮内图时，其它图片都变暗了的效果，另外一款是，带有带缩略图和文字描述效果的焦点图轮播代码。
运行效果图：

----------------------查看效果 源码下载-----------------------

jQuery焦点图轮播特效代码分享（3款）

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
 为大家分享的jQuery焦点图轮播特效代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>多功能大气jQuery焦点图轮播特效插件jQuery cxSlide</title>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<div class="wrap">
 <div class="side">
 
 <dl class="about">
 <dt>jQuery焦点图轮播</dt>
 
 </dl>
 </div>
 <div class="main">
 <div class="inwrap">
 <h1>jQuery焦点图轮换插件jQuery cxSlide</h1>
 <h2>示例</h2>

 <div class="example">
 <h3>常见焦点图展示</h3>
 <div id="cxslide_x" class="cxslide_x">
  <div class="box">
  <ul class="list">
  <li><a href="#1"><img src="img/slide_1.jpg" width="600" height="280"></a><p>焦点图说明文字 111</p></li>
  <li><a href="#2"><img src="img/slide_2.jpg" width="600" height="280"></a><p>焦点图说明文字 222</p></li>
  <li><a href="#3"><img src="img/slide_3.jpg" width="600" height="280"></a><p>焦点图说明文字 333</p></li>
  <li><a href="#4"><img src="img/slide_4.jpg" width="600" height="280"></a><p>焦点图说明文字 444</p></li>
  <li><a href="#5"><img src="img/slide_5.jpg" width="600" height="280"></a><p>焦点图说明文字 555</p></li>
  </ul>
  </div>
 </div>
 </div>
 
 <div class="example">
 <h3>大模块展示</h3>
 <div id="cxslide_y" class="cxslide_y">
  <div class="box">
  <ul class="list">
  <li><a href="#"><img src="img/y1.jpg" width="780" height="420"></a></li>
  <li>
  <div style="float:left;width:560px;">
   <a href="#"><img src="img/y2-1.jpg" width="560" height="420"></a>
  </div>
  <div style="float:left;width:220px;">
   <a href="#"><img src="img/y2-2.jpg" width="220" height="140"></a>
   <a href="#"><img src="img/y2-3.jpg" width="220" height="140"></a>
   <a href="#"><img src="img/y2-4.jpg" width="220" height="140"></a>
  </div>
  </li>
  <li>
  <div style="float:left;width:520px;">
   <a href="#"><img src="img/y3-1.jpg" width="260" height="210"></a><a href="#"><img src="img/y3-2.jpg" width="260" height="210"></a>
   <a href="#"><img src="img/y3-3.jpg" width="520" height="210"></a>
  </div>
  <div style="float:left;width:260px;">
   <a href="#"><img src="img/y3-4.jpg" width="260" height="420"></a>
  </div>
  </li>
  <li>
  <div style="float:left;width:560px;">
   <a href="#"><img src="img/y4-1.jpg" width="560" height="420"></a>
  </div>
  <div style="float:left;width:220px;">
   <a href="#"><img src="img/y4-2.jpg" width="220" height="140"></a>
   <a href="#"><img src="img/y4-3.jpg" width="220" height="140"></a>
   <a href="#"><img src="img/y4-4.jpg" width="220" height="140"></a>
  </div>
  </li>
  <li><a href="#"><img src="img/y5.jpg" width="780" height="420"></a></li>
  </ul>
  </div>
 </div>
 </div>
 
 <div class="example">
 <h3>自定义按钮内容</h3>
 <div id="cxslide_fade" class="cxslide_fade">
  <div class="box">
  <ul class="list">
  <li><a href="#">
  <img src="img/fade1.jpg">
  <div class="txt">
   <h4>玩转早春自驾游</h4>
   <p>春暖花开，万物复苏；</p>
   <p>到处洋溢着花香的气息；</p>
   <p>连上七天班的心蠢蠢欲动；</p>
   <p>不如趁着清明小长假，来次放松心情的自驾游吧！</p>
  </div>
  </a></li>
  <li><a href="#">
  <img src="img/fade2.jpg">
  <div class="txt">
   <h4 style="color:#9E6452;">十二星座?潘磕邪衙妹丶?lt;/h4>
   <p style="color:#9E6452;">窈窕淑女，?潘亢缅稀?lt;/p>
   <p style="color:#9E6452;">那么多美好的妹子，为什么一个都不是你的？</p>
   <p style="color:#9E6452;">全速武装起来，妹子和机会一样，都喜欢有准备的人。</p>
   <p style="color:#9E6452;">十二星座的单身男人们，发福利啦！</p>
  </div>
  </a></li>
  <li><a href="#">
  <img src="img/fade3.jpg">
  <div class="txt">
   <h4>风调日和清明天</h4>
   <p>气清景明，万物皆显，春意正浓</p>
   <p>包含了扫墓祭祀的悼念哀思</p>
   <p>和踏青游玩的欢笑嬉戏</p>
   <p>好一派风调日和清明天~</p>
  </div>
  </a></li>
  <li><a href="#">
  <img src="img/fade4.jpg">
  <div class="txt">
   <h4 style="color:#68262C;">愚人节玩具大作战</h4>
   <p style="color:#333333;">每年的愚人节都是整蛊搞笑玩具纷纷现身的时候，</p>
   <p style="color:#333333;">今年又有哪些意想不到的玩意呢？</p>
   <p style="color:#333333;">小编为你搜罗了本年度大热的整蛊玩具，</p>
   <p style="color:#333333;">在愚人节这天选上几样，"愚"乐一下你的朋友们吧~</p>
  </div>
  </a></li>
  <li><a href="#">
  <img src="img/fade5.jpg">
  <div class="txt">
   <h4 style="color:#8D5930;">家居大换装</h4>
   <p style="color:#8D5930;">春天已经姗姗而来</p>
   <p style="color:#8D5930;">青青小草破土而出，花儿争奇斗放</p>
   <p style="color:#8D5930;">大自然到处都换上了春装</p>
   <p style="color:#8D5930;">是不是该给家居也换个装了呢！</p>
  </div>
  </a></li>
  <li><a href="#">
  <img src="img/fade6.jpg">
  <div class="txt">
   <h4 style="color:#0C6796;">正是赏花好时节</h4>
   <p style="color:#0C6796;">天气逐渐回暖，花朵开始绽放</p>
   <p style="color:#0C6796;">或素雅，或娇艳，斑斓自若</p>
   <p style="color:#0C6796;">春风暖意花香，直把游人熏醉</p>
   <p style="color:#0C6796;">烟花三月下江南，正是赏花好时节。</p>
  </div>
  </a></li>
  </ul>
  </div>
  <ul class="btn clearfix">
  <li>
  <a href="#">
  <img src="img/fade1.jpg" width="150" height="42">
  <h4>玩转早春自驾游</h4>
  </a>
  <p>by <a href="#">不二周助</a></p>
  </li>
  <li>
  <a href="#">
  <img src="img/fade2.jpg" width="150" height="42">
  <h4>十二星座?潘磕邪衙妹丶?lt;/h4>
  </a>
  <p>by <a href="#">阿布大人</a></p>
  </li>
  <li>
  <a href="#">
  <img src="img/fade3.jpg" width="150" height="42">
  <h4>风调日和清明天</h4>
  </a>
  <p>by <a href="#">伊丽莎白酱</a></p>
  </li>
  <li>
  <a href="#">
  <img src="img/fade4.jpg" width="150" height="42">
  <h4>愚人节玩具大作战</h4>
  </a>
  <p>by <a href="#">不二周助</a></p>
  </li>
  <li>
  <a href="#">
  <img src="img/fade5.jpg" width="150" height="42">
  <h4>家居大换装</h4>
  </a>
  <p>by <a href="#">樱桃小丸子</a></p>
  </li>
  <li>
  <a href="#">
  <img src="img/fade6.jpg" width="150" height="42">
  <h4>正是赏花好时节</h4>
  </a>
  <p>by <a href="#">伊丽莎白酱</a></p>
  </li>
  </ul>
 </div>
 </div>
 
 </div>
 </div>
</div>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.cxslide.min.js"></script>
<script>
$('#cxslide_x').cxSlide({
 plus: true,
 minus: true
});

$('#cxslide_y').cxSlide({
 type: 'y'
});

$('#cxslide_fade').cxSlide({
 events: 'mouseover',
 type: 'fade',
 speed: 300
});
</script>
</body>
</html>

更多精彩内容大家还可以参考《jQuery焦点图特效汇总》进行学习，希望大家喜欢。

以上就是为大家分享的jQuery焦点图轮播特效代码，希望大家可以喜欢。

jQuery焦点图轮播特效代码分享（3款）

- Author -

lijiao

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

Javascript 相关文章推荐
jQuery模拟超链接点击效果代码
Apr 21 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
学习vue.js条件渲染
Dec 03 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 #Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 #Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 #Javascript
javascript 判断两个日期之差的示例代码
Sep 05 #Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 #Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 #Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 #Javascript
排序失效(1) 批处理(1) ip连接(1) 临时表(1) 表变量(1) timestamp(1) T-SQL(1) 黑名单(1) Logrotate(1) 重复数据(2)
You might like
一篇入门的php Class 文章
2007/04/04 PHP
php中取得文件的后缀名？
2012/02/20 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
JavaScript ECMA-262-3 深入解析（二）：变量对象实例详解
2020/04/25 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python 等差数列末项计算方式
2020/05/03 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
飞利浦比利时官方网站：Philips比利时
2016/08/24 全球购物
马来西亚最热门的在线时尚商店：FashionValet
2018/11/11 全球购物
struct与class的区别
2014/02/03 面试题
中科软笔试题和面试题
2014/10/07 面试题
乐观大学生的自我评价
2014/01/10 职场文书
联谊活动总结范文
2015/05/09 职场文书
岗位聘任协议书
2015/09/21 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
PHP 时间处理类Carbon
2022/05/20 PHP