温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用JavaScript怎么编写一个页面切换效果

发布时间:2021-01-11 14:15:40 来源:亿速云 阅读:269 作者:Leah 栏目:开发技术

这期内容当中小编将会给大家带来有关使用JavaScript怎么编写一个页面切换效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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>

上述就是小编为大家分享的使用JavaScript怎么编写一个页面切换效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI