毕竟新人，写点基础的小东西，希望能和大家沟通交流，提高自己的水平。

这个是应用较多的轮播部分，希望能和大家分享一下思路，拓宽视野。

话不多说，上内容。

我的思路很简单就是通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值，来达到一个轮播的效果。

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title></title>
  6.      </head>
  7.      <script src="js/jquery.min.js"></script>
  8.      <style>
  9.          .banner{
  10.              margin:0 auto;
  11.              border: 4px dashed black;
  12.              width:400px;
  13.              height:200px;
  14.              position: relative;
  15.              overflow:hidden;
  16.          }
  17.          .banner a{
  18.              z-index: 100;
  19.              display: block;
  20.              width:100%;
  21.              height: 100%;
  22.              position: absolute;
  23.              left:100%;
  24.              top:0;
  25.          }
  26.          .banner .first{
  27.              left:0;
  28.          }
  29.          .banner a img{
  30.              width:100%;
  31.              height: 100%;
  32.          }
  33.          .choose{
  34.              z-index: 1000;
  35.              position: absolute;
  36.              left:150px;
  37.              top:180px;
  38.              width:100px;
  39.              height: 10px;
  40.          }
  41.          .choose span{
  42.              margin-right: 15px;
  43.              float: left;
  44.              display:block;
  45.              background: blue;
  46.              width:10px;
  47.              height: 10px;
  48.              border-radius: 10px;
  49.          }
  50.          .choose span:hover{
  51.              background: red;
  52.          }
  53.          .choose .red{
  54.              background: red;
  55.          }
  56.          .banner .pre,.next{
  57.              cursor:pointer;
  58.              text-align:center;
  59.              border-radius:20px;
  60.              display:block;
  61.              background:#cccccc;
  62.              opacity:0.4;
  63.              text-decoration: none;
  64.              z-index: 200;
  65.              display:block;
  66.              width:40px;
  67.              height: 40px;
  68.              font-size: 40px;
  69.              color:red;
  70.              position: absolute;
  71.              top:80px;
  72.          }
  73.          .banner .pre{
  74.              left:0px
  75.          }
  76.          .banner .next{
  77.              right: 0px;
  78.          }
  79.      </style>
  80.      <body>
  81.  
  82.          <div class="banner">
  83.              <!--
  84.                  这里为上一页下一页点击按钮
  85.              -->
  86.              <span class="pre">-</span>
  87.              <span class="next">+</span>
  88.              <!--
  89.                  此处为轮播主体，颜色块代替。图片自加
  90.              -->
  91.              <a href="###" class="first" style="background: pink;"></a>
  92.              <a href="###" style="background: blue;"><img src="data:images/banner1.jpg"/></a>
  93.              <a href="###" style="background: greenyellow;"><img src="data:images/banner2.jpg"/></a>
  94.              <a href="###" style="background: deepskyblue;"><img src="data:images/banner3.jpg"/></a>
  95.              <!--
  96.                  此处为轮播部分下方小点选择
  97.              -->
  98.              <div class="choose">
  99.                  <span class="red"></span>
  100.                  <span></span>
  101.                  <span></span>
  102.                  <span></span>
  103.              </div>
  104.          </div>
  105.  
  106.          <script>
  107.              /*定义两个变量，保存当前页码和上一页页码*/
  108.              var $index=0;
  109.              var $exdex=0;
  110.              /*小点的鼠标移入事件，触发图片左移还是右移*/
  111.              $(".choose span").mouseover(function(){
  112.                  //获取当前移入的index值
  113.                  $index=$(this).index();
  114.                  //首先让点的颜色变化，表示选中
  115.                  $(".choose span").eq($index).addClass("red").siblings().
  116.                          removeClass("red");
  117.                  //判断如果index变小，证明图片要往左移动。变大则为右移
  118.                  if($index>$exdex){
  119.                      next();
  120.                  }else if($index<$exdex){
  121.                      pre();
  122.                  }
  123.                  //移动完毕将当前index值替换了前页index
  124.                  return $exdex=$index;
  125.              });
  126.              //下一页的点击事件。在右移基础上加了最大index判断
  127.              $(".next").click(function(){
  128.                  $index++;
  129.                  if($index>3){
  130.                      $index=0
  131.                  }
  132.                  $(".choose span").eq($index).addClass("red").siblings().
  133.                          removeClass("red");
  134.                  next();
  135.                  return $exdex=$index;
  136.              });
  137.              //上一页的点击事件
  138.              $(".pre").click(function(){
  139.                  $index--;
  140.                  if($index<0){
  141.                      $index=3
  142.                  };
  143.                  $(".choose span").eq($index).addClass("red").siblings().
  144.                      removeClass("red");
  145.                  pre();
  146.                  return $exdex=$index;
  147.              });
  148.              //加个定时器，正常轮播
  149.              var atime=setInterval(function(){
  150.                  $(".next").click();
  151.              },1000);
  152.              //这里为右移和左移的事件函数。
  153.              //右移基本原理就是先让exdex定位的left左移百分百，而选中的当前页从屏幕右边移入,left变为0
  154.              function next(){
  155.                  $(".banner a").eq($index).stop(true,true).
  156.                          css("left","100%").animate({"left":"0"});
  157.                  $(".banner a").eq($exdex).stop(true,true).
  158.                          css("left","0").animate({"left":"-100%"});
  159.              }
  160.              function pre(){
  161.                  $(".banner a").eq($index).stop(true,true).
  162.                      css("left","-100%").animate({"left":"0"});
  163.                  $(".banner a").eq($exdex).stop(true,true).
  164.                      css("left","0").animate({"left":"100%"});
  165.              }
  166.          </script>
  167.      </body>
  168.  </html>

希望大家指出问题，交流思路，让我们彼此思路能够更宽广。

致谢

基于jQuery的图片左右轮播，基本原理通用的更多相关文章

  1. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. jQuery图片无缝轮播插件；

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  4. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  5. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

  6. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  7. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  9. Android中使用ImageViewSwitcher实现图片切换轮播导航效果

    前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...

随机推荐

  1. poj 3352 Road Construction【边双连通求最少加多少条边使图双连通&&缩点】

    Road Construction Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10141   Accepted: 503 ...

  2. S2 结业考试前改错汇总

    1. PS:正确答案是A:枚举是值类型,一个类的对象是引用类型. 2. 每张表最多包含1个聚集索引.并且聚集索引会决定记录储存的物理位置.聚集索引不一定要建立在主键字段上.一张表可以没有任何索引. 3 ...

  3. IOI1998 hdu1828 poj1177 Picture

    写了一发扫描线竟然狂WA不止,hdu死活过不了,poj和当时IOI的数据(还花了我1dsdn积分..)都过了. 然后看到谋篇blog里有评论,把数据拿下来发现WA了. 数据是 20 0 1 11 0 ...

  4. 一段经典的node.js 数据库高并发实现

    var proxy = new EventProxy();var status = "ready";var select = function(callback){ proxy.o ...

  5. Android源码是这样搞到的(图解)

    Android学习到一定程度,就一定要多读代码多思考,Android源码就是很好的学习材料,本文就是把Android的源码下载下来.我们知道Android的源码是用Git这个分布式版本号控制工具管理的 ...

  6. STM32F030 IO口外部中断应用

    //==文件exit.h============================================================ #ifndef __EXIT_H #define __ ...

  7. careercup-排序和查找 11.6

    11.6 给定M*N矩阵,每一行.每一列都按升序排序,请编写代码找出某元素. 类似leetcode:Search a 2D Matrix 但是与leetcode中这题不同的是下一行的第一个元素不一定大 ...

  8. Bluetooth in Android 4.2 and 4.3（三）：Enable Bluetooth

    以下是基于Android 4.2代码,对Bluetooth BR/EDR Enable process的分析.BluetoothAdapter类代表的是local device Bluetooth a ...

  9. Apache【第一篇】安装

    一.简介 Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性被广泛使用,是最流行的Web ...

  10. WPF柱状图（支持数据库动态更新）

    之前我们讲到wpf组件基类以及组件开发,现在我们围绕之前的内容去开发一个组件. 效果图请加群查看,在群共享里面. 做出这个呢  是比较繁琐的. 首先要使用我们的基类 继承基类的模板自动生成如下几个文件 ...