利用Jquery 书写轮播图------菜鸟分享
发布于 7 年前 作者 TongBaoWang 3136 次浏览 来自 分享

<!doctype html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>轮播图</title> <style> *{ margin:0; padding:0; } li{ list-style:none; } #lun{ width:790px; height:340px; border:1px solid #ccc; margin:0 auto; position:relative; cursor:pointer; } #lun img{ display:block; }

	#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>

</head> <body> <div id=“lun”> <ul id=“imglist”> <li class=“active”><img src="./images/lun1.jpg" alt=""></li> <li><img src="./images/lun2.jpg" alt=""></li> <li><img src="./images/lun3.jpg" alt=""></li> <li><img src="./images/lun4.jpg" alt=""></li> <li><img src="./images/lun5.jpg" alt=""></li> <li><img src="./images/lun6.jpg" alt=""></li> <li><img src="./images/lun7.jpg" alt=""></li> <li><img src="./images/lun8.jpg" alt=""></li> </ul>

	<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>

</body> <script> var run; function autoRun(){ if(run){ return; } run=setInterval(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’);

		},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>

</html>

3 回复

好 自豪地采用 CNodeJS ionic

啊 完美 简直是我看过最完美的轮播图了!! ==好像以前对谁说过!!

回到顶部