轮播是html页面中比较常见的一种展现形式，也是基础，把轮播图做好，是排版中比较关键的

1.首先是轮播的html元素放置；做轮播之前，要有一个初步的认识

2.每个元素的位置怎样摆放，也是很关键的，这里所说的布局

3.js轮播的动态展现过程

做好以上三步，轮播基本上就出来的

首先 .html代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.  
  7.      <link rel="stylesheet" href="./css/wufenstyle.css">
  8.      <script src="./js/jquery.js"></script>
  9.      <script src="./js/wufeng.js"></script>
  10.  </head>
  11.  <body>
  12.      <div class="showbox">
  13.          <div class="imgbox">
  14.              <img src="./img/porsche-normal5.jpg">
  15.              <img src="./img/porsche-normal1.jpg">
  16.              <img src="./img/porsche-normal2.jpg">
  17.              <img src="./img/porsche-normal3.jpg">
  18.              <img src="./img/porsche-normal4.jpg">
  19.              <img src="./img/porsche-normal5.jpg">
  20.              <img src="./img/porsche-normal1.jpg">
  21.          </div>
  22.          <div class="pre" >
  23.              <span></span>
  24.          </div>
  25.          <div class="aft" >
  26.              <span></span>
  27.          </div>
  28.          <ul class="odot">
  29.              <ul class="lis">
  30.                  <li class="active"></li>
  31.                  <li class="changtai"></li>
  32.                  <li class="changtai"></li>
  33.                  <li class="changtai"></li>
  34.                  <li class="changtai"></li>
  35.              </ul>
  36.          </ul>
  37.      </div>
  38.  </body>
  39.  </html>

然后是 .css 页面布局

  1.  *{
  2.      margin:;
  3.      padding:;
  4.  }
  5.  img{
  6.       margin:;
  7.       padding:;
  8.  }
  9.  li{
  10.      list-style-type: none;
  11.  }
  12.  .active{
  13.      background:url('../img/active.png') no-repeat 0 0;
  14.  }
  15.  .changtai{
  16.      background:url('../img/none.png') no-repeat 0 0;
  17.  }
  18.  div.showbox{
  19.      position:relative;
  20.      width:100%;
  21.      height:800px;
  22.      overflow: hidden;
  23.  }
  24.  div.imgbox{
  25.      position:absolute;
  26.      width:200000px;
  27.      height:100%;
  28.      left:;
  29.  }
  30.  div.imgbox img{
  31.      height:100%;
  32.      position: relative;
  33.      float:left;
  34.  }
  35.  div.showbox div.pre{
  36.      position: relative;
  37.      float:left;
  38.      width:60px;
  39.      height:100%;
  40.  }
  41.  div.showbox div.pre span{
  42.      position: absolute;
  43.      left:;
  44.      right:;
  45.      top:;
  46.      bottom:;
  47.      margin:auto;
  48.      width:40px;
  49.      height:60px;
  50.      background: url('../img/toleft01.png') no-repeat 0 0;
  51.      cursor:pointer;
  52.      cursor:hand;
  53.  }
  54.  div.showbox div.aft{
  55.      position: relative;
  56.      float:right;
  57.      width:60px;
  58.      height:100%;
  59.  }
  60.  div.showbox div.aft span{
  61.      position: absolute;
  62.      left:;
  63.      right:;
  64.      top:;
  65.      bottom:;
  66.      margin:auto;
  67.      width:40px;
  68.      height:60px;
  69.      background: url('../img/toright01.png') no-repeat 0 0;
  70.      cursor:pointer;
  71.      cursor:hand;
  72.  }
  73.  div.showbox ul.odot{
  74.      position: absolute;
  75.      width:100%;
  76.      height:100px;
  77.      bottom: 15px;
  78.  }
  79.  div.showbox ul.odot ul.lis{
  80.      position: absolute;
  81.      left:;
  82.      right:;
  83.      top:;
  84.      bottom:;
  85.      margin:auto;
  86.      width:200px;
  87.      height:30px;
  88.  }
  89.  div.showbox ul.odot ul.lis li{
  90.      display: inline-block;
  91.      width:15px;
  92.      height:15px;
  93.      margin:5px;
  94.      cursor:pointer;
  95.      cursor:hand;
  96.  }

最后是 .js代码：

  1.  $(function(){
  2.      var O_showbox = $('div.showbox');
  3.      var O_imgbox = $('div.showbox div.imgbox');
  4.      var O_imgs = $('div.showbox div.imgbox img');
  5.      var O_pre = $('div.showbox div.pre');
  6.      var O_aft = $('div.showbox div.aft');
  7.      var O_lis = $('div.showbox ul.odot ul.lis li');
  8.      var timer = null;
  9.      var O_index = 1;
  10.      var oshow_width = O_showbox.width();
  11.      var O_imgs_len = O_imgs.length;
  12.      O_imgs.each(function(){
  13.          $(this).css('width',oshow_width+'px');
  14.      });
  15.      O_imgbox.css('width',oshow_width*O_imgs_len +'px');
  16.  
  17.      O_imgbox.css('left','-' + oshow_width + 'px');
  18.      O_aft.on('click',function(){
  19.        O_index++;
  20.        var target_left =  -O_index*oshow_width;
  21.        O_imgbox.stop(false,true).animate({'left':target_left+'px'},function(){
  22.             if(O_index >= O_imgs_len-1){
  23.                  O_index=1;
  24.                  O_imgbox.css('left','-' + oshow_width + 'px');
  25.              };
  26.              O_lis.removeClass('active').removeClass('changtai');
  27.              O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai');
  28.        });
  29.      });
  30.     O_pre.on('click',function(){
  31.        O_index--;
  32.        var target_left =  -O_index*oshow_width;
  33.        O_imgbox.stop(false,true).animate({'left':target_left+'px'},function(){
  34.             if(O_index <= 0 ){
  35.                  O_index=O_imgs_len-2;
  36.                  O_imgbox.css('left','-' + oshow_width*O_index + 'px');
  37.              };
  38.              O_lis.removeClass('active').removeClass('changtai');
  39.              O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai');
  40.        });
  41.      });
  42.      function aoto_play(){
  43.          timer = setInterval(function(){
  44.              O_aft.click();
  45.          },1500)
  46.      };
  47.      aoto_play();
  48.      O_lis.on('click',function(){
  49.          var index= $(this).index();
  50.          O_index =index + 1;
  51.          var target_left =  -O_index*oshow_width;
  52.          O_imgbox.stop(false,true).animate({'left':target_left+'px'});
  53.          O_lis.removeClass('active').removeClass('changtai');
  54.          O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai');
  55.      });
  56.      O_showbox.hover(function(){
  57.          clearInterval(timer);
  58.      },function(){
  59.          aoto_play();
  60.      });
  61.  
  62.      // 自适应
  63.      var Oz_width = 1903; //初始状态的宽度
  64.      var Oz_height = 800; //初始状态的高度
  65.      var Oz_ratio = Oz_height/Oz_width ; // 自适应高宽比率
  66.  
  67.      function zishiying(){
  68.         var curwidth =  $(document.body).width() ;
  69.          //初始化
  70.          // 设定显示divbox的宽为视窗宽度，高度为宽度按比例缩放
  71.         O_showbox.width( curwidth+'px');
  72.         O_showbox.height(  parseInt(curwidth*Oz_ratio) + 'px' );
  73.         //设置图片的高度和宽度
  74.         O_imgs.each(function(){
  75.           $(this).css('width',oshow_width+'px');
  76.           $(this).css('height',parseInt(curwidth*Oz_ratio) + 'px' );
  77.         });
  78.         // 设定imgbox的高度和宽度
  79.         O_imgbox.css('width',curwidth*O_imgs_len +'px');
  80.         O_imgbox.css('height',parseInt(curwidth*Oz_ratio) + 'px' );
  81.  
  82.      }
  83.      zishiying();
  84.      $(window).resize(function(){
  85.          zishiying();
  86.          //  window.location.reload();
  87.      });
  88.  });

以上三个部分完成，轮播就OK了；

下面对代码进行说明：html和css部分就略过了，说一下js的部分

1. 首先：获取元素及初始化数据

2. 写点击事件：点击展示下一页和上一页，这里主要是和索引相关，下一页则索引自加，上一页则索引自减；

利用animate的移动规则，先移动，然后判断索引；确认是否已经到最后一页，或者第一页

因为我们做的是无缝轮播，图片放置时第一页和最后一页是重复的，这样做一个判断，并作出相应的处理，使图片移动时，看起来是一种无缝状态

3. 设定自动播放和小点点击事件，轮播停止和重新开始事件

4.设定轮播图片的自适应：

综合：

基本上可以实现轮播自适应，但是有一个问题，就是在图片轮播进时，改变浏览器的大小时，不太匹配，有时候会把图片显示不全，或者显示第一张图片的一般，另一张图片的一部分；

如以上第4点，在$(window).resize()事件中加入window.location.reload() 刷新时，显示不全的问题得到解决了，但是刷新时，会出现空白闪动，这给人的体验不太好

总结一下：除了自适应有问题外，轮播基本上实现了

自适应的问题暂时还不知道怎样解决，欢迎各位看到后留言，告诉我自适应的方法

附：后记：11/11 再次测试时：

把自适应中，var curwidth 改成 oshow_width, 相应的curwidth全部换成oshow_width;(此改变是为了同步，觉得没有必要多设一个参数)；

测试时，轮播图片在窗口改变过程中，还是有显示不全的现象（即只显示一张图片的一部分，另一张图片的另一部分），但是再切换到下一页或者自动轮播到下一页时，恢复正常了；

末尾也出现空白界面的现象也没有再出现

----虽然解决了一些问题，但是还是没有找到问题的根因，疑惑中...............

效果图如下：

Jquery无缝轮播图的制作的更多相关文章

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

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

  2. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  3. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

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

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

  5. 用js和jQuery做轮播图

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

  6. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  7. 记一个jquery 无缝轮播的制作方法

    接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...

  8. 每次移1px的无缝轮播图

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

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

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

随机推荐

  1. JVM 之：Class 类文件结构

    类文件结构 Class 文件是一组以8位字节为基础单位的二进制流,各个数据项目严格按照顺序紧凑地排列在 Class 文件中,中间没有添加任何分隔符,这使得整个 Class 文件中存储的内容几乎全部都是 ...

  2. gitlab安装教程、gitlab官网、英文文档

    gitlab官网 https://about.gitlab.com/ gitlab安装和官网英文文档 https://about.gitlab.com/downloads/ 清华大学tuna镜像源 G ...

  3. <dedecms>织梦内页调用会员信息

    1.织梦CMS v5.7调用文章所属会员信息标签 打开官方默认模板article_artcile.htm,我们可以提取出如下代码:  {dede:memberinfos}   会员头像:<a h ...

  4. Extjs 分页传参方法

    第一种(常用): var proxy = new Ext.data.HttpProxy({url : url}) var store = new Ext.data.Store({ pruneModif ...

  5. JSSDK微信自定义分享朋友圈

    服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议       ...

  6. AIX6.1 线程模型说明

    引文:线程模型(Threading Model)默认从进程域 (M:N 模型 ) 改为系统全局域 (1:1 模型 ) 在 AIX 5L 中,pthread 线程的默认模型是 m:n 方式,而从 AIX ...

  7. gc之六--Minor GC、Major GC、Full GC以及Mixed GC之间的区别

    目录: GC之一--GC 的算法分析.垃圾收集器.内存分配策略介绍 GC之二--GC日志分析(jdk1.8)整理中 GC之三--GC 触发Full GC执行的情况及应对策略 gc之四--Minor G ...

  8. java-appium-527 WebDriver协议&针对控件的操作

    1.WebDriver协议 https://www.w3.org/TR/webdriver/#list-of-endpoints 1.1查看当前所有的session情况 http://127.0.0. ...

  9. 关于DELL服务器如果采购散件，进行服务器升级的相关说明

    拿DELL服务器内存来说明这个情况,其他硬盘等等是 一样的: 1.DELL服务器的内存散件,从购买之日起,质保期是一年: 2.但是如果你把内存插到能兼容这个内存的服务器上去使用,请注意我的字眼,是能兼 ...

  10. TensorFlow系列专题（一）：机器学习基础