原生 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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。