16、Js-图片轮播与切换（圆点&箭头）

来源：互联网发布：免费网上审批软件编辑：程序博客网时间：2024/06/11 09:58
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.all{height: 500px;width: 1200px;}.left{height: 600px;width: 150px;float: left;position: relative;}.left img{height: 64px;width: 34px;position: absolute;right: 58px;bottom: 268px;}.main{float: left;margin: 0 auto;position: relative;}ul li{list-style: none;border: 1px solid red ;height: 30px;width: 30px;line-height: 30px;border-radius: 15px;text-align: center;position: absolute;bottom: 50px;background-color: }#banner1{right: 500px;background-color: red;}#banner2{right: 450px;}#banner3{right: 400px;}#banner4{right: 350px;}.right{height: 600px;width: 150px;float: left;position: relative;}.right img{height: 64px;width: 34px;position: absolute;right: 58px;bottom: 268px;}</style></head><body><div class="all"><div class="left"><img src="./images/5.jpg" id="left_img" onclick="left1()">//左箭头</div><div class="main"><img src="./images/1.jpg" id="main_img" alt="" onmouseout="begin1()" onmouseover="stop1()">//主图片<ul><li id="banner1" onmouseover="change1(1)" onmouseout="still1()">1</li>//原点1<li id="banner2" onmouseover="change1(2)" onmouseout="still1()">2</li>//原点2<li id="banner3" onmouseover="change1(3)" onmouseout="still1()">3</li>//原点3<li id="banner4" onmouseover="change1(4)" onmouseout="still1()">4</li>//原点3</ul></div><div class="right"><img src="./images/6.jpg" onclick="right1()">//右箭头</div></div></body><script type="text/javascript">var timer;var i=1;window.onload=function(){timer=window.setInterval("start1()",2000);}start1=function(){var picObj=document.getElementById("main_img");var list=document.getElementsByTagName('li');list[i-1].style.background='none'i++;if(i>4){i=1;}picObj.src='./images/'+i+'.jpg';list[i-1].style.background='red';}left1=function(){window.clearInterval(timer);var picObj=document.getElementById("main_img");var list=document.getElementsByTagName('li');list[i-1].style.background='none'i--;if(i<1){i=4;}picObj.src='./images/'+i+'.jpg';list[i-1].style.background='red';}right1=function(){window.clearInterval(timer);var picObj=document.getElementById("main_img");var list=document.getElementsByTagName('li');list[i-1].style.background='none'i++;if(i>4){i=1;}picObj.src='./images/'+i+'.jpg';list[i-1].style.background='red';}begin1=function(){timer=window.setInterval("start1()",2000);}stop1=function(){window.clearInterval(timer);}change1=function(n){var list=document.getElementsByTagName('li');list[i-1].style.background='none';var picObj=document.getElementById("main_img");picObj.src='./images/'+n+'.jpg';i=n;list[i-1].style.background='red';}still1=function(){start1();}</script></html>
阅读全文
0 0