原生 js 轮播图（8）

时间 2019-11-16

原文原文链接

换图式轮播图（用定时器）bash

<style>
	*{
		padding: 0;
		margin: 0;
	}
	span{
		position: absolute;
		top: 150px;
		left: 0;
		display: block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		background-color: #ccc;
		opacity: 0.5;   /* 1 彻底不一样命   0彻底透明    取值范围：0-1  */
	}
	#left{
		text-align: left;
	}
	#right{
		text-align: right;
		margin-left: 750px;
	}
	#picNav{
		position: absolute;
		top: 310px;
		left: 300px;
	}
	#picNav li{
		list-style: none;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		background-color: #ccc;
	}
	#picNav .active{
		background-color: red;
	}
</style>
<img src="images/1.jpg" alt="" id="pic">
<span id="left">&lt;</span>
<span id="right">&gt;</span>
<ul id="picNav">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<script>
//需求：每隔两秒钟，实现一次图片的自动更换（用定时器）；
	var arr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
//须要一个数字，在0-4之间循环
	var index=0;
	var pic=document.getElementById("pic");
	var picleft=document.getElementById("left");
	var picright=document.getElementById("right");	
	var picNav=document.getElementById("picNav");
	var picNavLis=picNav.getElementsByTagName("li");
//若是使用定时器，可是发现不生效，
//1.先看是否报错；2.检查函数是否运行；3.检查相关变量是否发生变化；


                //板块：图标的自动滚动
	function change(){
		if (index==arr.length-1) {
			index=0;
		}else{
		index++;
		}
		pic.src=arr[index];
                for(var n=0;n<picNavLis.length;n++){
			picNavLis[n].className="";
		}
		picNavLis[index].className="active";
	}
	var t=setInterval(change,2000);
	//setTimeout(change,2000);
//需求：当鼠标放入图片时，定时器终止，当鼠标离开图片时，定时器生效；
	pic.onmouseenter=function(){
		clearTimeout(t);
	}
	pic.onmouseleave=function(){
		t=setTimeout(change,2000);
	}


                //左右按钮的添加
//需求：当鼠标放入按钮时，定时器终止，当鼠标离开按钮时，定时器生效；
	picleft.onmouseenter=function(){
		clearTimeout(t);
	}
	picleft.onmouseleave=function(){
		t=setTimeout(change,2000);
	}
	picright.onmouseenter=function(){
		clearTimeout(t);
	}
	picright.onmouseleave=function(){
		t=setTimeout(change,2000);
	}
//需求：左右按钮功能实现
	picleft.onclick=function(){
		if (index==0) {
			index=arr.length-1;
		}else{
			index--;
		}
//index=index==4? 0 : index++;     这也是两种写法
//index=index%5+1;
		pic.src=arr[index];
                for(var n=0;n<picNavLis.length;n++){
			picNavLis[n].className="";
		}
		picNavLis[index].className="active";
	}
	picright.onclick=change;//直接调用函数
	// picright.onclick=function(){
	// 	if (index==arr.length-1) {
	// 		index=0;
	// 	}else{
	// 		index++;
	// 	}
	// 	pic.src=arr[index];
	// }

        
            //导航按钮的功能
//需求：当鼠标通过每一个li时，图片换成对应的图片；
	for(var n=0;n<picNavLis.length;n++){
		picNavLis[n].index=n;
		picNavLis[n].onmouseenter=function(){
			for(var j=0;j<picNavLis.length;j++){
				picNavLis[j].className="";
			}
			this.className="active";
                        index=this.index;//为了让图片和自动轮播相对应
			pic.src=arr[index];
		}
	}
//需求：当鼠标放入li时，定时器终止，当鼠标离开li时，定时器生效；
	picNav.onmouseenter=function(){
		clearTimeout(t);
	}
	picNav.onmouseleave=function(){
		t=setTimeout(change,2000);
	}
</script>
复制代码

滚动式轮播图函数

<style>
	*{
		margin: 0;
		padding: 0;
	}
	#wrap .picbox{
		width: 820px;
		height: 350px;
		background-color: red;
		overflow: hidden;  /*給图片的显示窗口加*/
	}
	#wrap .picbox ul{
		width: 4100px;
		height: 350px;
		transition: all 2s;  /*谁动给谁加这个属性*/
	}
	#wrap .picbox ul li{
			list-style: none;
			float: left;

	}
	#wrap .picbox img{
		display: block;
		width: 820px;
		height: 350px;
	}
	#wrap #picNav li{
		list-style: none;
		float: left;
		width: 164px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-color: black;
		color: white;
	}
	#wrap #picNav .active{
		background-color: gray;
		color: yellow;
	}
</style>

<body>
<div id="wrap">
	<div class="picbox">//显示窗口，只显示一张图，大小也等于一张图片的大小overhidden把超出部分隐藏
		<ul id="picbox">//放置全部图片，而且并排显示，宽度须要设置成多少张图片的总宽度
			<li>
				<img src="images/1.jpg" alt="">
			</li>
			<li>
				<img src="images/2.jpg" alt="">
			</li>
			<li>
				<img src="images/3.jpg" alt="">
			</li>
			<li>
				<img src="images/4.jpg" alt="">
			</li>
			<li>
				<img src="images/5.jpg" alt="">
			</li>
		</ul>
	</div>
	<ul id="picNav">
		<li class="active">制胜金球夺宝</li>
		<li>公益皮肤科加斯</li>
	<li>阿卡丽重作揭秘</li>
			<li>7月20日赛程预告</li>
		<li>提莫队长正在待购</li>
	</ul>
</div>
<script>
	var picNav=document.getElementById("picNav");
	var picNavLis=picNav.getElementsByTagName("li");
	var picbox=document.getElementById("picbox")
	for(var n=0;n<picNavLis.length;n++){
		picNavLis[n].index=n;
		picNavLis[n].onmouseenter=function(){
			for(var j=0;j<picNavLis.length;j++){
				picNavLis[j].className="";
			}
			this.className="active";
			picbox.style.marginLeft=-this.index*820+"px"
		}
	}
</script>
</body>
复制代码