代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css">

             *{margin:0 auto;padding: 0;}

             #LB_div{overflow:hidden;position: relative;}

             #LB_span{background: #000;display: block;position: absolute;}

             #LB_span img{float: left;}

             #LB_zuo,#LB_you:hover{cursor:none;}

             #LB_ul{list-style: none;display: block;position:absolute;left: 50%; top: 80%;transform: translate(-50%,0);}

             /*#LB_ul li{float:left;text-align: center;background: gold;border-radius:50%;width: 20px;height: 20px;}*//*这行是小圆点的代码*/

             #LB_ul li{background: transparent;display: inline-block;padding-top:4px;box-sizing:border-box}/*这行是小图片的代码*/

             #LB_ul li+li{margin-left: 8px;}

             #LB_ul li:hover{cursor:pointer;background: goldenrod;}

             #LB_zuo{position: absolute; background: #fff;width: 10%; height: 100%;left:0;opacity: 0;}

             #LB_you{position: absolute; background: #fff;width: 10%; height: 100%;right:0;opacity: 0;}

             #LB_left,#LB_right{position: absolute;width: 50px;display: none;}

             #LB_left,#LB_right:hover{cursor:none;}

         </style>

     </head>

     <body>

         <div id="LB_div">

             <span id="LB_span">

                 <img src="img/IMG_20160421_205146.jpg"/>

                 <img src="img/IMG_20160421_205146.jpg"/>

                 <img src="img/IMG_20160421_205146.jpg"/>

                 <img src="img/IMG_20160421_205146.jpg"/>

                 <img src="img/IMG_20160421_205146.jpg"/>

                 <img src="img/IMG_20160421_205146.jpg"/>

                 <img src="img/IMG_20160421_205146.jpg"/>

                 <img src="img/IMG_20160421_205146.jpg"/>

                 <img src="img/IMG_20160421_205146.jpg"/>

             </span>

             <p id="LB_zuo"></p>

             <p id="LB_you"></p>

             <img src="img/Cristal_Intense_072.png" id="LB_left"/>

             <img src="img/Cristal_Intense_069.png" id="LB_right"/>

             <ul id="LB_ul"></ul>

         </div>

         <script type="text/javascript" src="js/Xing_js.js" ></script>

         <script>

             var arr=document.querySelectorAll("#LB_span img");

             var div=document.querySelector("#LB_div");

             var span=document.querySelector("#LB_span");

             var zuo=document.querySelector("#LB_zuo");

             var you=document.querySelector("#LB_you");

             var ul=document.querySelector("#LB_ul");

             var jiantou_L=document.querySelector("#LB_left")

             var jiantou_r=document.querySelector("#LB_right")

             var b=0;

             if(arr.length!=0){//判断有没有图

                 //根据所有图片长度设置span的长度

                 span.style.width=(arr.length*arr[0].width)+"px";

                 span.style.left="0px";

                 span.style.transition="0.5s";

                 //根据图片设置div的长宽

                 div.style.width=arr[0].width+"px";

                 div.style.height=arr[0].height+"px";

 //                console.log(arr[0].width);

                 //根据图片数量设置小圆点

                 for(var i=1;i<=arr.length;i++){

                     var li=document.createElement("li");

                     var img=document.createElement("img");//中间这段是小图片的代码

                     img.src=arr[i-1].src;

                     img.setAttribute("style","width: "+parseInt(arr[0].width)*0.1+"px;height"+parseInt(arr[0].height)*0.1+"px;display: inline-block;")

                     li.appendChild(img);

                     li.setAttribute("onClick","yuan("+i+")");

                     ul.appendChild(li);

                 }

                 //根据每个li的margin-left来设置ul的宽度

                 var li_arr=document.querySelectorAll("li");

                 for(var x=0;x<li_arr.length;x++){

                     b+=parseInt(Xing_getCSS(li_arr[x],"marginLeft"));

                     ul.style.width=parseInt(arr[0].width)*0.1*(arr.length)+b+"px";

                 }

                 //正span移动

                 var    i=0;

                 function zheng(){

                     i++;

                     if(i==arr.length){i=0;};

                     span.style.left="-"+arr[0].width*i+"px";

                     biao(i);

                     return i;

                 }

                 //负span移动

                 function fu(b){

                     b--;

                     if(b==-1){b=arr.length-1;}

                     span.style.left="-"+arr[0].width*b+"px";

                     biao(b);

                     return b;

                 }

                 //小圆点被单击

                 function yuan(m){

                     i=m-2;

                     zheng();

                 }

                 //小圆点标亮

                 function biao(d){

                     var li=ul.childNodes;

                     for(var x=0;x<arr.length;x++){

                         if(x==d){

                             li[x].style.background=Xing_RandomColor();

                         }else{

                             li[x].style.background="transparent"

                         }

                     }

                 }

                 //两键被单击时

                 you.onclick=function(){

                     i=zheng();

                 }

                 zuo.onclick=function(){

                     i=fu(i);

                 }

                 zuo.onmouseover=function(){//左右两边的白边和指针跟随

                     this.style.opacity="0.4";

                     this.onmousemove=function(e){

                         var x=e.layerX;

                         var y=e.layerY;

                         jiantou_L.style.display="block"

                         jiantou_L.style.left=x+5+"px";

                         jiantou_L.style.top=y+5+"px";

                     }

                     this.onmouseout=function(){

                         jiantou_L.style.display="none"

                         this.style.opacity="0";

                     }

                 }

                 you.onmouseover=function(){

                     this.style.opacity="0.4";

                     this.onmousemove=function(e){

                         var x=e.layerX;

                         var y=e.layerY;

                         jiantou_r.style.display="block"

                         jiantou_r.style.left=x+5+"px";

                         jiantou_r.style.top=y+5+"px";

                     }

                     this.onmouseout=function(){

                         jiantou_r.style.display="none"

                         this.style.opacity="0";

                     }

                 }

                 //定时器

                 var ding=setInterval("zheng(true)",1000);

                 div.onmouseover=function(){//鼠标hover停止

                     clearInterval(ding);

                     div.onmouseout=function(){//鼠标移除

                         ding=setInterval("zheng(true)",1000);

                     }

                 }

             }else{

                 div.setAttribute("style","border: 1px solid #000;width:300px;height:300px;text-align: center;")

                 div.innerHTML="请放入轮播图图片";

             }

         </script>

     </body>

 </html>

自封装js：

 //获取id---------------------------------------------------------

 function Xing_id(x){

     return document.getElementById(x);

 }

 //刷新页面---------------------------------------------------------

 function Xing_ShuaXinYeMian(){

     location.reload();

 }

 //选取class，注意返回数组---------------------------------------------------------

 function Xing_Class(x){

     return document.getElementsByClassName(x);

 }

 //封装随机颜色-------------------------------------------------------

 function Xing_RandomColor(){

     var sum="";

     var shuzu2=['a','b','c','d','e','f','0','1','2','3','4','5','6','7','8','9'];

     for(var i=1;i<=3;i++){

         var int2=parseInt(Math.random()*shuzu2.length);

         sum+=shuzu2[int2];

     }

     var sum2="#"+sum;

     sum="";

     return sum2;    //返回随机的三位16进制rgb颜色

 }

 //随机验证码---------------------------------------------------------

 function Xing_RandomYanZhengMa(n){        //传入:要返回几个验证码数

  var str = 'abcdefghijklmnopqrstuvwxyz0123456789';

  var tmp = '';

  for(var i=0;i<n;i++)

   tmp += str.charAt(Math.round(Math.random()*str.length));

  return tmp;        //返回数组

 }

 //封装选择质数的选择器---------------------------------------------------------

 function Xing_ZhiShuXuanZe(arguments){//传入数组，一个或多个

     var hehe=[];

     for(var i=0;i<arguments.length;i++){

         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){

             hehe.push(arguments[i]);

         }

     }

     return hehe    //返回所有质数的数组

 }

 //找字符串中倒数第n次出现的字符---------------------------------------------------

 function Xing_lastStr(char,y,str,b){//char:要找的字符，y:倒数第几位,//str:字符串

     var b=0;

     if(b==true){

         for(var i=str.length-1;i>=0;i--){

             if(str[i]==char){

                 b++;

                 if(b==y){

                     return i;//返回其下标

                 }

             }

         }

     }else{

         for(var i=0;i<str.length;i++){

             if(str[i]==char){

                 b++;

                 if(b==y){

                     alert("正")

                     return i;//返回其下标

                 }

             }

         }

     }

 }

 //获取外部或头部css样式----------------------------------------------------

 function Xing_getCSS(BQ,gao){//BQ:传入的标签   gao:要找的样式

     return window.getComputedStyle(BQ)[gao];    //返回该样式的值

 }

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

【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. ZooKeeper Getting Started Guide

    http://zookeeper.apache.org/doc/trunk/zookeeperStarted.html What is ZooKeeper? ZooKeeper is a centra ...

  2. linux学习：特殊符号，数学运算，图像与数组与部分终端命令用法整理

    指令:let.expr.array.convert.tput.date.read.md5.ln.apt.系统信息 一:特殊符号用法整理 系统变量 $# 是传给脚本的参数个数 $0 是脚本本身的名字 $ ...

  3. maven和glassfish安装和部署及hello1和hello2的部署

    1.安装maven和glassfish及配置环境变 首先搜索并下载maven3.6.0和glassfish4.1.1(版本看按需要选择). 点击安装包进行安装 安装完成后开始配置环境变量 打开系统环境 ...

  4. Adobe Premiere Pro CS6 下载安装包成功

    Adobe Premiere Pro CS6 https://pan.baidu.com/s/1miBq59e 下载地址 安装方式 断网(必须):安装官方原版程序: 一.安装前先运行程序包的“必先运行 ...

  5. openlayers3 基础（常见方法，类及实现）

    ol3接口大全1.ol.Map类:(地图容器类) 实现: ol.Map(参数) 参数说明:1.1 target,说明地图所在的html元素. 如果没有指定,必须调用ol.Map类的setTarget( ...

  6. 【Java算法學習】斐波那契數列問題-兔子產子經典問題

    /** * 用遞推算法求解斐波那契數列:Fn = Fn-2 +Fn-1; */ import java.util.*; public class Fibonacci { public static v ...

  7. pe文件头详解

  8. Python 学习笔记6 变量-元组

    我们在上一篇中了解了变量list(列表), 今天我们来介绍下元组.元组是由括号和逗号,组织起来的一个元素的集合.和list不同的是,它其中的元素是不能被修改的,和其他语言中的常量相类似. 需要注意的是 ...

  9. JAR包结构,META-INF/MANIFEST.MF文件详细说明[全部属性][打包][JDK]

    转载请注:[https://www.cnblogs.com/applerosa/p/9736729.html] 常见的属性 jar文件的用途 压缩的和未压缩的 jar工具 可执行的JAR 1.创建可执 ...

  10. Express全系列教程之(五)：Express的中间件

    一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...