JS 用于 CSS 图像滑块框-css-IT问答社区-解决你的IT疑问

JS 用于 CSS 图像滑块框

Idelic 2月前

我正在寻找一个图像框：预览和预览下的小预览列表。html 如下：

...

我正在寻找一个图像框：预览和预览下方的小预览列表。

html 内容如下：

 <!--image list-->
        <div class="image-list-container d-flex">
          <div class="image-list-item cursor-pointer image-highlight">
            <div id="" class="">
              <div class="hv-centered"><!----><img class="show-img img-fluid" src="https://5.imimg.com/data5/NR/TP/MY-9295383/hcl-desktop-500x500.jpg" alt="" /></div>
            </div>
          </div>
          <div class="image-list-item cursor-pointer" >
            <div id="" class="">
              <div class="hv-centered"><!----><img class="show-img img-fluid" src="https://tiimg.tistatic.com/fp/1/007/341/shock-proof-black-color-medium-size-acer-desktop-computer--825.jpg" alt="" /></div>
            </div>
          </div>
          <div class="image-list-item cursor-pointer" >
            <div id="" class="">
              <div class="hv-centered"><!----><img class="show-img img-fluid" src="https://cdn.britannica.com/97/155497-050-4C5BFFFC/laptop-computer.jpg" alt="" /></div>
            </div>
          </div>
          <!---->
          <div class="image-list-item cursor-pointer add-image-section add-download-img p-0">
            <div id="ember519" class="dropdown btn-group h-100">
              <button class="btn file-upload add-download-img-btn" type="button">
                <input id="add-images-btn" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon align-text-top action-icons icon-xlg fill-dropdown-blue">
                  <path d="M256 15C122.9 15 15 122.9 15 256s107.9 241 241 241 241-107.9 241-241S389.1 15 256 15zm122 263H278v100c0 12.2-9.8 22-22 22s-22-9.8-22-22V278H134c-12.2 0-22-9.8-22-22s9.8-22 22-22h100V134c0-12.2 9.8-22 22-22s22 9.8 22 22v100h100c12.2 0 22 9.8 22 22s-9.8 22-22 22z"></path>
                  <path fill="#FFF" d="M378 234H278V134c0-12.2-9.8-22-22-22s-22 9.8-22 22v100H134c-12.2 0-22 9.8-22 22s9.8 22 22 22h100v100c0 12.2 9.8 22 22 22s22-9.8 22-22V278h100c12.2 0 22-9.8 22-22s-9.8-22-22-22z"></path>
                </svg>
              </button>
              <button id="ember521" class="dropdown-toggle btn btn-secondary rounded-start-0 add-download-img-btn no-border" type="button"></button>
              <div class="dropdown-menu dropdown-menu-right">
                <button class="dropdown-item file-upload">
                  <input id="ember522" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
                  Add More Images
                </button>
                <button class="dropdown-item" data-ember-action="" data-ember-action-523="523">Download As ZIP</button>
              </div>
            </div>
          </div>
        </div>
        <!--/-->

我仍在学习如何使用 js 来实现这种场景，当单击每个项目列表时，它将在上面的框中预览。单击主要文本时也是如此。

代码在这里文本

谢谢你的帮助。

帖子版权声明 1、本帖标题：JS 用于 CSS 图像滑块框
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Idelic在本站《css》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Anonimista 2月前 0 只看Ta

2楼

这里：我已经添加了 primary 按钮，但是我没有将其移动到预览图像的顶部。而且我没有添加按钮 delete 。我希望你能处理好这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Selector</title>
    <style>
      
        body, html {
            margin: 0;
            padding: 0;
            box-sizing: border-box; 
            font-family: Arial, sans-serif; 
        }
        
       
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
       
        .large-image {
            width: 400px;
            height: 300px;
            border: 2px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f0f0;
        }
        
        .large-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; 
        }
        
       
        .image-row {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: nowrap; 
        }
        
       
        .image-row img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer; 
            border: 2px solid transparent; 
            transition: border-color 0.3s; 
        }
        
        .image-row img:hover {
            border-color: #333; 
        }
        .primary-button {
            position: absolute;
            bottom: 10px; 
            right: 10px; 
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .primary-button:hover {
            background-color: #0056b3; 
        }
        .image-row img.selected {
            border-color: blue; 
        }
        
    </style>
</head>
<body>

    <div class="container">
        
        <div class="large-image">
            <img id="mainImage" src="https://media.istockphoto.com/id/2096494657/photo/senior-couple-using-laptop-while-sitting-on-sofa-in-living-room-at-home.webp?b=1&s=170667a&w=0&k=20&c=6eNx4PV7PPg7LAZ9JNRFxvBg8pHHd_l7nvR3tx05hcQ=" alt="Selected Image">
 <button class="primary-button" onclick="makePrimary()">Primary</button>
        </div>
        
        
        <div class="image-row" id="imageRow">
            <img src="https://media.istockphoto.com/id/2039918088/photo/happy-african-american-woman-using-tablet-on-a-cozy-sofa-at-home.webp?b=1&s=170667a&w=0&k=20&c=gk4wDaG3UaQuvdWWUN0CoeJ_SzFujnMLcuzgp6JzaGI=" alt="Image 1" onclick="updateMainImage(this)">
            <img src="https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.webp?b=1&s=170667a&w=0&k=20&c=PExSb0GIEAlbBm8wDtNucKJrVVJOTqn9kHEZvQBhzjU=" alt="Image 2" onclick="updateMainImage(this)">
            <img src="https://media.istockphoto.com/id/2096494657/photo/senior-couple-using-laptop-while-sitting-on-sofa-in-living-room-at-home.webp?b=1&s=170667a&w=0&k=20&c=6eNx4PV7PPg7LAZ9JNRFxvBg8pHHd_l7nvR3tx05hcQ=" alt="Image 3" onclick="updateMainImage(this)">
            <img src="https://media.istockphoto.com/id/1500285927/photo/young-woman-a-university-student-studying-online.webp?b=1&s=170667a&w=0&k=20&c=w6oDn8-ru4jZhnnEt8AI6KdlgCJIgaaEZ4IMV50DnsQ=" alt="Image 4" onclick="updateMainImage(this)">
        </div>
    </div>

    <script>
        
        let selectedImage = null;

        
        function updateMainImage(imgElement) {
            
            if (selectedImage) {
                selectedImage.classList.remove('selected');
            }
            
            
            selectedImage = imgElement;
            imgElement.classList.add('selected');
            
           
            var newSrc = imgElement.src;
            document.getElementById('mainImage').src = newSrc;
        }
        
        
        function makePrimary() {
            if (!selectedImage) return; 
            
            const imageRow = document.getElementById('imageRow');
            
            
            
            
            
            imageRow.prepend(selectedImage);
            
           
            var newSrc = selectedImage.src;
            document.getElementById('mainImage').src = newSrc;
        }
    </script>

</body>
</html>

Tomer Amir 2月前 0 只看Ta

引用 3楼

@fawzan 如果这满足了您的疑问或要求，请接受答案并让其他开发人员更容易看到。

关于作者

Idelic

UID:18869一级用户组

主题数
0

帖子数
0

精华数
0

注册排名
18869

导航

论坛

我的

JS 用于 CSS 图像滑块框

Idelic

TAG

作者主题

作者最近主题：