js示例1（图片轮播）

news2024/11/28 11:51:30

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片轮播</title>
		<style>
			#box{                         /*给图片盒子创建样式*/				
				width : 400px;
				height : 400px;				
				margin: 0 auto;	      
				position: relative;
				}
			#img{                         /*给图片设置样式*/
				width: 400px;
				height : 400px;		
			}
			.bt{                          /*给左右箭头设置样式*/
				color:white;
				width: 50px;
				height: 60px;
				background-color: gray;
				opacity: 0.2;
				font-size: 60px;
				font-weight: 900;
				cursor : pointer;          /*设置光标类型*/
				position: absolute;        /*设置显示方式为绝对定位*/
				top: 170px;
				display: none;             /*默认不显示*/
				text-align: center;
				line-height: 60px;
				}
			#left{		                   /*左箭头样式*/		
				left: 0px;				
			}
			#right{		                   /*右箭头样式*/		
				right: 0px;				
			}
			#ul{                           /*页码样式*/
				list-style-type: none;
				position: absolute;
				top:330px;
				left:50px;
				
			}
			#ul>li{                         /*页码样式*/
				float: left;
				margin-right: 20px;
				background-color: skyblue;
				font-size: 30px;
				border-radius: 15px;        /*边框导角设置为文字大小的50%，会显示成圆形*/
				height: 30px;
				width: 30px;
				line-height: 30px;
				text-align: center;
				opacity: 0.2;               /*透明度*/
				cursor : pointer;           /*光标类型*/
			}
		</style>
	</head>
	<body>
		<div id='box'>
			<img id='img' src='img/0.jpg'>
			<div id='left' class='bt'><</div>
			<div id='right' class='bt'>></div>
			<ul id='ul'>
				<li class='li'>1</li>
				<li class='li'>2</li>
				<li class='li'>3</li>
				<li class='li'>4</li>
				<li class='li'>5</li>
			</ul>
		</div>
		
	</body>
	<script>
		// 获取元素
		var jsBox = document.getElementById('box');
		var jsImg = document.getElementById('img')
		var jsBts = document.getElementsByClassName('bt')
		var jsLeft = document.getElementById('left')
		var jsRight = document.getElementById('right')
		var jsLis = document.getElementsByClassName('li')	
		//设置鼠标悬念事件
		jsBox.addEventListener('mouseover',stop,false)
		// 设置鼠标移出事件
		jsBox.addEventListener('mouseout',start,false)
		var page=0;
		//翻页函数
		function setPage(page){			
			jsImg.src='img/'+page+'.jpg';   //设置图片源，图片源为img/page.jpg（需先定义好图片文件名和目录）
			for (var p in jsLis){			//设置页码透明度	
				jsLis.item(p).style.opacity=0.2
			}
			jsLis[page].style.opacity=0.8   //当前页面的页码透明度加深
		}
		//启动轮播函数
		function start(){
			timer = setInterval(function(){  //定时软播
				
				setPage(page)
				page++
				if (page==5){
					page=0;
				}
			},1000)                          //切换时间为1000毫秒
			jsBts[0].style.display='none';   //轮播时隐藏左箭头
			jsBts[1].style.display='none';   //轮播时隐藏右箭头
		}
		//停止轮播函数                  
		function stop(){
			clearInterval(timer)             //清除轮播定时器
			jsBts[0].style.display='block';  //显示左箭头
			jsBts[1].style.display='block';	 //显示右箭头		
		}
		//启动轮播函数
		start()
		//为左右箭头添加事件
		for (var i=0;i<2;i++){            
			jsBts[i].index = i;             //设置当前标签（箭头）的index值(不能直接使用循环中的i)
			jsBts[i].addEventListener('mouseover',function(){ //当鼠标悬念在箭头上时，加深箭头的背景
				this.style.opacity=0.6;
			},false)
			jsBts[i].addEventListener('mouseout',function(){  //当鼠标移出箭头时，减淡箭头的背景
				this.style.opacity=0.2;
			},false)
			jsBts[i].addEventListener('mousedown',function(){  //当鼠标点击箭头时执行翻页			
				switch (this.index){
					case 0:						
						page--
						if (page<0){
							page=4
						}
						setPage(page)                          //执行翻页函数
						break;
					case 1:
						page++
						if (page>4){
							page=0
						}
						setPage(page)                         //执行翻页函数
						break;
				}
			},false)
		}		
		//为页码添加翻页事件		
		for (var i=0;i<jsLis.length;i++){
			jsLis[i].index = i
			jsLis[i].addEventListener('mouseover',function(){  //鼠标悬念在页码上时，执行翻页函数
				page = this.index;
				setPage(page)
				
			})
		}			
	</script>
</html>