资讯专栏INFORMATION COLUMN

JavaScript实现左右点击切换图片具体代码

3403771864 / 472人阅读

  项目中要求实现左右点击切换图片,先看看想要展示效果:

  效果:

  HTML

</>复制代码

  1.   <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.   <meta charset="utf-8">
  5.   <title>xxx——空间相册</title>
  6.   <link rel="stylesheet" type="text/css" href="./css/Photo_album.css"/>
  7.   </head>
  8.   <body>
  9.   <!-- 相册 -->
  10.   <div id="imgmax">
  11.   <ul>
  12.   <li><img src="./img/brtx.jpeg" ></li>
  13.   <li><img src="./img/1.jpeg" ></li>
  14.   <li><img src="./img/2.jpeg" ></li>
  15.   <li><img src="./img/3.jpeg" ></li>
  16.   <li><img src="./img/brtx.jpeg" ></li>
  17.   <li><img src="./img/brtx.jpeg" ></li>
  18.   </ul>
  19.   </div>
  20.   </body>
  21.   <script src="js/Photo_album.js" type="text/javascript" charset="utf-8"></script>
  22.   </html>

  CSS: 

 

</>复制代码

  1.  /* 相册 */
  2.   #imgmax{
  3.   width: 600px;
  4.   height: 600px;
  5.   position: relative;
  6.   margin: 20px auto;
  7.   }
  8.   img{
  9.   width: 100%;
  10.   height: 100%;
  11.   }
  12.   ui,li{
  13.   margin: 0;
  14.   padding: 0;
  15.   list-style: none;
  16.   float: left;
  17.   width: 150px;
  18.   height: 150px;
  19.   margin-left: 10px;
  20.   }
  21.   .newdiv{
  22.   width: 600px;
  23.   height: 600px;
  24.   background: #fff;
  25.   opacity: 0.5;
  26.   }
  27.   .newimg{
  28.   width: 300px;
  29.   height: 300px;
  30.   position: absolute;
  31.   left: 150px;
  32.   top: 50px;
  33.   }
  34.   .newspan{
  35.   position: absolute;
  36.   width: 20px;
  37.   height: 20px;
  38.   left: 450px;
  39.   top: 50px;
  40.   background: #fff;
  41.   text-align: center;
  42.   }
  43.   .newspanzuo{
  44.   position: absolute;
  45.   width: 20px;
  46.   height: 20px;
  47.   left: 100px;
  48.   top: 150px;
  49.   background: #fff;
  50.   text-align: center;
  51.   }
  52.   .newspanyou{
  53.   position: absolute;
  54.   width: 20px;
  55.   height: 20px;
  56.   left: 480px;
  57.   top: 150px;
  58.   background: #fff;
  59.   text-align: center;
  60.   }

  JavaScript: 

</>复制代码

  1.  /*
  2.   说明:根据<1i>标签、得到当前网页所有的<1i>元素返回值:返回的是数组,存储所有的<1i>元素
  3.   作用:
  4.   1.可用于监听点击事件
  5.   2.可根据当前<1i>元素得到内部存储的图片路径
  6.   3.可根据图片的路劲,做一个大图展示
  7.   */
  8.   var lis = document.getElementsByTagName("li"); //获取li标签
  9.   /*
  10.   说明:根据id,得到imgmax元素
  11.   返回值:返回的是最大的盒子元素
  12.   作用:
  13.   可像此盒子内【追用】预览图片时所需的所有【元素】
  14.   1.追加盒子元素(用于遮盖当前所有图片)
  15.   2.追加图片元素(用于展示【预览图】)
  16.   3.追加span文字(用于展示“X”,退出预览)
  17.   */
  18.   var box = document.getElementById("imgmax"); //获取相册盒子
  19.   var index = 0;
  20.   //循环遍历li标签
  21.   //迭代所有的【li】,用于监听【li】的点击事件
  22.   for (let i = 0; i < lis.length; i++) {
  23.   /*
  24.   当监听成功,绑定【匿名函数】,用于编写具体的逻辑
  25.   1.得到当前点击<li>元素的图片路径
  26.   2.创建:div元素,用于遮盖当前所有图片
  27.   3.创建:img元素,用于展示【预览图】
  28.   4.创建 span元素(用于展示“X”,退出预览)
  29.   */
  30.   lis[i].onclick = function({
  31.   //弹出当前li标签中图片路径
  32.   //alert(this.getElementsByTagName("img")[0].src)
  33.   //2.创建:div元素,用于遮盖当前所有图片
  34.   // box.appendChild()
  35.   var j = i;
  36.   var newDiv = document.createElement('div');
  37.   newDiv.className = "newdiv";
  38.   box.appendChild(newDiv)
  39.   //3.创建:img元素,用于展示【预览图】
  40.   var newImg = document.createElement("img");
  41.   newImg.className = "newimg"
  42.   newImg.src=this.getElementsByTagName("img")[0].src
  43.   box.appendChild(newImg);
  44.   //创建 span元素(用于展示“X”,退出预览)
  45.   var newSpan = document.createElement("span");
  46.   newSpan.innerHTML = "X";
  47.   newSpan.className = "newspan";
  48.   box.appendChild(newSpan);
  49.   newSpan.onclick = function(){
  50.   box.removeChild(newDiv);
  51.   box.removeChild(newImg);
  52.   box.removeChild(Spanz);
  53.   box.removeChild(Spany);
  54.   box.removeChild(newSpan);
  55.   }
  56.   // 左边
  57.   var Spanz = document.createElement("span");
  58.   Spanz.innerHTML = "<";
  59.   Spanz.className = "newspanzuo";
  60.   box.appendChild(Spanz);
  61.   Spanz.onclick = function(){
  62.   if (j-->=0) {
  63.   newImg.src=document.getElementsByTagName("img")[j].src
  64.   } else{
  65.   alert("已经是第一张了!!")
  66.   }
  67.   }
  68.   // 右边
  69.   var Spany = document.createElement("span");
  70.   Spany.innerHTML = ">";
  71.   Spany.className = "newspanyou";
  72.   box.appendChild(Spany);
  73.   Spany.onclick = function(){
  74.   if (j++<lis.length-1) {
  75.   newImg.src=document.getElementsByTagName("img")[j].src
  76.   } else{
  77.   alert("已经是第最后一张了!!")
  78.   }
  79.   }
  80.   }
  81.   }

  展示效果和代码都已叙述,希望大家多多学习!


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/128222.html

相关文章

  • 授人以渔式解析原生JS写轮播图

    摘要:鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器,绑定事件,重构下代码封装出往右往左轮播函数和自动轮播函数。 需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,...

    Zack 评论0 收藏0
  • 授人以渔式解析原生JS写轮播图

    摘要:鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器,绑定事件,重构下代码封装出往右往左轮播函数和自动轮播函数。 需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,...

    SKYZACK 评论0 收藏0
  • 授人以渔式解析原生JS写轮播图

    摘要:鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,鼠标移开时左右箭头隐藏掉并且自动轮播。核心原理清除定时器,绑定事件,重构下代码封装出往右往左轮播函数和自动轮播函数。 需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左右箭头显示出来,...

    Pink 评论0 收藏0
  • javascript实现图片轮播简单版示例

      这篇文章简而言之就是说用javascript实现图片轮播简单效果的具体代码,直接放代码:  这里是css样式  *{   margin:0;   padding:0;   }   ul,   li{   list-style:none;   }   img{   display:block;   /*vertical-align:middle;*/   }   a{   text-decora...

    3403771864 评论0 收藏0
  • javascript简单轮播图

    摘要:轮播图实现原理通过多张图片平铺,用只显示一张图片其他的隐藏,无缝滚动用定时器改变元素的值让图片呈现左右滚动的效果。 **轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片、其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

    lk20150415 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<