点击圆点，切换图片

最新推荐文章于 2023-08-21 13:55:36 发布

小样茶

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量442

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_56538213/article/details/129900517

版权

点击下方的圆点，切换图片

通过点击下方对应圆点，实现切换上方图片

Html部分

在body中，设置一个容器div，属性选择器命名为'pic'，表示包含图片。

然后设置img标签，里面包含图片，用src（source）定位图片位置。

最后加上ul标签，包含li，来创建列表项圆点。

<body>

<div id="pic"> 
  <img src="">
  <ul>    
  </ul>
</div>

</body>

Js部分

首先运用函数体，函数体内循环，可避免代码重复。设立function函数体。

通过document，获取div给变量odiv。

img标签是包含在div中的，所以获取img用，div.get获取，ul、li相同。

将四个图片以数组形式赋给变量arrurl。

<script>
window.onload=function(){
  var odiv=document.getElementById('pic');   
  var oimg=odiv.getElementsByTagName('img')[0]; //获取图片索引
  var oul=odiv.getElementsByTagName('ul')[0];  
  var arrurl=['images/p1.jpg','images/p2.jpg','images/p3.jpg','images/p4.jpg']; //调用图片
  var ali=odiv.getElementsByTagName('li');  

  for(var i=0; i<arrurl.length; i++)
  {
    oul.innerHTML+="<li class='item'></li>";     

  }
  oimg.src=arrurl[0];   //第一张图片为数组第一个元素
  ali[0].className='item active'; // 第一个圆点处于活动状态

  for(var j=0; j<ali.length; j++){
    ali[j].index=j;      //为每个圆点自定义索引属性，属性值和图片下标一一对应
    ali[j].onclick=function(){
      oimg.src=arrurl[this.index];   //当前圆点对应当前显示图片，下标一一对应

      for(var i=0; i<ali.length; i++){  //清除活动状态，设置当前li为活动状态  
        ali[i].className='item';    
      }
      this.className='item active';
    }
  }
}

</script>

Css部分

为页面进行装饰，body标签设立背景颜色为黑色，ul设置内外边距为0，li设置展示为行内块样式。

#pic，对应id属性，更改图片宽度和高度，margin-top将图片向下移。ul设置列表居中。

.item，对应li中的class属性，设立形状为圆点形。background设立圆点背景颜色，.active，设置鼠标点击到圆点时的颜色。

<style>
body{background: #333;}     
ul{margin:0; padding:0;}
li{display:inline-block;}    /* 行内块样式，可改变大小*/
#pic{width:300px; height:206px; margin:200px auto;}
#pic img{ width:300px; height:206px; }
#pic ul{margin-top:10px; text-align: center;}  /* 圆点居中 */
#pic .item, #pic .active{width:9px; height:9px; cursor:pointer; border-radius:10px; margin:1px 1px 1px 8px;}/* 设置li的圆点形状 */
#pic .item{background:#FFF;}  /* 圆点初始白色 */
#pic .active{background:#F60;} /*活动时为橘黄色 */

</style>

小样茶

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
点击圆点，切换图片

background设立圆点背景颜色，.active，设置鼠标点击到圆点时的颜色。为页面进行装饰，body标签设立背景颜色为黑色，ul设置内外边距为0，li设置展示为行内块样式。#pic，对应id属性，更改图片宽度和高度，margin-top将图片向下移。img标签是包含在div中的，所以获取img用，div.get获取，ul、li相同。在body中，设置一个容器div，属性选择器命名为'pic'，表示包含图片。然后设置img标签，里面包含图片，用src（source）定位图片位置。
复制链接

扫一扫