皇家88娱乐平台jQuery制作轻易的图纸轮播效果,基于jQuery达成左右图片轮播

演示图:

本文为我们分享了jQuery达成左右图形轮播代码,供大家参谋,具体贯彻内容如下

依附jQuery落成左右图片轮播(原理通用),

本文为大家大快朵颐了jQuery完成左右图纸轮播代码,供大家参照他事他说加以考察,具体达成内容如下

运作效果图:

皇家88娱乐平台 1

重点!!!

落到实处原理:

经过判别index值的尺寸变化来判断图片左移仍旧右移。通过操纵图片的left值,来实现二个轮播的成效。

实际代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <script src="js/jquery.min.js"></script>
  <style>
    .banner{
      margin:0 auto;
      border: 4px dashed black;
      width:400px;
      height:200px;
      position: relative;
      overflow:hidden;
    }
    .banner a{
      z-index: 100;
      display: block;
      width:100%;
      height: 100%;
      position: absolute;
      left:100%;
      top:0;
    }
    .banner .first{
      left:0;
    }
    .banner a img{
      width:100%;
      height: 100%;
    }
    .choose{
      z-index: 1000;
      position: absolute;
      left:150px;
      top:180px;
      width:100px;
      height: 10px;
    }
    .choose span{
      margin-right: 15px;
      float: left;
      display:block;
      background: blue;
      width:10px;
      height: 10px;
      border-radius: 10px;
    }
    .choose span:hover{
      background: red;
    }
    .choose .red{
      background: red;
    }
    .banner .pre,.next{
      cursor:pointer;
      text-align:center;
      border-radius:20px;
      display:block;
      background:#cccccc;
      opacity:0.4;
      text-decoration: none;
      z-index: 200;
      display:block;
      width:40px;
      height: 40px;
      font-size: 40px;
      color:red;
      position: absolute;
      top:80px;
    }
    .banner .pre{
      left:0px
    }
    .banner .next{
      right: 0px;
    }
  </style>
  <body>

    <div class="banner">
      <!--
        这里为上一页下一页点击按钮
      -->
      -
      +
      <!--
        此处为轮播主体,颜色块代替。图片自加
      -->
      <a href="###" class="first" style="background: pink;"></a>
      <a href="###" style="background: blue;"><img src="images/banner1.jpg"/></a>
      <a href="###" style="background: greenyellow;"><img src="images/banner2.jpg"/></a>
      <a href="###" style="background: deepskyblue;"><img src="images/banner3.jpg"/></a>
      <!--
        此处为轮播部分下方小点选择
      -->
      <div class="choose">




      </div>
    </div>

    <script>
      /*定义两个变量,保存当前页码和上一页页码*/
      var $index=0;
      var $exdex=0;
      /*小点的鼠标移入事件,触发图片左移还是右移*/
      $(".choose span").mouseover(function(){
        //获取当前移入的index值
        $index=$(this).index();    
        //首先让点的颜色变化,表示选中
        $(".choose span").eq($index).addClass("red").siblings().
            removeClass("red");
        //判断如果index变小,证明图片要往左移动。变大则为右移
        if($index>$exdex){
          next();
        }else if($index<$exdex){
          pre();
        }
        //移动完毕将当前index值替换了前页index
        return $exdex=$index;
      });
      //下一页的点击事件。在右移基础上加了最大index判断
      $(".next").click(function(){
        $index++;
        if($index>3){
          $index=0
        }
        $(".choose span").eq($index).addClass("red").siblings().
            removeClass("red");
        next();
        return $exdex=$index;
      });
      //上一页的点击事件
      $(".pre").click(function(){
        $index--;
        if($index<0){
          $index=3
        };
        $(".choose span").eq($index).addClass("red").siblings().
          removeClass("red");
        pre();
        return $exdex=$index;
      });
      //加个定时器,正常轮播
      var atime=setInterval(function(){
        $(".next").click();      
      },1000);
      //这里为右移和左移的事件函数。
      //右移基本原理就是先让exdex定位的left左移百分百,而选中的当前页从屏幕右边移入,left变为0
      function next(){
        $(".banner a").eq($index).stop(true,true).
            css("left","100%").animate({"left":"0"});
        $(".banner a").eq($exdex).stop(true,true).
            css("left","0").animate({"left":"-100%"});
      }
      function pre(){
        $(".banner a").eq($index).stop(true,true).
          css("left","-100%").animate({"left":"0"});
        $(".banner a").eq($exdex).stop(true,true).
          css("left","0").animate({"left":"100%"});
      }
    </script>
  </body>
</html>

如上正是本文的全体内容,援救我们完成贰个简练大方的图样轮播效果。

皇家88娱乐平台 2

运作效果图:

您或者感兴趣的篇章:

  • 据说JQuery的得以实现图片轮播效果(宗旨图)
  • 基于jquery的图片轮播 tab切换组件
  • 12款特出的美丽的女人型—jquery图片轮播插件—前端开荒必备
  • jQuery图片轮播的切实落到实处
  • 原生js和jquery实现图片轮播特效
  • 原生js和jquery完成图片轮播淡入淡出效果
  • jQuery实现图片轮播特效代码共享
  • jQuery图片轮播滚动切换代码分享
  • jquery达成横向图片轮播特效代码分享

本文为大家大饱眼福了jQuery完成左右图片轮播代码,供我们参考,具体落到实处内容如下
运行作效果果图:…

皇家88娱乐平台 3

皇家88娱乐平台 4

骨干代码:

重点!!!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图