基本信息
源码名称：基于jQuery实现简单图片轮播
源码大小：0.13M
文件格式：.zip
开发语言：CSS
更新时间：2017-12-13
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

不论大型企业网站还是个人博客网站，现今基本都会有主页轮播的这个效果。在这里我就来简单介绍一种基于jQuery实现简单图片轮播的方法。
实现思想主要是通过判断设定index值的大小变化来判断图片左移还是右移；通过控制图片的left值，加个定时器来达到一个轮播的效果。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>轮播demo---更多资源www.chenhui.shop</title>
 </head>
 <!--在线引入jquery-3.2.1.min.js，当然你也可以下载到本地，然后本地引入，这里为了更好的演示，
 方便大家直接下载到本地了应用，采用了在线引入jquery-3.2.1.min.js库-->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--CSS样式，为了显示方便，直接在HTML代码中，没有另外写css文件-->
  <style type="text/css">
          .banner {
            margin: 0 auto;
            border: 4px dashed black;
            width: 50%;
            height: 300px;
            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: 50%;
            top: 90%;
            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 {
            top:42%;
            left: 0px
          }

          .banner .next {
            top:42%;
            right: 0px
          }

  </style>
 <body>
 <!--轮播模块-->  
  <div class="banner">
   <!-- 这里为上一页下一页点击按钮 -->
   <span class="pre"> < </span>
   <span class="next"> > </span>
   <!-- 此处为轮播主体，图片。-->
   <a href="###" class="first"><img src="images/1.jpg"/></a>
   <a href="###" ><img src="images/2.jpg"/></a>
   <a href="###" ><img src="images/3.jpg"/></a>
   <!-- 此处为轮播部分下方小点选择-->
   <div class="choose">
    <span class="red"></span>
    <span></span>
    <span></span>
   </div>
  </div>
  <!--Js轮播实现代码 -->
  <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>2){
     $index=0
    }
    $(".choose span").eq($index).addClass("red").siblings().
      removeClass("red");
    next();
    return $exdex=$index;
   });
   //上一页的点击事件
   $(".pre").click(function(){
    $index--;
    if($index<0){
     $index=2
    };
    $(".choose span").eq($index).addClass("red").siblings().
     removeClass("red");
    pre();
    return $exdex=$index;
   });
   //加个定时器3000ms也就是3秒轮播，正常轮播
   var atime=setInterval(function(){
    $(".next").click();   
   },3000);
   //这里为右移和左移的事件函数。
   //右移基本原理就是先让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>