js定時器實現圖片輪播

時間 2019-11-20

原文原文鏈接

效果展現以下：javascript

setInterval(moverleft,3000);定時器設置爲3秒，並且實現圖片下方的小圓點序號跟圖片對應，點擊小圓點也能切換圖片。css

代碼以下：html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>輪播的div+css樣式改進</title>
		<style type="text/css">
			body{background-image: url(img/001.jpg);}
			.lb{
				margin: 10px auto;
				width: 1440px;
				height: 420px;
			}
			#you{
				cursor: pointer;
				display: inline-block;
				height: 420px;
				width: 45px;
				left: 1395px;
				top: -424px;
				position: relative;
				z-index: 1;
			}
			#zuo{
				cursor: pointer;
				height: 420px;
				width: 45px;
				top: 424px;
				position: relative;
				z-index: 1;
			}
			.f{
				opacity:0.2;//設置透明
			}
			.f:hover
			{
				opacity:1.0;//設置鼠標通過不透明
			}
			li{
				list-style-type: square;
				border: 1px #000;
				width: 100px;
				height: 100px;
				
			}
			.ul{
				margin: auto;
				display: inline-block;
				position: relative; /*相對定位*/
				z-index: 2;
				left: 830px;
				top: 380px;
				
			}
			
#buttons span { 
    cursor: pointer; 
    font-size: 15px;
    text-align: center;
    font-family: "微軟雅黑";
    float: left; 
    border: 1px solid #fff; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%;  /*設置爲圓形*/ 
    /*background: #333; */
    margin-right: 15px; /*設置圓形的間隔爲15像素*/
}
#buttons .on {  
    background: orangered;   /*選中的按鈕樣式*/
}

		</style>
	</head>
	<body>
	
		<div class="lb">
			<img src="img/左.png" id="zuo" class="f" />
			<img src="img/1.jpg" id="img" />
			<img src="img/右.png" id="you" class="f"/>
		</div>
		<div class="ul" id="buttons"><span index="1" class="on.45454" style="background: #FF4500;">1</span><span index="2" >2</span><span index="3">3</span><span index="4">4</span><span index="5">5</span><span index="6">6</span><span index="7">7</span></div>
		<script type="text/javascript">
			var zuo=document.getElementById("zuo");
			var you=document.getElementById("you");
			var img=document.getElementById("img");
			var lb=document.getElementsByClassName("lb")[0];
			var index=1;
			var moverleft=function  () {
				index++;
				if(index>7)index=1;
				img.src="img/"+index+".jpg";
				changbg ();
			}
			you.onclick=moverleft;
			var moverright=function () {
				index--;
				if(index<1)index=7;
				img.src="img/"+index+".jpg";
				changbg ();
			}
			zuo.onclick=moverright;
			
			var mm=setInterval(moverleft,3000);
			lb.onmousemove=function () {
				clearInterval(mm);
			}
			lb.onmouseout=function () {
			  mm=setInterval(moverleft,3000);
			}
			
			
		/*	var buttons = document.getElementById("buttons").getElementsByTagName("span");
			
			 function showButton() {
        //先找出原來有.on類的按鈕，並移除其類
        for (var i = 0; i < buttons.length ; i++) {
            if( buttons[i].className == 'on'){
                buttons[i].className = '';
                break;
            }
        }
        //爲當前按鈕添加類，索引下標從0開始，故需減1
        buttons[index - 1].className = 'on';
    }
			 
			   for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
        	
            if (moverleft()) {         //若是切換還在進行，則直接結束，直到切換完成
                return;
            }
            if(this.className == 'on') {     //若是點擊的按鈕是當前的按鈕，不切換，結束
                return;
            }
            }
        }
		*/	
			
			
			var buttons = document.getElementById("buttons").childNodes;
				
			function changbg () {
				
				for(var i=0;i<buttons.length;i++)
				{
					buttons[i].style.background="#333333";
				}
				buttons[index-1].style.background="#FF4500";
			}
			
			//把下面小數字圖標和圖片鏈接起來,利用閉包的特色
			for(var i=0;i<buttons.length;i++){
				buttons[i].onclick=(function  () {
					var j=i+1;
				return function  () {
					index=j;
					img.src="img/"+index+".jpg";
					changbg();
				}
				})();
				
			}
		</script>
	</body>
</html>

　　須要所有源碼地址：https://gitee.com/PengPeng8/LunBo.gitjava

相關標籤/搜索

每日一句

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