js实现图片顺序播放和循环播放

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/srj15110129498/article/details/76900656

效果图如下所示:


代码如下:

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>图片切换</title>
  <style type="text/css">
  *{
  margin:0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  }
  .head{
  width: 400px;
  height: 80px;
  margin: 30px auto;
  }
  .head input{
   
  margin-left: 80px;
  font-size: 16px;
  }
  .head p{
  margin-top:30px;
  font-size: 20px;
  text-align: center;
  }
  /*.head #p3{
  display: block;
  }*/
  .head #p4{
  display: none;
  }
  .box{
  width: 400px;
  height: 400px;
  border: 10px #ccc solid;
  margin: 0px auto;
  position: relative;
  }
  .box img{
  width: 100%;
  height: 100%;
  }
  .box p{
  width: 400px;
  height: 30px;
  background:rgba(0,0,0,.4);
  color:#fff;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 30px;
  text-align: center;
  }
  .box p#num{
  top: 0;
  }
  .box p#title{
  top: 370px;
   
  }
  .box a{
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.6);
  display: block;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  top: 180px;
  color: #333;
  }
  .box a:hover{
  background: rgba(255,255,255,0.3);
   
  }
  .box a#leftbtn{
  left: 10px;
  }
  .box a#rightbtn{
  right: 10px;
  }
   
  </style>
  </head>
  <body>
  <div class="head">
  <input type="button" id="btn1" value="循环切换" alt="">
  <input type="button" id="btn2" value="顺序切换" alt="">
  <p id="p3">图片可从最后一张跳转到第一张循环切换</p>
  <p id="p4">图片只能到最后一张或只能到第一张切换</p>
  </div>
  <div class="box">
  <p id="num">1/4</p>
  <p id="title">图片一</p>
  <img src="img/1.jpg" alt="" id="img">
  <a id="leftbtn" href="javascript:;">&lt;</a>
  <a id="rightbtn" href="javascript:void(0);">&gt;</a>
  </div>
  <!-- void:关键字,指定要计算一个表达式但是不返回值
  javascript:伪协议,表示URL的内容通过JavaScript来执行 -->
  <script type="text/javascript">
  function $(id){
  return document.getElementById(id);
  }
  var btn1=$("btn1");
  var btn2=$("btn2");
  var p3=$("p3");
  var p4=$("p4");
  var p1=$('num');
  var p2=$('title');
  var img=$('img');
  var leftbtn=$("leftbtn");
  var rightbtn=$('rightbtn');
  var arr1=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
  var arr2=['标题一','标题二','标题三','标题四'];
  var num=0;
  // leftbtn.onclick=function(){
  // num--;
  // if(num<0){
  // num=arr1.length-1;
  // }
  // fn();
  // }
  // rightbtn.onclick=function(){
  // num++;
  // if(num>arr1.length-1){
  // num=0;
  // }
  // fn();
  // }
  // function fn(){
  // img.src=arr1[num];
  // p2.innerHTML=arr2[num];
  // p1.innerHTML=(num+1)+" / "+arr1.length;
  // }
  btn1.onclick=function(){
  p3.style.display="block";
  p4.style.display="none";
  leftbtn.onclick=function(){
  num--;
  if(num<0){
  num=arr1.length-1;
  }
  fn();
  }
  rightbtn.onclick=function(){
  num++;
  if(num>arr1.length-1){
  num=0;
  }
  fn();
  }
  function fn(){
  img.src=arr1[num];
  p2.innerHTML=arr2[num];
  p1.innerHTML=(num+1)+" / "+arr1.length;
  }
  }
  btn2.onclick=function(){
  p3.style.display="none";
  p4.style.display="block";
  leftbtn.onclick=function(){
  num--;
  if(num<0){
  alert("这已经是第一张图片了,不能再往前了");
  num=0;
  }
  fn();
   
  }
  rightbtn.onclick=function(){
  num++;
  if(num>arr1.length-1){
  alert("这已经是最后一张图片了,不能再往后了");
  num=arr1.length-1;
  }
  fn();
   
  }
  function fn(){
  img.src=arr1[num];
  p2.innerHTML=arr2[num];
  p1.innerHTML=(num+1)+" / "+arr1.length;
  }
   
  }
  </script>
  </body>
  </html>

展开阅读全文

没有更多推荐了,返回首页