基于jQuery slide插件的轮播大图，带标题及简介，附源码
1、首先看效果
2、源码
1)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- Demo start -->
<!-- css -->
<link rel="stylesheet" href="css/slide.css">
<style>
.ck-slide { width: 1000px; height: 400px; margin: 0 auto;}<!--图片宽高-->
.ck-slide ul li a img {width: 1000px; height: 400px;}<!--图片宽高-->
.ck-slidebox-title ul {height:224px;}<!--标题简介高度-->
</style>
<!-- html -->
<div class="ck-slide">
<ul class="ck-slide-wrapper">
<li>
<a href="javascript:"><img src="images/1.jpg" alt=""></a>
</li>
<li style="display:none">
<a href="javascript:"><img src="images/2.jpg" alt=""></a>
</li>
<li style="display:none">
<a href="javascript:"><img src="images/3.jpg" alt=""></a>
</li>
<li style="display:none">
<a href="javascript:"><img src="images/4.jpg" alt=""></a>
</li>
<li style="display:none">
<a href="javascript:"><img src="images/5.jpg" alt=""></a>
</li>
</ul>
<!--<a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a>-->
<!--圆点start-->
<div class="ck-slidebox">
<div class="slideWrap">
<ul class="dot-wrap">
<li class="current"><em>1</em></li>
<li><em>2</em></li>
<li><em>3</em></li>
<li><em>4</em></li>
<li><em>5</em></li>
</ul>
</div>
</div>
<!--圆点end-->
<!--文字start-->
<div class="ck-slidebox-title">
<div class="slideWrap-title">
<ul class="title-wrap">
<li>
<div class="title">
<h3>法巴银行：12月加息概率提升 预计非农增长15万人</h3>
</div>
<div class="brief">
<p>法国巴黎银行(BNP Paribas)周四(11月5日)发布客户报告称，在美联储(Fed)主席耶伦(Janet L. Yellen)偏鹰派声明发布后，12月加息几率已经提升至50%以上。
不过，该行指出，市场仍有许多因素需要考虑，例如周五的非农数据。该行预测此次非农数据表现将比较中性，就业人数预计增长15万人，但这并不足以推动美联储12月加息。</p>
</div>
</li>
<li style="display:none">
<div class="title">
<h3>近半年地下钱庄涉案金额8000多亿 </h3>
</div>
<div class="brief">
<p>今年以来跨境资本流动风险加大，其中地下钱庄等非法渠道也成为资本流出的重要渠道。国家外汇管理局管理检查司处长欧阳雄昨日在接受新华社记者采访时表示，从破获的案件看，地下钱庄涉案金额越来越大，交易手段愈发隐蔽，且日益成为贪腐资金的“洗钱工具”，甚至一些银行人员也当起了“中介”。</p>
</div>
</li>
<li style="display:none">
<div class="title">
<h3>商务部回应百货“关店潮” 实体零售重在转型</h3>
</div>
<div class="brief">
<p>商务部昨日召开例行新闻发布会。新闻发言人沈丹阳在回应媒体关于传统百货会否出现“关门潮”的担忧时表示，伴随网络零售的高速增长，实体零售经营压力加大，“关闭退租”现象有所增加。对实体零售企业，商务部将继续积极支持、引导其创新、转型发展。</p>
</div>
</li>
<li style="display:none">
<div class="title">
<h3>钢铁行业困难重重 钢价“熊市不言底”</h3>
</div>
<div class="brief">
<p>我国钢铁行业进入“严冬”的观点已经被市场认同，后期过剩产能将进一步被淘汰。在这个过程中，上游行业将受到波及，黑色系商品价格将一路下跌。</p>
</div>
</li>
<li style="display:none">
<div class="title">
<h3>金博会闭幕 金融机构拼创新</h3>
</div>
<div class="brief">
<p>中国银行北京市分行的展台正通过裸眼3D、全息影像等高科技手段展示着“中行信用卡发卡30周年”、出国金融、助力民生等系列活动，前来咨询办理业务的观众络绎不绝。
农行北京分行作为第十一届北京国际金融博览会重要参展单位，此次金博会展出期间，该行围绕“互联网+农业银行”、“小农的幸福生活”、“京津冀协同发展”等贴近民生福祉的主题进行展示。 </p>
</div>
</li>
</ul>
</div>
</div>
<!--文字end-->
</div>
<!-- html end -->
<!-- js -->
<script src="jquery-1.8.3.min.js"></script>
<!--<script src="js/slide.min.js"></script>-->
<script src="slide.js"></script>
<script>
$('.ck-slide').ckSlide({
autoPlay: true,//默认为不自动播放，需要时请以此设置
dir: 'x',//默认效果淡隐淡出，x为水平移动，y 为垂直滚动
interval:3000//默认间隔2000毫秒
});
</script>
<!-- Demo end -->
</body>
</html>2) slide.js
(function($){
$.fn.ckSlide = function(opts){
//.extend() 扩展jQuery类，添加ckSlide方法，参数是对象类型{}
opts = $.extend({}, $.fn.ckSlide.opts, opts);
this.each(function(){
var slidewrap = $(this).find('.ck-slide-wrapper');//轮播元素父对象
var slide = slidewrap.find('li');//获取<li>对象集
var count = slide.length;//计算对象集长度
var that = this;//存放父对象
var index = 0;//起始位置
var time = null;
$(this).data('opts', opts);//给轮播对象添加参数 数据
// next
$(this).find('.ck-next').on('click', function(){
if(opts['isAnimate'] == true){
return;
}
var old = index;
if(index >= count - 1){
index = 0;
}else{
index++;
}
change.call(that, index, old);//调用图片切换方法，.call() 每个JS函数都包含的一个非继承而来的方法，主要用来指定函数的作用域 that ，通常不严谨写法是change()，有可能会函数冲突。
});
// prev
$(this).find('.ck-prev').on('click', function(){
if(opts['isAnimate'] == true){
return;
}
var old = index;
if(index <= 0){
index = count - 1;
}else{
index--;
}
change.call(that, index, old);
});
//点击切换相应序号的图片
$(this).find('.ck-slidebox li').each(function(cindex){
$(this).on('click.slidebox', function(){
change.call(that, cindex, index);
index = cindex;
});
});
//自己添加——鼠标移入小圆点切换轮播图片
$(this).find('.ck-slidebox li').each(function(cindex){
$(this).on('mouseover.slidebox', function(){
change.call(that, cindex, index);
index = cindex;
});
});
// 鼠标悬停停止自动播放，显示左右切换按钮
$(this).on('mouseover', function(){
if(opts.autoPlay){
clearInterval(time);
}
$(this).find('.ctrl-slide').css({opacity:0.6});
});
// 鼠标离开轮播界面，开始自动播放，同时隐藏按钮
$(this).on('mouseleave', function(){
if(opts.autoPlay){
startAtuoPlay(opts.interval);
}
$(this).find('.ctrl-slide').css({opacity:0.1});
});
startAtuoPlay(opts.interval);
// 自动滚动播放
function startAtuoPlay(inum){
if(opts.autoPlay){
time = setInterval(function(){
var old = index;
if(index >= count - 1){
index = 0;
}else{
index++;
}
change.call(that, index, old);
}, inum);//2秒
}
}
// 修正box 标记居中
var box = $(this).find('.ck-slidebox');
box.css({
'margin-left':-(box.width() / 2)
})
// dir 移动方向参数
switch(opts.dir){
case "x":
opts['width'] = $(this).width();
slidewrap.css({
'width':count * opts['width']
});
slide.css({
'float':'left',
'position':'relative',
'margin-left':'0px'
});
//.wrap()包裹页面已经定义的.ck-slide-wrapper以及子元素
slidewrap.wrap('<div class="ck-slide-dir"></div>');
slide.show();
break;
case "y": //添加垂直移动参数
opts['height'] = $(this).height();
slidewrap.css({
'height':count * opts['height']
});
slide.css({
'float':'left',
'position':'relative',
'margin-top':'0px'
});
slidewrap.wrap('<div class="ck-slide-dir"></div>');
slide.show();
break;
}
});
};
function change(show, hide){
//获取之前设置在ckSlide对象上的参数 数据
var opts = $(this).data('opts');
//水平移动
if(opts.dir == 'x'){
var x = show * opts['width'];
//animate() 与css()执行结果相同，但是过程不同，前者有渐变动画效果
$(this).find('.ck-slide-wrapper').stop().animate({'margin-left':-x}, function(){opts['isAnimate'] = false;});
opts['isAnimate'] = true;//图片在移动过程中设置按钮点击不可用，确保每一次轮播视觉上执行完成，
}else if(opts.dir == 'y'){//垂直移动——自己添加
var y = show * opts['height'];
$(this).find('.ck-slide-wrapper').stop().animate({'margin-top':-y}, function(){opts['isAnimate'] = false;});
opts['isAnimate'] = true;
}
else{
//默认的淡隐淡出效果
$(this).find('.ck-slide-wrapper li').eq(hide).stop().animate({opacity:0});
$(this).find('.ck-slide-wrapper li').eq(show).show().css({opacity:0}).stop().animate({opacity:1});
}
//切换对应标记的颜色
$(this).find('.ck-slidebox li').removeClass('current');
$(this).find('.ck-slidebox li').eq(show).addClass('current');
//切换title块
$(this).find('.ck-slidebox-title li').eq(hide).stop().animate({opacity:0},'fast').hide();
$(this).find('.ck-slidebox-title li').eq(show).show().css({opacity:0}).stop().animate({opacity:1},'slow');
}
$.fn.ckSlide.opts = {
autoPlay: false,//默认不自动播放
dir: null,//默认淡隐淡出效果
isAnimate: false,//默认按钮可用
interval:2000//默认自动2秒切换
};
})(jQuery);3) slide.css
.ck-slide img {
border: 0;
}
.ck-slide ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.ck-slide {
position: relative;
overflow: hidden;
}
.ck-slide ul.ck-slide-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 1;
margin: 0;
padding: 0;
}
.ck-slide ul.ck-slide-wrapper li {
position: absolute; margin-top:0px;
}
.ck-slide ul.ck-slide-wrapper li a{
/*a标签是行内元素，宽高对a标签不起作用，这里必须添加line-height:0px;display:black，否则垂直滚动<li>之间会出现间隔*/
line-height:0px;
display:block;
}
.ck-slide .ck-prev, .ck-slide .ck-next {
position: absolute;
top: 50%;
z-index: 2;
width: 35px;
height: 70px;
margin-top: -35px;
border-radius: 3px;
opacity: .15;
background: red;
text-indent: -9999px;
background-repeat: no-repeat;
transition: opacity .2s linear 0s;
}
.ck-slide .ck-prev {
left: 5px;
background: url(../images/arrow-left.png) #000 50% no-repeat;
}
.ck-slide .ck-next {
right: 5px;
background: url(../images/arrow-right.png) #000 50% no-repeat;
}
.ck-slidebox {
position: absolute;
left: 30%;
bottom: 12px;
z-index: 30;
}
.ck-slidebox ul {
height: 20px;
padding: 0 4px;
border-radius: 8px;
background: rgba(0,0,0,0.5);
}
.ck-slidebox ul li {
float: left;
height: 12px;
margin: 4px 4px;
}
.ck-slidebox ul li em {
display: block;
width: 12px;
height: 12px;
border-radius: 100%;
background-color: #fff;
text-indent: -9999px;
cursor: pointer;
}
.ck-slidebox ul li.current em {
background-color: #fe6500;
}
.ck-slidebox ul li em:hover {
background-color: #fe6500;
}
.ck-slidebox-title {
position: absolute;
left: 50%;
bottom: 0px;
z-index: 30;
}
.ck-slidebox-title ul {
height: 260px;
padding: 0;
background: rgba(0,0,0,0.3);
color:white;
}
.ck-slidebox-title ul li{
}
.ck-slidebox-title ul li div.title{
background: rgba(0,0,0,0.5);
padding:15px 30px;
}
.ck-slidebox-title ul li div.title h3{
margin:0 auto;
}
.ck-slidebox-title ul li div.brief{
padding:5px 30px;
}
.ck-slidebox-title ul li div.brief p{
text-indent: 2em;
}github源码地址：https://github.com/lvhongqiang/slide
Recent Comments