console
$(function() {
var count = 0;
var optionss = [
{name: 'fuzhi',url: 'http://dimg04.c-ctrip.com/images/t1/vacations/203000/202469/ef1ae815bbef4a0698d4fa2ac15614e0.jpg'},
{name: 'qingshuisi',url: 'http://upload.shunwang.com/2014/0625/1403670070972.JPG'},
{name: 'xiaodao',url: 'http://digitalphoto.cocolog-nifty.com/photos/uncategorized/2008/08/02/dsc_d300_0006950_2.jpg'},
{name: 'xiaodao2',url: 'http://f4.topitme.com/4/b3/e5/1118294546054e5b34o.jpg'},
{name: 'xiaodao3',url: 'http://img17.3lian.com/d/file/201701/19/fd92ea2409b6b157c247b78ce4eda95a.jpg'}
];
var optionss2 = JSON.parse(JSON.stringify(optionss));
$("#carousel-fade").bootCarousel({options: optionss,type: 'fade'});
$("#carousel-slide").bootCarousel({options: optionss2,type: 'slide',
interval:5000,pause:true});
$("#carousel-slide-data-api").bootCarousel({options: optionss,
type: 'fade',
dataApi:true});
$("#carousel-slide-2").bootCarousel({options: optionss2,type: 'slide',
width:'80%',height:450});
$(".btn-group1 button").click(function() {
var tmpIndex = $(this).index();
if(tmpIndex === 0) {$("#carousel-fade").bootCarousel(1);}
if(tmpIndex === 1) {$("#carousel-fade").bootCarousel(3);}
if(tmpIndex === 2) {$("#carousel-fade").bootCarousel('prev');}
if(tmpIndex === 3) {$("#carousel-fade").bootCarousel('next');}
});
$(".btn-group2 button").click(function() {
var tmpIndex = $(this).index();
if(tmpIndex === 0) {$("#carousel-slide").bootCarousel('cycle');}
if(tmpIndex === 1) {$("#carousel-slide").bootCarousel('pause');}
});
$("#carousel-slide").on("change.bc.carousel",function() {
count++;
if(count == 50) {$(this).bootCarousel('pause');}
});
$("#carousel-slide").on("changed.bc.carousel",function() {
count++;
if(count == 50) {$(this).bootCarousel('pause');}
});
});
;(function($) {
"use strict";
var Name = 'bootCarousel';
var EventKey = '.bc.carousel';
var DataApiKey = '.data-api';
var Default = {
options: [],
type: 'fade',
height:'650',
width:'100%'
};
var Event = {
};
var ClassName = {
Carousel: 'nc-carousel',
Fade: 'fadeType',
Slide: 'slideType',
};
var Carousel = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, Default, options);
};
Carousel.prototype.init = function() {
var that=this
this.$element.addClass(ClassName.Carousel);
this.$element.css({
'width': this.options.width,
'height': this.options.height+'px'
});
if(this.options.type === 'slide') {
this.$element.addClass(ClassName.Slide);
} else {
this.$element.addClass(ClassName.Fade);
}
var $tempContainer = $("<ul class='img-container'></ul>");
var $bars = $("<div class='bars'></div>");
var num=0;
this.options.options.forEach(function(item) {
$tempContainer.append("<li><img src="+item.url+" alt="+item.name+"/></li>");
if(that.options.dataApi) {
$bars.append("<span data-slide="+num+"></span>");
} else {
$bars.append("<span></span>");
}
num++;
});
if(that.options.dataApi) {
this.$element.append($tempContainer).append($bars)
.append("<div class='left' data-slide='prev'></div>")
.append("<div class='right' data-slide='next'></div>");
this.options.curIndex = 0;
this.initFirstPage();
} else {
this.$element.append($tempContainer).append($bars)
.append("<div class='left'></div>").append("<div class='right'></div>");
this.initFirstPage();
}
this.addEvent();
};
Carousel.prototype.initFirstPage = function() {
if(this.options.type === 'fade') {
this.$element.find(".img-container > li").hide()
.eq(this.options.curIndex).show();
}
if(this.options.type === 'slide') {
//this.$element.addClass(ClassName.Fade);
}
this.$element.find(".bars span").eq(this.options.curIndex).addClass("active");
if(this.options.interval) {
var that = this;
this.options.timer = setInterval(function() {
that.$element.find(".right").trigger('click');
},this.options.interval);
}
};
Carousel.prototype.addEvent = function() {
var that = this;
this.$element.find(".right").click(function() {
that.$element.trigger("change.bc.carousel");
if(that.options.type === 'slide') {
that.getNextIndex();
that.toNext();
} else {
that.getAddcreaseCurIndex();
that.$element.find(".img-container > li").eq(that.options.curIndex)
.fadeIn(1000).siblings().fadeOut(1000);
that.setBarActive();
}
});
this.$element.find(".left").click(function() {
that.$element.trigger("change.bc.carousel");
if(that.options.type === 'slide') {
that.getPreIndex();
that.toPre();
} else {
that.getDecreaseCurIndex();
that.$element.find(".img-container > li").eq(that.options.curIndex)
.fadeIn(1000).siblings().fadeOut(1000);
that.setBarActive();
}
});
this.$element.find(".bars span").click(function() {
if($(this).hasClass("active")) {return;}
that.$element.trigger("change.bc.carousel");
if(that.options.type === 'slide') {
that.options.nextIndex = $(this).index();
if(that.options.nextIndex > that.options.curIndex) {
that.toNext()
} else {
that.toPre();
}
} else {
that.options.curIndex = $(this).index();
that.$element.find(".img-container > li").eq(that.options.curIndex)
.fadeIn(1000).siblings().fadeOut(1000);
that.setBarActive();
}
});
this.$element.hover(function() {
if(that.options.pause && that.options.timer ) {
clearInterval(that.options.timer );
that.options.timer = undefined;
}
},function() {
if(that.options.pause && that.options.interval) {
that.options.timer = setInterval(function() {
that.$element.find(".right").trigger('click');
},that.options.interval);
}
});
};
Carousel.prototype.getAddcreaseCurIndex = function() {
this.options.curIndex++;
if(this.options.curIndex > this.options.options.length - 1) {
this.options.curIndex = 0;
}
};
Carousel.prototype.getDecreaseCurIndex = function() {
this.options.curIndex--;
if(this.options.curIndex < 0) {
this.options.curIndex = this.options.options.length - 1;
}
};
Carousel.prototype.setBarActive = function() {
if(this.options.type === 'slide') {
this.$element.find(".bars span").eq(this.options.nextIndex)
.addClass("active").siblings().removeClass("active");
} else {
this.$element.find(".bars span").eq(this.options.curIndex)
.addClass("active").siblings().removeClass("active");
}
this.$element.trigger("changed.bc.carousel");
};
Carousel.prototype.getNextIndex = function() {
if(this.options.curIndex < this.options.options.length - 1) {
this.options.nextIndex = this.options.curIndex + 1;
} else {
this.options.nextIndex = 0;
}
};
Carousel.prototype.getPreIndex = function() {
if(this.options.curIndex > 0) {
this.options.nextIndex = this.options.curIndex - 1;
} else {
this.options.nextIndex = this.options.options.length - 1;
}
};
Carousel.prototype.recoverImgState = function() {
this.$element.find(".img-container > li").eq(this.options.curIndex)
.css({
"top":"100%",
"left":"0%"
});
};
Carousel.prototype.toNext = function() {
var that = this;
var $carouseItems = this.$element.find(".img-container > li");
$carouseItems.eq(this.options.nextIndex)
.css({
"transition":"none",
"top":"0%",
"left":"100%"
});
setTimeout(function() {
$carouseItems.eq(that.options.nextIndex).css({
"transition":"left 1s ease-out",
"left":"0%"
});
$carouseItems.eq(that.options.curIndex).css("left","-100%");
that.setBarActive();
setTimeout(function() {
that.recoverImgState();
that.options.curIndex = that.options.nextIndex;
},1000);
},50);
};
Carousel.prototype.toPre = function() {
var that = this;
var $carouseItems = this.$element.find(".img-container > li");
$carouseItems.eq(this.options.nextIndex)
.css({
"transition":"none",
"top":"0%",
"left":"-100%"
});
setTimeout(function() {
$carouseItems.eq(that.options.nextIndex).css({
"transition":"left 1s ease-out",
"left":"0%"
});
$carouseItems.eq(that.options.curIndex).css("left","100%");
that.setBarActive();
setTimeout(function() {
that.recoverImgState();
that.options.curIndex = that.options.nextIndex;
},1000);
},50);
};
Carousel.prototype.setItemByIndex = function(index) {
if(index < 0 || index >= this.options.options.length) {
return;
}
this.$element.find(".bars span").eq(index).trigger('click');
};
Carousel.prototype.setItemByOper = function(oper) {
var that=this;
if(oper === 'pause') {
if(this.options.timer) {
clearInterval(that.options.timer );
that.options.timer = undefined;
}
}
if(oper === 'cycle' && that.options.interval && !this.options.timer) {
that.options.timer = setInterval(function() {
that.$element.find(".right").trigger('click');
},that.options.interval);
}
if(oper === 'prev') {
this.$element.find(".left").trigger('click');
}
if(oper === 'next') {
this.$element.find(".right").trigger('click');
}
};
var old = $.fn.bootCarousel;
$.fn.bootCarousel = function(option) {
var $this = $(this),data = $this.data('carousel');
var _options = option && typeof option == 'object' ? option : {};
_options = $.extend({},$.fn.bootCarousel.defaults,_options);
_options.curIndex = 0;
_options.nextIndex = 0;
if(!data) {
data = new Carousel(this,_options);
$this.data('carousel', data);
}
if(typeof option == 'object') {
data.init();
return this;
}
if(typeof option == 'number') {
data.setItemByIndex(option);
}
if(typeof option == 'string') {
data.setItemByOper(option);
}
};
$.fn.bootCarousel.defaults = {
options: [],
type: 'fade',
height:'650',
width:'100%'
};
$.fn.bootCarousel.Constructor = Carousel;
$.fn.bootCarousel.noConflict = function () {$.fn.bootCarousel = old;return this;};
$(document).on('click.bc.carousel.data-api', '[data-slide]', function (e) {
var $this = $(e.target);
var $target = $this.closest(ClassName.Carousel);
var dataValue = $this.attr('data-slide');
if(isNaN(+dataValue)) {
$target.data('carousel').setItemByOper(dataValue);
} else {
var operNum = +dataValue;
$target.data('carousel').setItemByIndex(operNum);
}
e.preventDefault();
});
})(jQuery);
<head>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
<h3>渐变</h3>
<div id="carousel-fade"></div>
<div class="btn-group1">
<button>to-1</button>
<button>to-3</button>
<button>prev</button>
<button>next</button>
</div>
<h3>滑动</h3>
<div id="carousel-slide"></div>
<div class="btn-group2">
<button>cycle</button>
<button>pause</button>
</div>
<h3>使用data-api</h3>
<div id="carousel-slide-data-api"></div>
<h3>自定义尺寸</h3>
<div id="carousel-slide-2"></div>
.btn-group1,.btn-group2 {
margin:20px 70px;
}
.btn-group1 button,
.btn-group2 button {
padding:5px 15px;
cursor:pointer;
background:#fff;
border:solid 1px #999;
border-radius:6px;
}
.nc-carousel {
display:block;
margin:auto;
position:relative;
border:solid 1px #999;
padding:0;
}
.fadeType ul {
height:100%;
width:100%;
list-style:none;
padding:0;
margin:0;
}
.fadeType ul li{
position:absolute;
//transition: opacity 1s ease-out;
height:100%;
width:100%
}
.fadeType ul li img{
height:100%;
width:100%;
}
.nc-carousel .bars{
display:block;
position:absolute;
bottom:5%;
left:50%;
transform: translateX(-50%);
}
.nc-carousel .bars span{
display:inline-block;
height:10px;
width:10px;
border:solid 2px #999;
border-radius:50%;
cursor:pointer;
margin-left:5px;
}
.nc-carousel .bars span:hover,.nc-carousel .bars span.active{
border-color:#fff;
}
.nc-carousel .left{
display:inline-block;
height:8px;
width:8px;
border:solid 4px #666;
border-color: #666 transparent transparent #666;
opacity:0.8;
position:absolute;
top:50%;
left:15px;
transform: translateY(-50%) rotate(-45deg);
cursor:pointer;
}
.nc-carousel .left:hover{
border-color: #fff transparent transparent #fff;
}
.nc-carousel .right{
display:inline-block;
height:8px;
width:8px;
border:solid 4px #666;
border-color: #666 #666 transparent transparent;
opacity:0.8;
position:absolute;
top:50%;
right:15px;
transform: translateY(-50%) rotate(45deg);
cursor:pointer;
}
.nc-carousel .right:hover{
border-color: #fff #fff transparent transparent;
}
.slideType ul{
height:100%;
width:100%;
list-style:none;
padding:0;
margin:0;
position:relative;
overflow:hidden;
}
.slideType ul li{
height:100%;
width:100%;
display:inline-block;
position:absolute;
transition: left 1s ease-out;
}
.slideType ul li:first-child{
left:0%;
}
.slideType ul li:not(:first-child){
top:100%;
}
.slideType ul li img{
height:100%;
width:100%;
max-height:100%;
max-width:100%;
}