Question

我找了一个滑块插件，当鼠标悬停在缩略图上时显示图像，我发现了这个：http://codepen.io/fixcl/pen/BImgA

总的来说，它运作良好，但有两个主要问题。

首先，我想把缩略图（.mini）放在除#contenedor之外的某个地方，但是在我将迷你div移动到原来的位置之后它就会停止运行。

例如，

<section id="contenedor">

<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50" width="150"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50" width="150"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50" width="150"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50" width="150"></div>

<ul id="slider">
    <li>
        <div><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
        <img src="http://placehold.it/600x200" alt="" height="200" width="600">
    </li>
    <li>
        <div><p>Ipsum slider</p></div>
        <img src="http://placehold.it/600x200" alt="" height="200" width="600">
    </li>
    <li>
        <div><p>Ipsum slider</p></div>
        <img src="http://placehold.it/600x200" alt="" height="200" width="600">
    </li>
    <li>
        <div><p>Ipsum slider</p></div>
        <img src="http://placehold.it/600x200" alt="" height="200" width="600">
    </li>
</ul>

</section>

这可行，但

<section id="contenedor">



<ul id="slider">
    <li>
        <div><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
        <img src="http://placehold.it/600x200" alt="" height="200" width="600">
    </li>
    <li>
        <div><p>Ipsum slider</p></div>
        <img src="http://placehold.it/600x200" alt="" height="200" width="600">
    </li>
    <li>
        <div><p>Ipsum slider</p></div>
        <img src="http://placehold.it/600x200" alt="" height="200" width="600">
    </li>
    <li>
        <div><p>Ipsum slider</p></div>
        <img src="http://placehold.it/600x200" alt="" height="200" width="600">
    </li>
</ul>

<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50" width="150"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50" width="150"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50" width="150"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50" width="150"></div>


</section>

这不起作用。

奇怪的是，如果我在.mini中添加margin-top或几乎任何东西，也会停止工作。

有谁知道原因？

问题是，我想让滑块内的图像自动调整大小以适合div。

我尝试过给滑块divs background-image，而不仅仅是插入图片，但它似乎不起作用。

任何人都可以帮助我吗？感谢。

Answer 1

从$str = '{"start_date":"2011-01-01 09:00","end_date":"2011-01-01 10:00","text":"test","start":"2011-01-01 09:00","date":"2011-01-01 10:00","text":"test"}'; $str = preg_replace('/"([^"]+)"\s*:\s*/', '$1:', $str); echo $str;移除margin-top: 200px;，将.mini添加到margin-top:55px;，将#slider{图片放在大图片上方。

我认为您不需要在HTML中进行更改。你可以用css本身来做。

<强> Working CodePen

Answer 2

替换以下样式：

#contenedor{
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
    width:600px;
    height: 250px;
    margin: 20px auto 0 auto;
    overflow:hidden;
    position: relative;
}

.mini{
    -webkit-filter: grayscale(100%);
    cursor: ew-resize;
    float: left;
    margin-top: 200px;
    width: 25%;
    transition: all .5s linear;
}

使用：

#contenedor{
    width:600px;
    height: 270px;
    margin: 20px auto 0 auto;
    overflow:hidden;
    position: relative;
}

.mini{
    -webkit-filter: grayscale(100%);
    cursor: ew-resize;
    float: left;
    margin-top: 220px;
    width: 25%;
    transition: all .5s linear;
}

我还从section移除了边框，150x150图片看起来在底部的框外。

在您的网站中，您没有足够的空间容纳150x150四次，因此我将width图片缩小为122px。

<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50px" width="122px"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50px" width="122px"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50px" width="122px"></div>
<div class="mini"><img src="http://placehold.it/150x50" alt="" height="50px" width="122px"></div>

css滑块插件在最轻微修改后停止工作

2 个答案: