轮播插件+echarts图表

效果如图，底部的小圆点是自己加的，通过判断（判断 某一个class名称）找到index，然后给到下面小圆点上面

注意： 这个轮播插件改过源码，因为不能阻止默认，就加了一个阻止默认事件，但不影响，若介意的同学可以去jq22.com上面重新下载 这个就是插件
http://www.jq22.com/jquery-info8608

//然后在默认的dom基础上 把内容改成你自己的  
<div id="Main-Content">
					<div class="Container">
						<div class="flipster">
							<ul>
								<li>
									<a href="#" class="Button Block">
									 <div id="crouse_echarts1" class="crouse_echar"  ></div>
									</a>
								</li>
								<li>
									<a href="#" class="Button Block">
									 <div id="crouse_echarts2" class="crouse_echar"  ></div>
									</a>
								</li>
								<li>
									<a href="#" class="Button Block">
									 <div id="crouse_echarts3" class="crouse_echar"  ></div>
									</a>
								</li>
								<li>
									<a href="#" class="Button Block">
									 <div id="crouse_echarts4" class="crouse_echar"  ></div>
									</a>
								</li>
								<li>
									<a href="#" class="Button Block">
										<div id="crouse_echarts5" class="crouse_echar"  ></div>
									</a>
								</li>
								<li>
									<a href="#" class="Button Block">
										<div id="crouse_echarts6" class="crouse_echar"  ></div>
									</a>
								</li>
							</ul>
						</div>

引jq echarts，插件相关的文件 我就不贴图了

//表示数量的小圆点 获取上面轮播内容的长度在创建小圆点
	var filength = $(".flip-items").children().length;
	var ali = '';
	var barindex = "";
	var echarts_mar="<div class='echarts_mark'></div>";
	$("#Main-Content").append(echarts_mar);
	for(var i=0; i<filength; i++){
		 ali+="<span></span>";
	}
		 $(".echarts_mark").append(ali)
		 $(".echarts_mark span").eq(0).addClass("ali_active")
		$(".flipster ").on("mousewheel",function(){
			 $(".flip-items li").each(function(index,ele){
			if($(ele).hasClass("flip-current")){
			 
			  $(".echarts_mark span").eq(barindex).addClass("ali_active").siblings("span").removeClass("ali_active")
			}
			 	 
			 })
			  
		})

因为图表数量多，所以我们就放到一个方法里面，从官网下载一个图表 然后进行修改

图表格式就如：
function echarts(){

var myChartCumulative1 = echarts.init(document.getElementById('crouse_echarts1'));

option1:{},
option2:{}

	  myChartCumulative1.setOption(option1);
	  ......

｝

插件默认会有一些效果，在那个基础上修改一下，背景和颜色等，会达到这样的效果
下载
欢迎各位提出指导意见