代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8" />
  5.          <title></title>
  6.          <style type="text/css">
  7.              *{margin:0 auto;padding: 0;}
  8.              #LB_div{overflow:hidden;position: relative;}
  9.              #LB_span{background: #000;display: block;position: absolute;}
  10.              #LB_span img{float: left;}
  11.              #LB_zuo,#LB_you:hover{cursor:none;}
  12.              #LB_ul{list-style: none;display: block;position:absolute;left: 50%; top: 80%;transform: translate(-50%,0);}
  13.              /*#LB_ul li{float:left;text-align: center;background: gold;border-radius:50%;width: 20px;height: 20px;}*//*这行是小圆点的代码*/
  14.              #LB_ul li{background: transparent;display: inline-block;padding-top:4px;box-sizing:border-box}/*这行是小图片的代码*/
  15.              #LB_ul li+li{margin-left: 8px;}
  16.              #LB_ul li:hover{cursor:pointer;background: goldenrod;}
  17.              #LB_zuo{position: absolute; background: #fff;width: 10%; height: 100%;left:0;opacity: 0;}
  18.              #LB_you{position: absolute; background: #fff;width: 10%; height: 100%;right:0;opacity: 0;}
  19.              #LB_left,#LB_right{position: absolute;width: 50px;display: none;}
  20.              #LB_left,#LB_right:hover{cursor:none;}
  21.          </style>
  22.      </head>
  23.      <body>
  24.          <div id="LB_div">
  25.              <span id="LB_span">
  26.                  <img src="img/IMG_20160421_205146.jpg"/>
  27.                  <img src="img/IMG_20160421_205146.jpg"/>
  28.                  <img src="img/IMG_20160421_205146.jpg"/>
  29.                  <img src="img/IMG_20160421_205146.jpg"/>
  30.                  <img src="img/IMG_20160421_205146.jpg"/>
  31.                  <img src="img/IMG_20160421_205146.jpg"/>
  32.                  <img src="img/IMG_20160421_205146.jpg"/>
  33.                  <img src="img/IMG_20160421_205146.jpg"/>
  34.                  <img src="img/IMG_20160421_205146.jpg"/>
  35.              </span>
  36.              <p id="LB_zuo"></p>
  37.              <p id="LB_you"></p>
  38.              <img src="img/Cristal_Intense_072.png" id="LB_left"/>
  39.              <img src="img/Cristal_Intense_069.png" id="LB_right"/>
  40.              <ul id="LB_ul"></ul>
  41.          </div>
  42.  
  43.          <script type="text/javascript" src="js/Xing_js.js" ></script>
  44.          <script>
  45.              var arr=document.querySelectorAll("#LB_span img");
  46.              var div=document.querySelector("#LB_div");
  47.              var span=document.querySelector("#LB_span");
  48.              var zuo=document.querySelector("#LB_zuo");
  49.              var you=document.querySelector("#LB_you");
  50.              var ul=document.querySelector("#LB_ul");
  51.              var jiantou_L=document.querySelector("#LB_left")
  52.              var jiantou_r=document.querySelector("#LB_right")
  53.  
  54.              var b=0;
  55.  
  56.              if(arr.length!=0){//判断有没有图
  57.  
  58.                  //根据所有图片长度设置span的长度
  59.                  span.style.width=(arr.length*arr[0].width)+"px";
  60.                  span.style.left="0px";
  61.                  span.style.transition="0.5s";
  62.  
  63.                  //根据图片设置div的长宽
  64.                  div.style.width=arr[0].width+"px";
  65.                  div.style.height=arr[0].height+"px";
  66.  
  67.  //                console.log(arr[0].width);
  68.                  //根据图片数量设置小圆点
  69.                  for(var i=1;i<=arr.length;i++){
  70.                      var li=document.createElement("li");
  71.  
  72.                      var img=document.createElement("img");//中间这段是小图片的代码
  73.                      img.src=arr[i-1].src;
  74.                      img.setAttribute("style","width: "+parseInt(arr[0].width)*0.1+"px;height"+parseInt(arr[0].height)*0.1+"px;display: inline-block;")
  75.                      li.appendChild(img);
  76.  
  77.                      li.setAttribute("onClick","yuan("+i+")");
  78.                      ul.appendChild(li);
  79.                  }
  80.  
  81.                  //根据每个li的margin-left来设置ul的宽度
  82.                  var li_arr=document.querySelectorAll("li");
  83.                  for(var x=0;x<li_arr.length;x++){
  84.                      b+=parseInt(Xing_getCSS(li_arr[x],"marginLeft"));
  85.                      ul.style.width=parseInt(arr[0].width)*0.1*(arr.length)+b+"px";
  86.                  }
  87.  
  88.                  //正span移动
  89.                  var    i=0;
  90.                  function zheng(){
  91.                      i++;
  92.                      if(i==arr.length){i=0;};
  93.                      span.style.left="-"+arr[0].width*i+"px";
  94.                      biao(i);
  95.                      return i;
  96.                  }
  97.  
  98.                  //负span移动
  99.                  function fu(b){
  100.                      b--;
  101.                      if(b==-1){b=arr.length-1;}
  102.                      span.style.left="-"+arr[0].width*b+"px";
  103.                      biao(b);
  104.                      return b;
  105.                  }
  106.  
  107.                  //小圆点被单击
  108.                  function yuan(m){
  109.                      i=m-2;
  110.                      zheng();
  111.                  }
  112.  
  113.                  //小圆点标亮
  114.                  function biao(d){
  115.                      var li=ul.childNodes;
  116.                      for(var x=0;x<arr.length;x++){
  117.                          if(x==d){
  118.                              li[x].style.background=Xing_RandomColor();
  119.                          }else{
  120.                              li[x].style.background="transparent"
  121.                          }
  122.                      }
  123.  
  124.                  }
  125.  
  126.                  //两键被单击时
  127.                  you.onclick=function(){
  128.                      i=zheng();
  129.                  }
  130.                  zuo.onclick=function(){
  131.                      i=fu(i);
  132.                  }
  133.  
  134.                  zuo.onmouseover=function(){//左右两边的白边和指针跟随
  135.                      this.style.opacity="0.4";
  136.                      this.onmousemove=function(e){
  137.                          var x=e.layerX;
  138.                          var y=e.layerY;
  139.                          jiantou_L.style.display="block"
  140.                          jiantou_L.style.left=x+5+"px";
  141.                          jiantou_L.style.top=y+5+"px";
  142.                      }
  143.                      this.onmouseout=function(){
  144.                          jiantou_L.style.display="none"
  145.                          this.style.opacity="0";
  146.                      }
  147.                  }
  148.  
  149.                  you.onmouseover=function(){
  150.                      this.style.opacity="0.4";
  151.                      this.onmousemove=function(e){
  152.                          var x=e.layerX;
  153.                          var y=e.layerY;
  154.                          jiantou_r.style.display="block"
  155.                          jiantou_r.style.left=x+5+"px";
  156.                          jiantou_r.style.top=y+5+"px";
  157.                      }
  158.                      this.onmouseout=function(){
  159.                          jiantou_r.style.display="none"
  160.                          this.style.opacity="0";
  161.                      }
  162.                  }
  163.  
  164.                  //定时器
  165.                  var ding=setInterval("zheng(true)",1000);
  166.                  div.onmouseover=function(){//鼠标hover停止
  167.                      clearInterval(ding);
  168.                      div.onmouseout=function(){//鼠标移除
  169.                          ding=setInterval("zheng(true)",1000);
  170.                      }
  171.                  }
  172.  
  173.              }else{
  174.                  div.setAttribute("style","border: 1px solid #000;width:300px;height:300px;text-align: center;")
  175.                  div.innerHTML="请放入轮播图图片";
  176.              }
  177.  
  178.          </script>
  179.      </body>
  180.  </html>

自封装js：

  1.  //获取id---------------------------------------------------------
  2.  function Xing_id(x){
  3.      return document.getElementById(x);
  4.  }
  5.  
  6.  //刷新页面---------------------------------------------------------
  7.  function Xing_ShuaXinYeMian(){
  8.      location.reload();
  9.  }
  10.  
  11.  //选取class，注意返回数组---------------------------------------------------------
  12.  function Xing_Class(x){
  13.      return document.getElementsByClassName(x);
  14.  
  15.  }
  16.  
  17.  //封装随机颜色-------------------------------------------------------
  18.  function Xing_RandomColor(){
  19.      var sum="";
  20.      var shuzu2=['a','b','c','d','e','f','0','1','2','3','4','5','6','7','8','9'];
  21.      for(var i=1;i<=3;i++){
  22.          var int2=parseInt(Math.random()*shuzu2.length);
  23.          sum+=shuzu2[int2];
  24.      }
  25.      var sum2="#"+sum;
  26.      sum="";
  27.      return sum2;    //返回随机的三位16进制rgb颜色
  28.  }
  29.  
  30.  //随机验证码---------------------------------------------------------
  31.  function Xing_RandomYanZhengMa(n){        //传入:要返回几个验证码数
  32.   var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
  33.   var tmp = '';
  34.   for(var i=0;i<n;i++)
  35.    tmp += str.charAt(Math.round(Math.random()*str.length));
  36.   return tmp;        //返回数组
  37.  }
  38.  
  39.  //封装选择质数的选择器---------------------------------------------------------
  40.  function Xing_ZhiShuXuanZe(arguments){//传入数组，一个或多个
  41.      var hehe=[];
  42.      for(var i=0;i<arguments.length;i++){
  43.          if(arguments[i]%2!=0&&arguments[i]%3!=0&&arguments[i]%5!=0&&arguments[i]!=1||arguments[i]==3||arguments[i]==2||arguments[i]==5&&arguments[i]!=0){
  44.              hehe.push(arguments[i]);
  45.          }
  46.      }
  47.      return hehe    //返回所有质数的数组
  48.  }
  49.  
  50.  //找字符串中倒数第n次出现的字符---------------------------------------------------
  51.  function Xing_lastStr(char,y,str,b){//char:要找的字符，y:倒数第几位,//str:字符串
  52.      var b=0;
  53.      if(b==true){
  54.          for(var i=str.length-1;i>=0;i--){
  55.              if(str[i]==char){
  56.                  b++;
  57.                  if(b==y){
  58.                      return i;//返回其下标
  59.                  }
  60.              }
  61.          }
  62.      }else{
  63.          for(var i=0;i<str.length;i++){
  64.              if(str[i]==char){
  65.                  b++;
  66.                  if(b==y){
  67.                      alert("正")
  68.                      return i;//返回其下标
  69.                  }
  70.              }
  71.          }
  72.      }
  73.  }
  74.  
  75.  //获取外部或头部css样式----------------------------------------------------
  76.  function Xing_getCSS(BQ,gao){//BQ:传入的标签   gao:要找的样式
  77.      return window.getComputedStyle(BQ)[gao];    //返回该样式的值
  78.  }

描述：可以根据放入的图片大小自动适应大小，轮播图下方会有小缩略图

【JavaScript】轮播图的更多相关文章

  1. JavaScript 轮播图

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...

  2. 练习:javascript轮播图效果

    javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. JavaScript轮播图

    需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...

  4. 超详细的原生JavaScript轮播图（幻灯片）的制作

    本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...

  5. JavaScript 轮播图实例

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  6. JavaScript 自适应轮播图

    代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

  8. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  9. jquery 广告轮播图

    轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...

  10. 【JavaScript】固定布局轮播图特效

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

随机推荐

  1. Python科学计算PDF

    Python科学计算(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1VYs9BamMhCnu4rfN6TG5bg 提取码:2zzk 复制这段内容后打开百度网盘手机A ...

  2. 给出两个单词word1和word2，写一个函数计算出将word1 转换为word2的最少操作次数。

    问题: 给出两个单词word1和word2,写一个函数计算出将word1 转换为word2的最少操作次数. 你总共三种操作方法: 1.插入一个字符 2.删除一个字符 3.替换一个字符 格式: 输入行输 ...

  3. 6. 深度克隆_ES7**_arr.includes('孙悟空')

    1. 如何实现深度克隆 利用 JSON 方法 (没办法克隆函数数据) `JSON.parse(JSON.stringify(xxx))` 自定义方法 检查所有数据类型的方法 `Object.proto ...

  4. Codeforces Round #509 (Div. 2)

    咕咕咕了好多天终于有时间写篇博客了_(:з」∠)_ 打网赛打到自闭的一周,终于靠这场CF找回了一点信心... 1041A - Heist \(ans=max\left \{ a_i \right \} ...

  5. PAT甲级1049 Counting Ones【规律】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805430595731456 题意: 给定n,问0~n中,1的总个数 ...

  6. 电子产品使用感受之——为什么我那么喜欢2015年的11.6寸MacBook Air？

    2018年Mac笔记本产品线得到了一次更新,Mac book Pro, MacBook Air更新后的Mac 产品线变得更加让人摸不着头脑,价格昂贵不说,产品分类细化到如此程度,让一个选择困难症的消费 ...

  7. 内置对象之request对象

    内置对象就是(容器)已经创建好的对象,可以被直接使用.当用户发送一个请求给容器,它就会自动创建一个对象来处理客户端发送来的消息,如request这个对象,可以获取到用户(客户端)发送来的信息.它的常见 ...

  8. centos7 openfiles问题

    集群环境有几台新增的机器,尝试修改open files的时候,按照平常的操作就是修改/etc/security/limits.conf和/etc/security/limits.d/90-nproc. ...

  9. ide phpStorm使用git的命令行工具

    1.点击phpStorm左下角,点击terminal 2.发现是windows自带的cmd.exe,可以将其改为git的sh.exe 3.打开设置(File -> Settings -> ...

  10. 基础作业 本周没上课，但是请大家不要忘记学习。 本周请大家完成上周挑战作业的第一部分：给定一个整数数组(包含正负数)，找到一个具有最大和的子数组，返回其最大的子数组的和。 例如：[1, -2, 3, 10, -4, 7, 2, -5]的最大子数组为[3, 10, -4, 7, 2] 输入： 请建立以自己英文名字命名的txt文件，并输入数组元素数值，元素值之间用逗号分隔。 输出 在不删除原有文件内容

    1丶 实验代码 #include<stdio.h> int main(void) { int tt,nn,i,j,c[11][11]; int flag=1; scanf("%d ...