代码:

  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. PHP定界符<<<EOF

    PHP定界符<<<EOF 一.为什么需要使用定界符: 因为在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况, 如果用传统的输出方法 ——按字符串输 ...

  2. Node.js_Buffer 缓冲区

    Buffer 缓冲区 虽然 JavaScript 支持未操作,但是并没有 二进制数据 的原生 node 引入了 Buffer 类,用于操作二进制数据 是 V8 引擎的扩展,实际上是对内存的直接分配 每 ...

  3. React组件传值

    React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数据流,数据主要从父 ...

  4. javascript的数组之slice()

    slice()方法创建一个新数组,将原数组的部分元素拷贝到新数组,并将新数组返回,且原数组不会被修改. var animals = ['ant', 'bison', 'camel', 'duck', ...

  5. 嵌入式linux内存越界定位和解决 (转)

    https://blog.csdn.net/meejoy/article/details/41729585 https://blog.csdn.net/killmice/article/details ...

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

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

  7. SAP中的一些简称及简要介绍

    SAP-(System Applications and Products) 基础部分: R/3系统内核.数据库.支持各类平台的接口.ABAP(Advanced Business Applicatio ...

  8. Python---函数的相关知识点总结一:

    1:定义函数 def printInfo(): print("I love Python!") #调用函数 #注意:函数定义完毕并不会被默认执行,只能通过调用的方式来让它执行 pr ...

  9. python 科学计算与可视化

    一.Numpy 库 NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. 引用: import ...

  10. 尽量避免把弹窗加在window上,可以考虑把弹窗封装到控制器里面

    封装自定义弹窗,一般来说有两种选择: 在[[[UIApplication sharedApplication] delegate] window]上add自定义view: present一个模态Con ...