前端内容滚动切换插件jCarouse
来源：互联网 发布：cctv发现之旅骗术知乎 编辑：程序博客网 时间：2024/05/22 03:45
最近项目要用到jQuery —款插件jCarousel，所以我研究了几天。
jCarouse插件的API http://www.zhangxinxu.com/jq/jcarousel_zh/ 。jCarouse插件的例子下载 https://github.com/jsor/jcarousel，也可以到本人的云盘（经过整理后的几个简单例子）下载 http://yunpan.cn/cASwAV7RIaxi9 访问密码 d8c2 。
下面我来说下我的理解：
1、首先导入css、js
<link rel="stylesheet" type="text/css" href="css/style.css"><!--公用的css-->
<link rel="stylesheet" type="text/css" href="css/jcarousel.data-attributes.css"><!--本页面用的css-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><!--jQuery-->
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script><!--jcarousel核心-->
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.jcarousel').jcarousel({
wrap: 'circular'
});
$('.jcarousel-control-prev').jcarouselControl({
target : '-=1'
});
$('.jcarousel-control-next').jcarouselControl({
target : '+=1'
});
});
</script><!--调用jcarousel、jcarouselControl等方法-->
2、在body中要用的<ul><li></li><li></li><li></li><li></li></ul>标签的父元素（比如：div）定义一个类（或id）为jcarousel。在上下翻链接上分别定义类（或id）jcarousel-control-prev、jcarousel-control-next。（当然以上的类（或id）名字你也可以自己定义）。
例如：
<div class="wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="images/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
</div>
</div>
简单实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>实例1</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="css/jcarousel.data-attributes.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<style type="text/css">
a {
color: #0388A6;
}
pre {
border:1px solid #000;
overflow-x:auto;
background: #222;
color: #fff;
text-shadow: none;
}
.wrapper {
max-width: 620px;
padding: 0 20px 40px 20px;
margin: auto;
}
/*.wrapper img{height: 100px;width: 200px;}
*/</style>
<!--参数说明
wrap：选项参数有"first", "last"或"both"字符串。null——包裹会关闭（默认）。
circular——支持循环滚动显示。
target：翻页参数
items：所有项的集合（即：<li></li>总数）
-->
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.jcarousel').jcarousel({
//wrap: 'circular'
});
$('.jcarousel-control-prev')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target : '-=1'
})
;
$('.jcarousel-control-next')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target : '+=1'
});
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.jcarouselPagination();
});
</script>
</head>
<body>
<div class="wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="images/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p class="jcarousel-pagination"> </p>
</div>
<div class="navigation"> <a href="#" class="prev prev-navigation">‹</a> <a href="#" class="next next-navigation">›</a>
<div class="carousel carousel-navigation">
<ul>
<li><img src="images/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
</body>
</html>
简单实例2：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connected Carousels - jCarousel Examples</title>
<!-- Shared assets -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Example assets -->
<link rel="stylesheet" type="text/css" href="css/jcarousel.connected-carousels.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
(function($) {
var connector = function(itemNavigation, carouselStage) {
return carouselStage.jcarousel('items').eq(itemNavigation.index());
};
$(function() {
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
carouselNavigation.jcarousel('items').each(function() {
var item = $(this);
var target = connector(item, carouselStage);
item
.on('jcarouselcontrol:active', function() {
carouselNavigation.jcarousel('scrollIntoView', this);
item.addClass('active');
})
.on('jcarouselcontrol:inactive', function() {
item.removeClass('active');
})
.jcarouselControl({
target: target,
carousel: carouselStage
});
});
$('.prev-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-stage')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
$('.prev-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-navigation')
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
});
})(jQuery);
</script>
</head>
<body>
<div class="wrapper">
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage">
<ul>
<li><img src="images/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="images/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">相册信息</p>
<a href="#" class="prev prev-stage"><span>‹</span></a>
<a href="#" class="next next-stage"><span>›</span></a>
</div>
<div class="navigation">
<a href="#" class="prev prev-navigation">‹</a>
<a href="#" class="next next-navigation">›</a>
<div class="carousel carousel-navigation">
<ul>
<li><img src="images/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="images/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
- 前端内容滚动切换插件jCarouse
- jCarouse--jQuery下的滚动切换传送插件
- 前端-表头固定，内容滚动
- JQUERY JFLOW图片滚动插件左右按钮控制图片内容滑动切换
- 插件85：切换文本内容
- 前端内容滑动插件bxSlider
- jQuery图片文本滚动切换插件jCarousel
- 前端插件之侧边定位随屏幕滚动而滚动
- jQuery自定义内容滚动条插件
- jQuery自定义内容滚动条插件
- fxMarquee - jQuery内容滚动插件实现上下左右滚动
- Android 自定义ScrollView 实现滚动时切换标题内容
- WEB前端-HTML-JavaScript实现内容滚动刷新的效果
- jquery图片不间断滚动切换插件 jCarousel Lite
- jCarousel jQuery下的滚动切换传送插件
- jQuery图片文本滚动切换插件jCarousel中文翻译与详解
- jQuery滚动切换传送插件jCarousel使用简介
- jCarousel jQuery下的滚动切换传送插件
- TestFlight——完美的iOS app测试方案
- Mac升级到OS X10.10系统以后cocoapods无法正常使用
- Hough变换(openCV的cvHoughLines2)
- 消息映射的實現
- HTML5的学习资料(开发设计原则)
- 前端内容滚动切换插件jCarouse
- 几种概率语言模型和参数学习方法
- oracle dbca（database configuration assistant）"删除数据库" 灰掉 不能用
- Android优质开源项目分类汇总
- 最正确的工作思维
- Android SDK更新以及ADT更新出现问题的解决办法
- 第十二周上机项目3--（5）求出对应整数的二进制形式
- 9.png图片的处理
- _ASSERTE(_CrtIsValidHeapPointer(pUserData))错误详解
