<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????#banner{width:800px;height:400px;margin: 50px auto;position: relative;} ???????????img{width:100%;height:100%;} ???????????#right,#left{width:0px;height:100%;background: rgba(255,255,255,0.3); ???????????????position: absolute;top: 0;font-size: 80px;font-weight: bold; ???????????????text-align: center;line-height: 400px;color: white;overflow: hidden;} ???????????#right{right:0;} ???????????#left{left:0;} ???????????ul{list-style: none;position: absolute;bottom:5%;left: 30%;} ???????????.li{width:30px;height:30px;background:;border-radius: 50%;float: left; ???????????????text-align: center;line-height: 30px;margin-left: 10px;} ???????</style> ???</head> ???<body onload="lunbo()"> ???????<div id="banner"> ???????????????????????<!-- 可视窗--> ???????????<img src="img/lb1.jpg" id="img"/> ???<!--插入的图片--> ???????????<div id="left"><</div> ??????????????<!--向左的按钮--> ???????????<div id="right">></div> ?????????????<!--向右的按钮--> ???????????<ul> ????????????????????????????????<!--小圆点按钮--> ???????????????<li class="li" onclick="lb(1)">1</li> ??????????????????<li class="li" onclick="lb(2)">2</li> ???????????????<li class="li" onclick="lb(3)">3</li> ???????????????<li class="li" onclick="lb(4)">4</li> ???????????????<li class="li" onclick="lb(5)">5</li> ???????????</ul> ???????</div> ???<script src="js/script_js.js"></script> ???<script> ???????var body=document.getElementsByTagName("body"); ??????????var tv=idName("banner") ??????????????????????????//获取可视窗口 ???????var img=idName("img"); ???????????????????????????//获取图片的id ???????var left=idName("left"); ?????????????????????????//获取向左按钮的id ???????var right=idName("right"); ???????????????????????//获取向右按钮的id ???????left.style.transition=right.style.transition="0.5s"; ??//设置左右按钮的过渡效果 ???????var lis=document.getElementsByClassName("li"); ???//获取小圆点数组 ???????var timer=setInterval("lunbo()",2000); ???????????//定义一个延时器 ???????var index=0; ?????????????????????????????????????//定义index初始值为0 ???????function lunbo(){ ????????????????????????????????//创建自动轮播的函数方法 ???????????index++; ?????????????????????????????????????????????????if(index==6){ ???????????????index=1; ???????????} ???????????reset(); ?????????????????????????????????????//调用初始化颜色函数 ???????????lis[index-1].style.background="red"; ?????????//设置小圆点当时位置时的颜色 ???????????img.src="img/lb"+index+".jpg"; ???????????????//引入图片，以index为下标 ???????} ???????function reset(){ ????????????????????????????????//创建初始化小圆点颜色的函数 ???????????for(var i=0;i<lis.length;i++){ ???????????????//遍历小圆点数组， ???????????????lis[i].style.backgroundColor="rgba(255,255,255,0.3)"; //初始颜色 ?????????????} ???????} ???????tv.onmouseover=function(){ ???????????????????????//鼠标悬浮时调用函数 ???????????clearInterval(timer); ????????????????????????//清除名为timer的延时器 ???????????left.style.width=right.style.width="100px"; ??//使左右按钮显示 ???????} ???????tv.onmouseout=function(){ ????????????????????????//鼠标移出时调用函数 ???????????????timer=setInterval("lunbo()",2000); ???????????????left.style.width=right.style.width="0px"; ???????} ???????function lb(x){ ??????????????????????????????????//点击小圆点改变图片 ???????????reset(); ???????????lis[x-1].style.backgroundColor="red"; ???????????img.src="img/lb"+x+".jpg"; ???????}// ?????for(var i=0;i<lis.length;i++){ ??????????????????//另一种小圆点击时的写法// ???????????lis[i].onclick=function(){// ???????????????reset();// ????????????????index=this.innerHTML-1;// ?????????????????img.src="img/lb"+(index+1)+".jpg";// ?????????????????lis[index].style.backgroundColor="red";// ?????????}// ?????} ???????left.onclick=function(){ ??????????????????//点击向左的按钮时 ???????????index--; ???????????if(index==0){index=5}; ???????????????img.src="img/lb"+index+".jpg"; ???????????????reset(); ???????????????lis[index-1].style.backgroundColor="red"; ???????} ???????right.onclick=function(){ ?????????????????//点击向右的按钮时 ???????????index++; ???????????if(index==6){index=1}; ???????????????img.src="img/lb"+index+".jpg"; ???????????????reset(); ???????????????lis[index-1].style.backgroundColor="red"; ???????????} ???????// ???????lunbo(); ???</script> ???????????</body></html>js轮播时间小结！
原文地址：https://www.cnblogs.com/Cc-ll/p/8352920.html