HTML案例——图片切换（易学）

HTML代码

<div id="controls"> <input id="round" type="button" value = "循环播放"> <input id="single" type="button" value = "顺序播放"> </div> <div id="container"> <a href='javascript:' id="prev">&lt;</a> <a href='javascript:' id="next">&gt;</a> <div id="order">图片加载中……</div> <!--图片上面提示 --> <div id="info">图片加载中……</div> <!--图片下面提示 --> <img id="picture"> </div>

CSS代码

<style> #controls { width:400px; margin: auto; text-align: center; } #container { width: 400px; height:400px; border: 10px solid #eee; position: relative; background: gray; margin: 10px auto 0; } #prev, #next { position: absolute; background: black; filter:alpha(opacity：40); opacity: 0.4; font-size: 20px; color: white; width: 40px; height: 40px; border: 2px solid white; line-height: 40px; text-align: center; top: 180px; /* pointer: cursor; */ text-decoration: none; } #prev:hover, #next:hover { filter: alpha(opacity：a80); opacity:0.8; } #order, #info { position: absolute; width:100%; height: 30px; line-height: 30px; text-align: center; background: black; filter:alpha(opacity：60); opacity: 0.6; font-size: 20px; color: white; } #prev { left: 0; } #next { right: 0; } #picture { height: 400px; width: 400px; } #order { top: 0; } #info { bottom: 0; } </style>

JS代码

<script> //函数的作用 就是 根据给定的id查找页面元素 function $id(id){ return document.getElementById(id); } //定义一个数组 存放四张图片的路径 var arrImg = ['./6.jpg','./7.jpg','./8.jpg','./9.jpg']; //定义一个数组 存放图片名 var arrText = ['图片一','图片二','图片三','图片四']; //控制图片信息的改变,命名一个顺序值，index var index = 0; //控制循环播放？顺序播放？值为true是顺序播放 默认,值为false是循环播放 var shunxu = true; //1-定义一个函数 显示图片信息 function pic(){ $id("picture").src = arrImg[index]; $id("order").innerHTML = (index+1)+"/"+4; $id("info").innerHTML = arrText[index]; } pic(); //2-点击左右箭头控制图片信息的改变 //右箭头 $id("next").onclick = function(){ index++; if(shunxu&& index==arrImg.length){ //顺序播放时 alert("已经是最后一张了"); index--; } else if(!shunxu&& index==arrImg.length){ //循环播放时 index = 0; } pic(); } //左箭头 $id("prev").onclick = function(){ index--; if(shunxu&&index==-1){ alert("已经是第一张了") index = 0; } else if(!shunxu&& index==-1){ index = arrImg.length-1 } pic(); } //3-点击循环 或 顺序播放按钮 控制开关变量的改变 $id("round").onclick = function(){ shunxu = false; } $id("single").onclick = function(){ shunxu = true; } </script>