源码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <title>JQuery轮播图</title>
  7.     <style>
  8.         *{
  9.             padding:0;
  10.             margin:0;
  11.         }
  12.         .container{
  13.             width:600px;
  14.             height:400px;
  15.             overflow: hidden;
  16.             position:relative;
  17.             margin:0 auto;
  18.         }
  19.         .list{
  20.             width:3000px;
  21.             height:400px;
  22.             position:absolute;
  23.  
  24.         }
  25.         .list>img{
  26.             float:left;
  27.             width:600px;
  28.             height:400px;
  29.         }
  30.         .pointer{
  31.             position:absolute;
  32.             width:100px;
  33.             bottom:20px;
  34.             left:250px;
  35.         }
  36.         .pointer>span{
  37.             cursor:pointer;
  38.             display:inline-block;
  39.             width:10px;
  40.             height:10px;
  41.             background: #7b7d80;
  42.             border-radius:50%;
  43.             border:1px solid #fff;
  44.         }
  45.         .pointer .on{
  46.             background: #28a4c9;
  47.         }
  48.         .arrow{
  49.             position:absolute;
  50.             text-decoration:none;
  51.             width:40px;
  52.             height:40px;
  53.             background: #727d8f;
  54.             color:#fff;
  55.             font-weight: bold;
  56.             line-height:40px;
  57.             text-align:center;
  58.             top:180px;
  59.             display:none;
  60.         }
  61.         .arrow:hover{
  62.             background: #0f0f0f;
  63.         }
  64.         .left{
  65.           left:0;
  66.         }
  67.         .right{
  68.             right:0;
  69.         }
  70.         .container:hover .arrow{
  71.             display:block;
  72.         }
  73.     </style>
  74. </head>
  75.  
  76. <body>
  77.     <div class="container">
  78.         <div class="list" style="left:0px;">
  79.             <!--<img src="../static/image/photo1.jpg" alt="5"/>-->
  80.             <img src="../static/image/banner.jpg" alt="1"/>
  81.             <img src="../static/image/slide1.jpg" alt="2"/>
  82.             <img src="../static/image/slide1.jpg" alt="3"/>
  83.             <img src="../static/image/slide1.jpg" alt="4"/>
  84.             <img src="../static/image/photo1.jpg" alt="5"/>
  85.             <!--<img src="../static/image/banner.jpg" alt="1"/>-->
  86.         </div>
  87.         <div class="pointer">
  88.             <span index="1" class="on"></span>
  89.             <span index="2"></span>
  90.             <span index="3"></span>
  91.             <span index="4"></span>
  92.             <span index="5"></span>
  93.         </div>
  94.         <a href="#" class="arrow left">&gt;</a>
  95.         <a href="#" class="arrow right">&lt;</a>
  96.     </div>
  97.  
  98.     <script src="../static/js/jquery-3.2.1.min.js"></script>
  99.     <script>
  100.         var imgCount = 5;
  101.         var index = 1;
  102.         var intervalId;
  103.         var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
  104.         //自动轮播功能 使用定时器
  105.         autoNextPage();
  106.         function autoNextPage(){
  107.             intervalId = setInterval(function(){
  108.                 nextPage(true);
  109.             },3000);
  110.         }
  111.         //当鼠标移入 停止轮播
  112.         $('.container').mouseover(function(){
  113.             console.log('hah');
  114.             clearInterval(intervalId);
  115.         });
  116.         // 当鼠标移出，开始轮播
  117.         $('.container').mouseout(function(){
  118.             autoNextPage();
  119.         });
  120.         //点击下一页 上一页的功能
  121.         $('.left').click(function(){
  122.             nextPage(true);
  123.         });
  124.         $('.right').click(function(){
  125.             nextPage(false);
  126.         });
  127.         //小圆点的相应功能  事件委托
  128.         clickButtons();
  129.         function clickButtons(){
  130.             var length = buttonSpan.length;
  131.             for(var i=0;i<length;i++){
  132.                 buttonSpan[i].onclick = function(){
  133.                     $(buttonSpan[index-1]).removeClass('on');
  134.                     if($(this).attr('index')==1){
  135.                         index = 5;
  136.                     }else{
  137.                         index = $(this).attr('index')-1;
  138.                     }
  139.                     nextPage(true);
  140.  
  141.                 };
  142.             }
  143.         }
  144.         function nextPage(next){
  145.             var targetLeft = 0;
  146.             //当前的圆点去掉on样式
  147.             $(buttonSpan[index-1]).removeClass('on');
  148.             if(next){//往后走
  149.                 if(index == 5){//到最后一张，直接跳到第一张
  150.                     targetLeft = 0;
  151.                     index = 1;
  152.                 }else{
  153.                     index++;
  154.                     targetLeft = -600*(index-1);
  155.                 }
  156.  
  157.             }else{//往前走
  158.                 if(index == 1){//在第一张，直接跳到第五张
  159.                     index = 5;
  160.                     targetLeft = -600*(imgCount-1);
  161.                 }else{
  162.                     index--;
  163.                     targetLeft = -600*(index-1);
  164.                 }
  165.  
  166.             }
  167.             $('.list').animate({left:targetLeft+'px'});
  168.             //更新后的圆点加上样式
  169.             $(buttonSpan[index-1]).addClass('on');
  170.  
  171.         }
  172.  
  173.     </script>
  174. </body>
  175.  
  176. </html>

效果图：

原理：

页面结构方面：

  • 将轮播图容器设置成相对定位，宽度设置成图片的宽度；容器中分为四部分：轮播的图片；点击的小按钮；前一张；后一张

样式方面：

  • 轮播图容器为相对定位，宽度/高度设置成图片的宽度/高度，设置overflow为hidden；
  • 容器中的每一部分都设置成绝对定位，放到相应的位置；
  • 轮播图片的容器宽度设置成所有图片的宽度和，left开始先设置为0；
  • 每张图片宽度一样，都设成左浮动，左右图片都在一行排列，所以轮播图的实质是装有图片的容器的移动，每次移动的距离为一张图片的宽度，这样每次就只显示一张图片；
  • 前一张/后一张设置成display为none，当鼠标移入总容器时，再设置成display为block

功能方面：

  • 自动轮播为一个定时循环机制setInteval，鼠标移入，循环停止，移除循环继续；

JQuery实现轮播图及其原理的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  3. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  4. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  5. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. jquery改造轮播图1

    g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...

  7. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  8. jQuery封装轮播图插件

    // 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...

  9. 自己随意写了个简单的依赖jquery的轮播图

    //轮播图 function Switcher(obj){ this.box = $(obj.box); this.width = this.box.width(); this.banner = $( ...

随机推荐

  1. 软件工程（四）数据流图DFD

    结构化分析中,常用到数据模型为实体关系图,功能模型是数据流图 DFD 可以认为,一个基于计算机的信息处理系统由数据流和一系列的转换构成,这些转换将输入数据流变换为输出数据流.数据流图就是用来刻画数据流 ...

  2. 四则运算-ppt演示

     

  3. shiro课程的学习

    1.shiro的课程目标 (1)shiro的整体框架 各组件的概念 (2)shiro 认证 授权的过程 (3)shiro自定义的Reaml Filter (4)shiro session 管理 (5) ...

  4. WIN10快捷键

    WIN10快捷键 多桌面切换:WIN + CTRL +  ←/→ 桌面横竖屏转向:ALT + CTRL +  ←/→

  5. vuex的数据交互

    methods:{ ...mapMutations({aaa:hs}) //将mutations的方法暴露出来,进行调用 aaa是他的名字 ...mapActions(['hs']) //将actio ...

  6. fswatch rsync配置使用 rsync 传输大量细小文件

    贴一个脚本这个脚本是rsync远程同步使用的一个脚本 rsync -avz --progress --exclude .git /Users/piperck/Desktop/gogogo/x pipe ...

  7. servlet生成验证码代码

    package forward; import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt ...

  8. BZOJ3159决战——树链剖分+非旋转treap(平衡树动态维护dfs序)

    题目描述 输入 第一行有三个整数N.M和R,分别表示树的节点数.指令和询问总数,以及X国的据点. 接下来N-1行,每行两个整数X和Y,表示Katharon国的一条道路. 接下来M行,每行描述一个指令或 ...

  9. 注册页面手机验证码无跳转接收[html+js+ajax+php]

    [学习笔记] 来源:注册时需要使用短信验证码,但是注册的时候,点击接收验证码时,会产生跳转(尼玛,这不是我想要的啊!o(╥﹏╥)o) 查询资料和看书之后,知道使用js+ajax可以实现,就从网上找了一 ...

  10. Sql 标识列 增长1000

    Sql 标识列 增长1000 的解决办法: 1. Open "SQL Server Configuration Manager" 2. Click "SQL Server ...