js示例1（图片轮播）-编程知识

js示例1（图片轮播）

<!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 = ijsLis[i].addEventListener('mouseover',function(){  //鼠标悬念在页码上时，执行翻页函数page = this.index;setPage(page)})}			</script>
</html>