0

如果已经回答，请原谅我，但我搜索并找不到与我的请求足够相似的案例。

我有 8 张图像（最终我将从数据库中提取信息，但我想尝试让这部分自己工作）。

每个图像都是 div 的一个切换，它包含该图像（事件）的详细信息。

目前，所有详细信息 div 都被隐藏，当您单击图像时，其详细信息 div 将“显示”。在详细信息 div 中是一个“隐藏”按钮，它隐藏详细信息 div，并且图像从下方滑回视图。

我想要这样，如果您单击屏幕底部的不同图像，而详细信息 div 打开（显示），它会关闭该详细信息 div 并打开刚刚单击的图像的详细信息 div。

最终，我希望在详细信息 div 中有一个“下一个”链接，该链接可以滚动到下一个详细信息 div，但是，一次一步。

我的代码是：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".obtn1").click(function(){
        $(".detail1").show(1500);
    });
});
$(document).ready(function(){
    $(".cbtn1").click(function(){
        $(".detail1").hide(1500);
    });
});
$(document).ready(function(){
    $(".obtn2").click(function(){
        $(".detail2").show(1500);
    });
});

... on up to obtn8 and cbtn8
</script>

使用以下html：

<div id="event-detail">
    <div class="detail1" style="display:none;height:1000px;" align="center">
    <img class="cbtn1" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund1.jpg" width="650" height="478">
    <img class="cbtn1" src="images/dev_detail/more.gif" width="70" height="30">
    </div>
    <div class="detail2" style="display:none;height:1000px;" align="center">
    <img class="cbtn2" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund2.jpg" width="650" height="478">
    <img class="cbtn2" src="images/dev_detail/more.gif" width="70" height="30">
    </div>
    <div class="detail3" style="display:none;height:1000px;" align="center">
    <img class="cbtn3" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund3.jpg" width="650" height="478">
    <img class="cbtn3" src="images/dev_detail/more.gif" width="70" height="30">
    </div>

... on up to 8

<table width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img class="obtn1" src="images/dev_detail/BitterSuite_logo1.jpg" width="200" height="147">
        </td>
        <td><img class="obtn2" src="images/dev_detail/BitterSuite_logo2.jpg" width="200" height="147">
        </td>
        <td><img class="obtn3" src="images/dev_detail/BitterSuite_logo3.jpg" width="200" height="147">
        </td>
        <td><img class="obtn4" src="images/dev_detail/BitterSuite_logo4.jpg" width="200" height="147">
        </td>
    </tr>
    <tr>
        <td><img class="obtn5" src="images/dev_detail/BitterSuite_logo5.jpg" width="200" height="147">
        </td>
        <td><img class="obtn6" src="images/dev_detail/BitterSuite_logo6.jpg" width="200" height="147">
        </td>
        <td><img class="obtn7" src="images/dev_detail/BitterSuite_logo7.jpg" width="200" height="147">
        </td>
        <td><img class="obtn8" src="images/dev_detail/BitterSuite_logo8.jpg" width="200" height="147">
        </td>
    </tr>
</table>

我现在很喜欢那里的默认幻灯片效果，如果可能的话，我想保留它。对此的任何帮助将不胜感激。提前致谢。干杯艾尔

4

2 回答 2

1

请看一下

http://jsfiddle.net/s5ENf/11/

Almeister 先生9 我没有正确理解您的问题。这是你的要求吗？

我做了改变

<div id="detail1" class="detail" style="display:none;height:1000px;" align="center">

$(document).ready(function () {
    $(".obtn1").click(function () {
        $(".detail").hide();
        $("#detail1").show(1500);
    });
});
$(document).ready(function () {
    $(".cbtn1").click(function () {
        $("#detail1").hide(1500);
    });
});

我将每个 div 的class="detail1"to id="detail1"、 class="detail2"toid="detail2"和added class="detail"。

注意：我只对 3 张图片进行了更改。请为他人做

于 2013-05-27T12:35:09.513 回答
1

使用下面的 jscript查看更新的小提琴：

$(document).ready(function () {
    //handle the click of the image button to show the div
    $(".obtn").click(function() {
        //isolate the div number
        var divNumber = $(this).prop('id').replace("obtn", "");
        //hide all details div, using the class name
        $(".detailDiv").hide(1500);
        //show the correct details div, based on the selected div number
        $("#detail" + divNumber).show(1500);
    });

    //handle the more button close function to hide all detail divs
    $('.cbtnImg').click(function(){
        $(".detailDiv").hide(1500);
    });
});

我将所有图像更改为具有类obtn，将详细 div 更改为具有类detailDiv，将更多按钮更改为具有类ctnImg。

我将唯一名称保留为元素 id，并使用上面的 jscript，然后我可以关闭所有详细信息 div，只打开所需的特定 div。

于 2013-05-27T14:22:09.233 回答