【JavaScript】轮播图

代码：

 <!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】轮播图的更多相关文章

JavaScript 轮播图
这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊布局什么的你们自己搞定吧 <div class="slider" id="circl ...
练习:javascript轮播图效果
javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...
JavaScript轮播图
需求: 鼠标移动到下标页码时,也转换到相对应的图片: 多张图片可以自动轮播: 鼠标移动至图片时,停止自动轮播: 可以手动左右调节: <!DOCTYPE html> <html lan ...
超详细的原生JavaScript轮播图（幻灯片）的制作
本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...
JavaScript 轮播图实例
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
JavaScript 自适应轮播图
代码话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...
带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
jquery 广告轮播图
轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...
【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

封装的head
//获取浏览器和版本号var userAgent=window.navigator.userAgent, rMsie=/(msie\s|trident.*rv:)([\w.]+)/, rFirefox ...
C++接口与实现的抽象分离
IPerson.h #ifndef I_PERSON_H_ #define I_PERSON_H_ #include <string> #include <ostream> c ...
idea右键没有svn选项
然后apply,当然也可以只是某些指定的文件夹.project就是当前项目,包括所有的module.
Spring cloud 之Ribbon（二）负载均衡原理
ribbon实现负载均衡的原理我们从Ribbon实现负载均衡的代码可以看到,Ribbon是通过RestTemPlate实现客户端负载均衡的,准确的说是RestTemPlate上的@LoadBalan ...
MongoDB Schema Design
Normalization: ...... Relationships: One-to-One relationship: 1-to-many: many-to-many:
warning: a non-numeric value encountered in line *的解决方法
今天ytkah在调试项目的时候出现了一个警告warning: a non-numeric value encountered in line 694,查看php官方文档,上面解释说在使用(+ - * ...
如何优雅的运行起jmeter
安装jdk 下载网站:http://www.oracle.com/,选个最新的版本就可以. 注意:11以后没有自动生成jre 配置环境变量对于Java程序开发而言,主要会使用JDK的两个命令:jav ...
MySQL的GTID复制与传统复制的相互转换
主库:192.168.225.128:3307从库1:192.168.225.129:3307 Gtid作为5.6版本以来的杀手级特性,却因为不支持拓扑结构内开关而饱受诟病.如果你需要从未开启GTID ...
try catch的使用场景
jenkins centos slave起不来报错The SSH key presented by the remote host does not match the key saved in the Known Hosts file against this host. Connections to this host will be denied until the two keys mat
场景:我的centos-204是一台centos的机器,本来用https://www.cnblogs.com/zndxall/p/8297356.html 的centos slave方式搭建ok的,一 ...

【JavaScript】轮播图

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

随机推荐

热门专题