JS代码实现页面切换效果

本文实例为大家分享了JS代码实现页面切换效果的具体代码，供大家参考，具体内容如下

HTML+CSS部分

添加所有页面，和上一页、具体页、下一页的按钮，
设置div样式，默认第一页显示，其他页隐藏。

!DOCTYPE html>
    html>
     head>
     meta charset="UTF-8">
     tITle>
    /title>
     style>
  .item {
      display: none;
      width: 300px;
      height: 400px;
      overflow: hidden;
      position: relative;
  }
        .item>
img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
  }
   .item.active {
      display: block;
  }
     /style>
     /head>
     body>
     div>
      button class="prev" >
    上一页/button>
      button class="BTn">
    1/button>
      button class="btn">
    2/button>
      button class="btn">
    3/button>
      button class="btn">
    4/button>
      button class="next" >
    下一页/button>
     /div>
     div>
      div class="item active">
    img src="img/1.png" height="1191" width="820" />
    /div>
      div class="item">
    img src="img/2.png" height="1191" width="820" />
    /div>
      div class="item">
    img src="img/3.png" height="1191" width="820" />
    /div>
      div class="item">
    img src="img/4.png" height="1191" width="820" />
    /div>
     /div>
     /body>
    /html>
    

js部分

通过按键来实现页面的功能

script type="text/javascript">
 //封装函数、图片显示的部分、传入获取到的div，和被点击的序号 function toggle(eles, active) {
      for(VAR i = eles.length;
     i--;
) {
       eles[i].classname = "item";
 //先让所有div隐藏  }
      eles[active].className = "item active";
//再让被点击的序号对应的div 显示  }
      //获取按键和div  var aBtn = document.getElementsByClassName("btn");
      var aiem = document.getElementsByClassName("item");
      var PRev = document.getElementsByClassName("prev");
      var next = document.getElementsByClassName("next");
      var nowPage = 0;
     //定义当前页，默认值为0；      for(var i = aBtn.length;
     i--;
) {
       aBtn[i].tab = i;
   aBtn[i].onclick=function(){
       toggle(aIem,this.tab);
       nowPage=this.tab;
 //被点击后，保存当前页的序号   }
  }
   //下一页  next[0].onclick = function () {
         nowPage++;
          nowPage %= aBtn.length;
       toggle(aIem,nowPage);
  }
  //上一页  prev[0].onclick=function(){
      nowPage--;
  if(nowPage ==-1){
       nowPage = aBtn.length-1;
  }
     toggle(aIem,nowPage);
   }
    /script>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 基于JS实现翻书效果的页面切换样式
• 简单实现js页面切换功能
• 使用AngularJS实现可伸缩的页面切换的方法
• javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
• js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
• javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）
• Vue.js鼠标悬浮更换图片功能
• js制作的鼠标悬浮时产生的下拉框效果
• js鼠标悬浮出现遮罩层的方法
• JavaScript实现鼠标悬浮页面切换效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！