无法显示图像无序列表中的下一个和上一个所有图像

Posted

技术标签:

【中文标题】无法显示图像无序列表中的下一个和上一个所有图像【英文标题】：Can't show next and previous all images from image unorderlist 【发布时间】：2021-06-26 03:03:55 【问题描述】：

首先，默认情况下，我试图在第一个 col-md-6 class="showimagediv" div 标签内显示无序列表图像中的第一张图像。但我不能显示它。

其次，我正在尝试显示 ul li 图像列表中的下一个和上一个所有图像，但是如果我单击 ul li 图像中的单个图像，则在第一个 col-md-6 中显示图像class="showimagediv" div 标签，之后，如果我单击下一个图像不会显示在第一个 col-md-6 中，如果我单击上一个图像不会显示在第一个 col-md-6 中。有没有人可以解决。提前致谢。

$(document).ready(function()         
    $('.drag_drop_image').click(function()
        $('.drag_drop_image').removeClass('clicked');
        $(this).toggleClass('clicked');
    );
    $('.showimagediv').show();
    $('.drag_drop_image').on('click', function() 
        var img = $('<img />', src : this.src,'class': 'fullImage');
        $('.showimagediv').html(img).show();
    );

    $('.next').click(function()
        if(!$(".clicked").is(".drag_drop_image:last"))
            $('.clicked').next().click();
        else
            $('.drag_drop_image:first').next().click();
        
    );
    $('.prev').click(function()
        if(!$(".clicked").is(".drag_drop_image:first")) 
            $('.clicked').prev().click();
        else
            $('.drag_drop_image:last').next().click();
        
    );
);
.image-content
position: relative;
display: block;
padding: 0;

.drag_drop_image 
    position: relative;
    width: 150px;
    height: 120px;
    border: 1px solid #cccccc;

.ebay-image-wrap
    padding: 0;

.ebay-image-wrap li
    list-style: none;


.fullImage
    width: 100%;
    height: auto;

.main_image_show
    position: relative;

.showimagediv 
    display: none;
    width: 100%;
    height: 474px;

.clicked 
    outline: 2px solid #ccc;
    z-index: 9999;

.prev
    position: absolute;
    top: 235px;
    background-color: thistle;
    padding: 5px;

.next
    position: absolute;
    right: 0;
    bottom: 209px;
    background-color: thistle;
    padding: 5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-6" style="padding:0;border: 1px solid #ccc">
        <div class="main_image_show">
            <a href="#p" class="prev">Prev</a>
            <div class="showimagediv">

            </div>
            <a href="#n" class="next">Next</a>
        </div>
    </div>
    <div class="col-md-6" style="padding:0;">
        <ul class="d-flex flex-wrap ebay-image-wrap">
            <li class="image-content">
                <img class="drag_drop_image clicked" src="https://static-01.daraz.com.bd/p/mdc/9558ac1034c99bd01ec60450e2bb4563.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/p/92d708bbb8d153475993f7537f6b1c1d.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/p/a5718f0aee97b1b280c47bf02620ef60.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/original/b80aadadbaadbc1db27e692a5e6db52d.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/p/68b7ca7375dfa5ea42556653bff77157.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/p/mdc/d1b1d7ccca27fcbee8465441cfb08d62.jpg" >
            </li>
        </ul>
    </div>
</div>

【问题讨论】：

【参考方案1】：

上一个和下一个正在工作。祝你好运

    $(document).ready(function()    

    function ShowFirstDefaultImage()
    
        var firstDefaultImageSrc = $('.drag_drop_image:first').attr('src');
        var firstDefaultImage = $('<img />', src : firstDefaultImageSrc,'class': 'fullImage');
         $('.showimagediv').html(firstDefaultImage).show();
    
  
    ShowFirstDefaultImage();

    $('.drag_drop_image').click(function()
        $('.drag_drop_image').removeClass('clicked');
        $(this).toggleClass('clicked');
    );
    $('.showimagediv').show();
    $('.drag_drop_image').on('click', function() 
        var img = $('<img />', src : this.src,'class': 'fullImage');
        $('.showimagediv').html(img).show();
    );

    $('.next').click(function()
    
     
        if(!$(".clicked").is(".drag_drop_image:last"))
        
          var $first = $('li:first', 'ul'),
          $last = $('li:last', 'ul');
          var $next, $selected = $(".clicked");
          $next = $selected.next('li').length ? $selected.next('li') : $first;

          $selected.removeClass("clicked");
          $next.addClass('clicked');     
    
          //console.log($next.find('img').attr('src'));
          var imgSrc = $next.find('img').attr('src');
          var img = $next.find('img');
          var img = $('<img />', src : imgSrc,'class': 'fullImage');
        
         $('.showimagediv').html(img).show();
           
        
    );
    $('.prev').click(function()
    
        if(!$(".clicked").is(".drag_drop_image:first")) 
        
            var $first = $('li:first', 'ul'),
            $last = $('li:last', 'ul');
          
            var $prev, $selected = $(".clicked");
            $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
            $selected.removeClass("clicked");
            $prev.addClass('clicked');
    
            //console.log($prev.find('img').attr('src'));
            var imgSrc = $prev.find('img').attr('src');
            var img = $prev.find('img');
            var img = $('<img />', src : imgSrc,'class': 'fullImage');

            $('.showimagediv').html(img).show();
         
        
    );
);
.image-content
position: relative;
display: block;
padding: 0;

.drag_drop_image 
    position: relative;
    width: 150px;
    height: 120px;
    border: 1px solid #cccccc;

.ebay-image-wrap
    padding: 0;

.ebay-image-wrap li
    list-style: none;


.fullImage
    width: 100%;
    height: auto;

.main_image_show
    position: relative;

.showimagediv 
    display: none;
    width: 100%;
    height: 474px;

.clicked 
    outline: 2px solid #ccc;
    z-index: 9999;

.prev
    position: absolute;
    top: 235px;
    background-color: thistle;
    padding: 5px;

.next
    position: absolute;
    right: 0;
    bottom: 209px;
    background-color: thistle;
    padding: 5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-6" style="padding:0;border: 1px solid #ccc">
        <div class="main_image_show">
            <a href="#p" class="prev">Prev</a>
            <div class="showimagediv">

            </div>
            <a href="#n" class="next">Next</a>
        </div>
    </div>
    <div class="col-md-6" style="padding:0;">
        <ul class="d-flex flex-wrap ebay-image-wrap">
            <li class="image-content">
                <img class="drag_drop_image clicked" src="https://static-01.daraz.com.bd/p/mdc/9558ac1034c99bd01ec60450e2bb4563.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/p/92d708bbb8d153475993f7537f6b1c1d.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/p/a5718f0aee97b1b280c47bf02620ef60.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/original/b80aadadbaadbc1db27e692a5e6db52d.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/p/68b7ca7375dfa5ea42556653bff77157.jpg" >
            </li>
            <li class="image-content">
                <img class="drag_drop_image" src="https://static-01.daraz.com.bd/p/mdc/d1b1d7ccca27fcbee8465441cfb08d62.jpg" >
            </li>
        </ul>
    </div>
</div>

【讨论】：

还可以查看下面的链接以获取更多详细示例。 webdesignerhut.com/create-a-simple-jquery-image-slider***.com/questions/16611694/…

以上是关于无法显示图像无序列表中的下一个和上一个所有图像的主要内容，如果未能解决你的问题，请参考以下文章

滚动库中的下一个和上一个按钮中的错误

我的列表视图无法显示数据库中的所有元素

循环显示数组的下一个和上一个键

如何显示同一类别的下一个和上一个按钮？

谷歌云平台数据集无法在 VertexAI 中显示图像

从当前行和上一行计算 2 列