利用Jquery 书写轮播图------菜鸟分享

	#lun>ul>li{
		opacity:0;
		
		/*
			默认情况下：
				所有的li全部设置透明度为0
				设置过渡效果 opacity 发生改变，在1s钟内完成
		*/
		transition:opacity .5s linear;
		
		/* 设置元素的定位方式为absolute,保证所有的li元素全部在lun元素内 */
		position:absolute;
	}
	
	/*
		给元素添加class="active"属性，相当于设置元素具有opacity样式，值是1
	*/
	#lun>ul>.active{
		opacity:1;
	}

	#listnum{
		width:180px;
		height:20px;
		background:rgba(255,255,255,0.3);
		position:absolute;
		bottom:20px;
		left:50%;
		margin-left:-90px;
		border-radius:10px;
	}

	#listnum>ul>li{
		width:12px;
		height:12px;
		background:#fff;
		border-radius:6px;
		float:left;
		margin-top:4px;
		margin-left:9.5px;
	}
	#listnum>ul>.activenum{
		background:#DB192A;
	}
	
	#left,#right{
		width:30px;
		height:60px;
		position:absolute;
		background:rgba(0,0,0,0.1);
		display:none;
		color:#fff;
		font-size:20px;
		text-align:center;
		line-height:60px;
		opacity:0.5;
	}
	#left{
		top:50%;
		margin-top:-30px;
	}
	#right{
		top:50%;
		right:0px;
		margin-top:-30px;
	}
	#left:hover,#right:hover{
		background:rgba(0,0,0,0.6);
		opacity:1;
	}
</style>

<script src="jquery-3.2.1.min.js"></script>

	<div id="listnum">
		<ul>
			<li class="activenum"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	
	<!-- 定义左箭头和右箭头 -->
	<div id="left"><</div>
	<div id="right">></div>
</div>

		},2000);

	}
	autoRun();
	$('#lun').mouseover(function(){
		clearInterval(run);
		run=undefined;
		$('#left').css('display','block');
		$('#right').css('display','block');

	}).mouseout(function(){
		$('#left').css('display','none');
		$('#right').css('display','none');
		autoRun();
	
	});
	$('#listnum ul li').each(function(index,li){
		$(li).attr('index',index);
	});
	$('#listnum ul li').mouseover(function(){
		var index=$(this).attr('index');
		$('.active').removeAttr('class');
		$('.activenum').removeAttr('class');
		$('#imglist li').eq(index).attr('class','active');
		$('#listnum ul li').eq(index).attr('class','activenum');
	
	});
	$('#right').click(function(){
		var nextLi=$('.active').next();
		var NextNumLi=$('.activenum').next();
		if(nextLi.length==0){
			nextLi=$('#imglist li:first');
			
		
		}
		if(NextNumLi.length==0){
			NextNumLi=$('#listnum ul  li:first');
		}
		$('.active').removeAttr('class');
		$('.activenum').removeAttr('class');
		nextLi.attr('class','active');
		NextNumLi.attr('class','activenum');
	
	});
	$('#left').click(function(){
		var prevLi=$('.active').prev();
		var prevNumLi=$('.activenum').prev();
		if(prevLi.length==0){
			prevLi=$('#imglist li:last');
			
		}
		if(prevNumLi.length==0){
			prevNumLi=$('#listnum ul li:last');
		
		}
		$('.active').removeAttr('class');
		$('.activenum').removeAttr('class');
		prevLi.attr('class','active');
		prevNumLi.attr('class','activenum');
	
	
	
	});


</script>