基于jQuery实现左右图片轮播（原理通用）

177 阅读 0 评论 117 点赞

我是靠谱客的博主时尚航空，最近开发中收集的这篇文章主要介绍基于jQuery实现左右图片轮播（原理通用），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文为大家分享了jQuery实现左右图片轮播代码，供大家参考，具体实现内容如下

运行效果图：

重点！！！

实现原理：

通过判断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">
   <!--
    这里为上一页下一页点击按钮
   -->
   <span class="pre">-</span>
   <span class="next">+</span>
   <!--
    此处为轮播主体，颜色块代替。图片自加
   -->
   <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">
    <span class="red"></span>
    <span></span>
    <span></span>
    <span></span>
   </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>

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，帮助大家实现一个简单大方的图片轮播效果。