在同一文件里的2个页面代码在点击左右2个三角箭头时实现跳转（即隐藏当前页展示下一页）：html+css+js

<header>

<style type="text/css">

.dialog .arrow-l{position:absolute;top:45%;left:-50px;cursor:pointer;z-index:99;}
.dialog .arrow-r{position:absolute;top:45%;right:-50px;cursor:pointer;z-index:99;}

.dialog{position:relative;width:1100px;margin:0 auto;margin-top:10px;}

</style>

<script type="text/javascript">
    $(function(){
   //点击右侧箭头，向右翻
  var sec = $("section");
  var size = $("section").size();
  $(".arrow-r").click(function(){
       var index=1;
       for (var i = size - 1; i >= 0; i--) {
            if($(sec[i]).css("display") == "block"){
                 index = i;
            }
      };
      index++;
      if(index<=1){
           for (var j = size - 1; j >= 0; j--) {
                if(j == index){
                    $(sec[j]).fadeIn("slow");
                }else{
                     $(sec[j]).hide();
                }
           };
      }
      beforePrint();
  });
   //点击左侧箭头，向左翻
   $(".arrow-l").click(function(){
       var index=1;
       for (var i = sec.length - 1; i >= 0; i--) {
            if($(sec[i]).css("display") == "block"){
                 index = i;
            }
      };
      index--;
      if(index>=0){
          for (var j = sec.length - 1; j >= 0; j--) {
               if(j == index){
                   $(sec[j]).fadeIn("slow");
               }else{
                    $(sec[j]).hide();
               }
         };
    }
 beforePrint();

});
</script>

</header>

<body>

<div class="dialog">
      <img class="arrow-l" src="<c:url value='/images/arrow-l.png'/>" />
      <img class="arrow-r" src="<c:url value='/images/arrow-r.png'/>" />

      <section class="sec-prev">
            <table class="table w914">

　　　　       <tr><td></td><td></td><td></td><td></td></tr>

                 <tr><td></td><td></td><td></td><td></td></tr>

            </table>

     </section>

     <section class="sec-next">
           <table class="table w914">

                <tr><td></td><td></td><td></td><td></td></tr>

                <tr><td></td><td></td><td></td><td></td></tr>

          </table>

     </section>

</body>

posted @ 2014-05-22 15:46  photoshop爱好者  阅读(156)  评论(0)    收藏  举报