0

vertically I am trying to make a carousel by myself without using any other tools like Bootstrap.

I came across the situation where my images are not aligned horizontally. I tried using display: inline-block and float: left separately and desperately, but they didn't seem to be the case of mine. Also, using different techniques dealing with the overflow did not affect the divs either.

So here is my HTML structure:

<div id="image-slider">
    <div id="images">
        <div class="item"><img src="images/image0.jpg"></div>
        <div class="item"><img src="images/image1.jpg"></div>
        <div class="item"><img src="images/image2.jpg"></div>
        <div class="item"><img src="images/image3.jpg"></div>
        <div class="item"><img src="images/image4.jpg"></div>
    </div>
    <ul id="indicator">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="button" class="switch" id="prev" value="&lt;">
    <input type="button" class="switch" id="next" value="&gt;">
</div>

And here comes the corresponding CSS code:

#image-slider, .item, .item img { /* Tried removing the ".item img" but the images were too big if so */
    width: 100%;
    height: 100%;
}

#image-slider {
    position: relative;
    overflow: hidden;
}

#indicator {
    position: absolute;
    bottom: 0;
}

#images, .item { position: relative; }
.item { display: inline-block; }

So how do I fix it? Oh, another question: how do I modify the #indicator so that the elements inside are clickable elements (without using tools)?

4

3 回答 3

0

这是您的代码的jsfiddle，这对于让人们看到交互并快速诊断问题非常有帮助。

这个问题基本上是双重的，你需要一个float:left图像。并且您的边界框需要与图像的确切大小相匹配。在我使用的示例中，200px由于没有图像。

在 html 中，所有元素都是可点击的，但您需要 jQuery（轻松处理事件）来捕获点击事件并“做”一些事情（回调函数）。然后，您只需将光标设置为指针，使 UI感觉就像一个可点击的项目。

一个示例 jQuery 项目将是：

$('.item img').on('click',function(){
       // Do something here.
       alert('img clicked');
});

建议在 id 上使用类，不过是小问题。

这与上面的答案几乎相同......刚刚看到它。

于 2013-10-15T16:29:38.187 回答
0

回答第一个

一件事可以是使用，display: inline-block而另一种使用方法float: left需要其他标签具有，float: right以便它们可以在彼此前面浮动。

然后给它们一个宽度，让我们说60%左边 div 和35%右边（你也可以使用 40%）。这样，它们就不会相互混淆。

not-floating-infront-of-other 的一个问题可能是 div 的宽度大于允许的宽度。为防止这种情况，您可以使用max-width确保它们具有该值的最大值并且它们不超过该值。

回答第二个问题

你可以使用 jQuery 创建一个可点击的元素：

$('selector').click(function () {
 /* trigger click with 
  * $(this).trigger('click') or do what ever you want..
  */
}

这样，您可以使元素可点击，并更改光标使用

selector {
  cursor: pointer; // to create a pointer for that..
}

感觉就像发生了点击一样！

于 2013-10-15T16:20:29.437 回答
0

不太确定你的要求是什么，所以我把所有东西都水平了。希望这会有所帮助

HTML：

<div id="image-slider">
  <div id="images">
    <div class="item"><span class="finger"><img src="images/image0.jpg"></span> <span class="finger"><img src="images/image0.jpg"></span><span class="finger"> <img src="images/image0.jpg"></span> <span class="finger"><img src="images/image0.jpg"></span><span class="finger"> <img src="images/image0.jpg"></span> <span class="finger"><img src="images/image0.jpg"></span><span class="finger"> <img src="images/image0.jpg"></span> </div>
  </div>
  <table>
    <tr>
      <td><ul id="indicator"></td>
      <td><li>1</li></td>
      <td><li>2</li></td>
      <td><li>3</li></td>
      <td><li>4</li></td>
      <td><li>5</li>
        </ul></td>
    </tr>
  </table>
  <input type="button" class="switch" id="prev" value="&lt;">
  <input type="button" class="switch" id="next" value="&gt;">
</div>

CSS：

.finger:hover{cursor:pointer;}
于 2013-10-15T17:43:01.487 回答