SOURCE

console 命令行工具 X clear

                    
>
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%;
}