Question

我在html / css / js中编写了一个图像滚动条，非常简单：单击右键，我浏览“holder”-div中的所有图像，并在带有classname的图像后更改图像的类= “当前”。

但我认为，这不是问题所在。每当我连续点击左侧或右侧按钮时，div中的图像被选中（蓝色选择框）。如果我连续单击左键，则即使上面的文本也会被选中。

<div class="grid_4 omega image_box">
    <div id="txt_choose" class="image_txt">
        this is helpful text
    </div>
    <div id="alt_spacer"></div>
    <div id="image_content" class="image_content" onclick="chooseImageType(this)">
        <div id="current" class="current"><img src="images/default1.png" /></div>
        <div id="current" class="hidden"><img src="images/default2.png" /></div>
    </div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>

这是css：

.image_btn_right
{
    width           : 20px;
    height          : 20px;
    position        : relative;
    float           : left;
    margin-top      : -170px;
    margin-left     : 260px;
    z-index         : 4;
    cursor          : pointer;
    background-image: url('../images/right.png');
}
.image_btn_left
{
    width           : 20px;
    height          : 20px;
    position        : relative;
    float           : left;
    margin-top      : -170px;
    margin-left     : 20px;
    z-index         : 4;
    cursor          : pointer;
    background-image: url('../images/left.png');
}
.image_content
{
    height          : 280px;
    background-color: white;
    margin          : 10px;
}

根据要求，我的javascript：

function showNext()
{
//vars
var shown = false;
var current;

$('#image_content > div').each(function()
{
    if($(this).attr('class') == "current")
    {
        current = $(this);
        shown   = true;
    }
    else if($(this).attr('class') == "hidden" && shown == true)
    {
        current.hide();
        current.attr('class', 'prev');
        current.attr('id', '');
        $(this).show();
        $(this).attr('class', 'current');
        $(this).attr('id', 'current');
        shown = false;
    }
});
}

是否有停止图像和上面的文字被选择（没有实际使它们不可选）？可能是因为按钮的相对位置及其z-index ..？

Answer 1

这适用于你的小提琴。

function showNext()
{

    //vars
    var shown = false;
    var current;
    window.getSelection().removeAllRanges();
   $('#image_content > div').each(function()
    {
        if($(this).attr('class') == "current")
        {
            current = $(this);
            shown   = true;
        }
        else if($(this).attr('class') == "hidden" && shown == true)
        {
            current.hide();
            current.attr('class', 'prev');
            current.attr('id', '');
            $(this).show();
            $(this).attr('class', 'current');
            $(this).attr('id', 'current');
            shown = false;
        }
    });
}

function showPrev()
{
window.getSelection().removeAllRanges();
    //vars
    var prev_present = false;
    var prev;

    $('#image_content > div').each(function()
    {
        if($(this).attr('class') == "prev")
        {
            prev         = $(this);
            prev_present = true;
        }
        else if($(this).attr('class') == "current" && prev_present == true)
        {
            $(this).hide();
            $(this).attr('class', 'hidden');
            $(this).attr('id', '');
            prev.show();
            prev.attr('class', 'current');
            prev.attr('id', 'current');
            prev_present = false;
        }
    });
}

最好的问候纳斯

Answer 2

我找到了答案，这很容易......＆gt; _＆gt;

我只需要将按钮包装在另一个div中，这样它们就会从html的其余部分变得更加复杂。

像这样：

<div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>

双击一个元素时，另一个元素被选中

2 个答案: