Query常用插件大全（6）cxSlide 焦点图轮换
1、下载cxSlide插件，如下图所示。
2、cxSlide插件 图片轮播效果，如下图所示。
3、载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.cxslide.js"></script>
4、CSS 样式结构
除必要属性设置外，其他样式均可自行设置。
/** * cxSlide 基本样式 * width 和 height 根据需求设置 */ .cxslide{position:relative;width:600px;height:280px;} .cxslide .box{} .cxslide .list{} .cxslide .list li{} .cxslide .btn{} .cxslide .btn li{} .cxslide .btn li.selected{} .cxslide .minus{} .cxslide .plus{}
5、/* 横向过渡 type: 'x' */ .cxslide .box{overflow:hidden;width:600px;height:280px;} .cxslide .list{overflow:hidden;width:9999px;} .cxslide .list li{float:left;position:relative;width:600px;}
6、/* 纵向过渡 type: 'y' */ .cxslide .box{overflow:hidden;width:600px;height:280px;} .cxslide .list{overflow:hidden;height:9999px;}
7、/* 透明过渡 type: 'fade' */ .cxslide .box{overflow:hidden;position:relative;width:600px;height:280px;}
8、DOM 结构
<!-- 焦点图 --> <div id="element_id" class="cxslide"> <div class="box"> <ul class="list"> <li></li> <li></li> ... <li></li> </ul> </div> <!-- 控制按钮会自动创建，可省略 --> <ul class="btn"> <li class="b_1">1</li> <li class="b_2">2</li> ... <li class="b_n">n</li> </ul> <div class="plus"></div> <div class="minus"></div> </div>
9、调用方式
$('#element_id').cxSlide();
10、动画切换
画面进入时 <li> 添加 class="in"
画面离开时 <li> 添加 class="out"
11、参数说明，如下图所示。
12、API 接口，如下图所示。
13、基础示例，常见焦点图展示，如下图所示。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxSlide 焦点图轮换</title>
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<h1>jQuery cxSlide 焦点图轮换</h1>
<div class="wrap">
<h2>常见焦点图展示</h2>
<div id="cxslide_x" class="cxslide_x">
<div class="box">
<ul class="list">
<li><a href="#1"><img src="img/_pic/slide_1.jpg
<li><a href="#2"><img src="img/_pic/slide_2.jpg
<li><a href="#3"><img src="img/_pic/slide_3.jpg
<li><a href="#4"><img src="img/_pic/slide_4.jpg
<li><a href="#5"><img src="img/_pic/slide_5.jpg
</ul>
</div>
</div>
<h2>大模块展示</h2>
<div id="cxslide_y" class="cxslide_y">
<div class="box">
<ul class="list">
<li><a href="#"><img src="img/_pic/big-mode/1.jpg
<li>
<div style="float:left;width:560px;">
<a href="#"><img src="img/_pic/big-mode/2-1.jpg
</div>
<div style="float:left;width:220px;">
<a href="#"><img src="img/_pic/big-mode/2-2.jpg
<a href="#"><img src="img/_pic/big-mode/2-3.jpg
<a href="#"><img src="img/_pic/big-mode/2-4.jpg
</div>
</li>
<li>
<div style="float:left;width:520px;">
<a href="#"><img src="img/_pic/big-mode/3-1.jpg
<a href="#"><img src="img/_pic/big-mode/3-3.jpg
</div>
<div style="float:left;width:260px;">
<a href="#"><img src="img/_pic/big-mode/3-4.jpg
</div>
</li>
<li>
<div style="float:left;width:560px;">
<a href="#"><img src="img/_pic/big-mode/4-1.jpg
</div>
<div style="float:left;width:220px;">
<a href="#"><img src="img/_pic/big-mode/4-2.jpg
<a href="#"><img src="img/_pic/big-mode/4-3.jpg
<a href="#"><img src="img/_pic/big-mode/4-4.jpg
</div>
</li>
<li><a href="#"><img src="img/_pic/big-mode/5.jpg
</ul>
</div>
</div>
<h2>自定义按钮内容</h2>
<div id="cxslide_fade" class="cxslide_fade">
<div class="box">
<ul class="list">
<li><a href="#">
<img src="img/_pic/custom-button/1.jpg">
<div class="txt">
<h4>玩转早春自驾游</h4>
春暖花开，万物复苏；
到处洋溢着花香的气息；
连上七天班的心蠢蠢欲动；
不如趁着清明小长假，来次放松心情的自驾游吧！
</div>
</a></li>
<li><a href="#">
<img src="img/_pic/custom-button/2.jpg">
<div class="txt">
<h4 style="color:#9E6452;">十二星座屌丝男把妹秘籍</h4>
<p style="color:#9E6452;">窈窕淑女，屌丝好逑。
<p style="color:#9E6452;">那么多美好的妹子，为什么一个都不是你的？
<p style="color:#9E6452;">全速武装起来，妹子和机会一样，都喜欢有准备的人。
<p style="color:#9E6452;">十二星座的单身男人们，发福利啦！
</div>
</a></li>
<li><a href="#">
<img src="img/_pic/custom-button/3.jpg">
<div class="txt">
<h4>风调日和清明天</h4>
气清景明，万物皆显，春意正浓
包含了扫墓祭祀的悼念哀思
和踏青游玩的欢笑嬉戏
好一派风调日和清明天~
</div>
</a></li>
<li><a href="#">
<img src="img/_pic/custom-button/4.jpg">
<div class="txt">
<h4 style="color:#68262C;">愚人节玩具大作战</h4>
<p style="color:#333333;">每年的愚人节都是整蛊搞笑玩具纷纷现身的时候，
<p style="color:#333333;">今年又有哪些意想不到的玩意呢？
<p style="color:#333333;">小编为你搜罗了本年度大热的整蛊玩具，
<p style="color:#333333;">在愚人节这天选上几样，"愚"乐一下你的朋友们吧~
</div>
</a></li>
<li><a href="#">
<img src="img/_pic/custom-button/5.jpg">
<div class="txt">
<h4 style="color:#8D5930;">家居大换装</h4>
<p style="color:#8D5930;">春天已经姗姗而来
<p style="color:#8D5930;">青青小草破土而出，花儿争奇斗放
<p style="color:#8D5930;">大自然到处都换上了春装
<p style="color:#8D5930;">是不是该给家居也换个装了呢！
</div>
</a></li>
<li><a href="#">
<img src="img/_pic/custom-button/6.jpg">
<div class="txt">
<h4 style="color:#0C6796;">正是赏花好时节</h4>
<p style="color:#0C6796;">天气逐渐回暖，花朵开始绽放
<p style="color:#0C6796;">或素雅，或娇艳，斑斓自若
<p style="color:#0C6796;">春风暖意花香，直把游人熏醉
<p style="color:#0C6796;">烟花三月下江南，正是赏花好时节。
</div>
</a></li>
</ul>
</div>
<ul class="btn clearfix">
<li>
<a href="#">
<img src="img/_pic/custom-button/1.jpg
<h4>玩转早春自驾游</h4>
</a>
by <a href="#">不二周助</a>
</li>
<li>
<a href="#">
<img src="img/_pic/custom-button/2.jpg
<h4>十二星座屌丝男把妹秘籍</h4>
</a>
by <a href="#">阿布大人</a>
</li>
<li>
<a href="#">
<img src="img/_pic/custom-button/3.jpg
<h4>风调日和清明天</h4>
</a>
by <a href="#">伊丽莎白酱</a>
</li>
<li>
<a href="#">
<img src="img/_pic/custom-button/4.jpg
<h4>愚人节玩具大作战</h4>
</a>
by <a href="#">不二周助</a>
</li>
<li>
<a href="#">
<img src="img/_pic/custom-button/5.jpg
<h4>家居大换装</h4>
</a>
by <a href="#">樱桃小丸子</a>
</li>
<li>
<a href="#">
<img src="img/_pic/custom-button/6.jpg
<h4>正是赏花好时节</h4>
</a>
by <a href="#">伊丽莎白酱</a>
</li>
</ul>
</div>
<h2>文档</h2>
<ul>
<li><a target="_blank" href="https://github.com/ciaoca/cxScroll">Github</a></li>
<li><a target="_blank" href="http://code.ciaoca.com/jquery/cxscroll/">中文文档</a></li>
</ul>
<h2>作者</h2>
<a target="_blank" href="http://ciaoca.com/">http://ciaoca.com/</a>
Released under the MIT license
</div>
<script src="http://cdn.staticfile.org/jquery/1.7.2/jquery.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>
