简单的 js手写轮播图

Posted 2020-11-23 xiren88

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的 js手写轮播图相关的知识，希望对你有一定的参考价值。

css

.na1 {
width: 1349px;
height: 620px;
overflow: hidden;
}

.dd {
/* width: 100%; */
height: 100%;
margin-left: -586px;
}

.pp {
width: 5396px;
height: 620px;
margin-left: 0px;
}

.aa {
/* width: 100%; */
height: 100%;
margin-left: -586px;
}

/* 轮播图 */
var aa=0;
var waili=document.getElementsByClassName("pp")[0];
var timer;
// dingshiqi
timer=setInterval(function(){
  waili.style.transition="1s";
  aa=aa-1349;
  if (aa<=-4077) {
   waili.style.transition="0s";
   aa=0;
  }
   waili.style.marginLeft=aa+"px";
},2500)
})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
	.na1 {
		width: 1349px;
		height: 620px;
		overflow: hidden;
	}
	
	.dd {
		/* width: 100%; */
		height: 100%;
		margin-left: -586px;
	}
	
	.pp {
		width: 5396px;
		height: 620px;
		margin-left: 0px;
	}
	
	.aa {
		/* width: 100%; */
		height: 100%;
		margin-left: -586px;
	}
	
	</style>
	<body>
		<!-- header-->
		<div class="na1">
			<div class="pp">
				<div class="na">
					<img class="dd" src="../img/shouji/1.jpg">
				</div>
				<div class="na">
					<img class="dd" src="../img/shouji/1.jpg">
				</div>
				<div class="na">
					<img class="dd" src="../img/shouji/1.jpg">
				</div>
				<div class="na">
					<img class="dd" src="../img/shouji/1.jpg">
				</div>
			</div>
		</div>
		<!-- 摸快2 -->
	</body>
</html>
<script type="text/javascript">

	// 2.轮播图
	
	$(function(){
	/* huidingbu */
	 $(window).scroll(function() {
		var hui = $(document).scrollTop();
		// alert(hui);
		// console.log(hui);
		if (hui > 300 ) {
			$(".jiantou").fadeIn();
		} else{
			$(".jiantou").fadeOut();
		}
		})
		$(".jiantou").click(function(){
			$("html,body").animate({
			scrollTop:‘0px‘},500);
	})
		
	
	// 	$(".cent211").mouseover(function(){
	
	// 		$(this).css("border-right","1px solid grey");
	// 		setTimeout(function(){
	// 			$(".cent211").css("border-right","none");
	// 		},1000);
			
	// 	});
	// $(".cent311").mouseover(function(){
	// 	$(this).css("border-right","1px solid grey");
	// 	setTimeout(function(){
	// 		$(".cent311").css("border-right","none");
	// 	},1000);
	// });
	/* 轮播图jq */
	/* var aa=0;
	var waili=$(".pp").eq(0);
	var timer;
	// dingshiqi
	timer=setInterval(function(){
		waili.css("transition","1s");
		aa=aa-1349;
		if (aa<=-4077) {
			waili.css("transition","0");
			aa=0;
		}
			waili.css("marginLeft",aa+"px");
	},2500) */
	/* 轮播图 */
	var aa=0;
	var waili=document.getElementsByClassName("pp")[0];
	var timer;
	// dingshiqi
	timer=setInterval(function(){
		waili.style.transition="1s";
		aa=aa-1349;
		if (aa<=-4077) {
			waili.style.transition="0s";
			aa=0;
		}
			waili.style.marginLeft=aa+"px";
	 },2500)
	})
	
/* 	$(".cent211").mouseover(function(){
		$(this).animate("border-right","1px solid grey").delay(1000).("border-right","none");
	}) */
</script>

以上是关于简单的 js手写轮播图的主要内容，如果未能解决你的问题，请参考以下文章

原生javascript手写一个丝滑的轮播图