0

我有一个关于制作按钮显示图像的问题例如，我有四个我想要的按钮每个按钮都在相同的图像内容中显示图像

换句话说：当您按下其中一个按钮时，您会看到图像

这是一个例子：https ://jsfiddle.net/i5yal/yvCtQ/1/

<div id="section-container">
<div class="section-img-container"><a>images will appear here</a>
</div>
</div>

<div id="section-button-container"><div>
<div class="section-button1"><a>1</a>
</div>

<div class="section-button2"><a>2</a>
</div>

<div class="section-button3"><a>3</a>
</div>

<div class="section-button4"><a>4</a>
</div>

</div>
</div>

CSS 代码：

    #section-container {
background-color: #C0C0C0;
width: 300px;
height: 300px;
margin:0 auto;
}

#section-button-container {
width: 300px;
height: 30px;
margin:0 auto;
}

.section-button1 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 30px;
margin-right: 20px;
}

.section-button2 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-button3 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-button4 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-img-container {
background-color: #008080;
background-position: center center;
width: 270px;
height: 270px;
margin: 0 auto;
}
4

2 回答 2

1

为了避免使用 JavaScript，可以使用 CSS（尽管必须对您的 HTML 进行一些小的调整才能这样做）；所以给定修改后的HTML：

<div id="section-container">
    <div class="section-img-container">
        <input type="radio" name="images" id="img1" />
        <img src="http://placekitten.com/300/300/" />
        <input type="radio" name="images" id="img2" />
        <img src="http://lorempixel.com/300/300/nightlife" />
        <input type="radio" name="images" id="img3" />
        <img src="http://lorempixel.com/300/300/people" />
        <input type="radio" name="images" id="img4" />
        <img src="http://dummyimage.com/300x300/000/f90.png&text=image+lorem+ipsum" />
    </div>
</div>

<div id="section-button-container"><div>
    <div class="section-button1">
        <label for="img1">1</label>
    </div>

    <div class="section-button2">
        <label for="img2">2</label>
    </div>

    <div class="section-button3">
        <label for="img3">3</label>
    </div>

    <div class="section-button4">
        <label for="img4">4</label>
    </div>

    </div>
</div>

以及以下 CSS：

#section-button-container label {
    display: block;
    text-align: center;
    height: 100%;
    line-height: 30px;
    cursor: pointer;
}
input[type=radio],
input[type=radio] + img {
    display: none;
}

input:checked + img {
    display: block;
}

JS 小提琴演示。

但是，这确实需要浏览器支持:checked伪选择器和 CSS 下一个兄弟+组合器；并利用label能够检查/取消选中无线电输入的优势（只要标识相关的for属性）。labelidinput

参考：

于 2013-05-19T18:18:52.787 回答
0

对于动画部分调查这个库，我自己使用它，它工作得很好=> animate.css

对于图像的更改，这是相当微不足道的，这是一种方法。

$(document).ready(function() {
    var viewer = $('img.viewer');
    $('a.section-button').click(function () {
        viewer.attr('src', 'your new path to new image');
    });
});

在上面我添加了将附加到主视图区域的类，因此您将拥有：

  <img class="veiwer" />.

您只需在页面加载时隐藏它或加载默认图像。

还在每个锚点上使用“section-button”类。我没有考虑在选项列表中的定位，这意味着 1、2、3、第 4 张图片等等。在部分按钮上具有数据属性可能是最简单的。所以类似的东西。

<a class="section-button" data-imgrc="path to the large image" data-number="1">1</a>

请注意，如果您在部分按钮内只有数字，您也可以抓取内部文本，但我个人更喜欢数据属性。

于 2013-05-19T18:15:42.230 回答