Question

我正在尝试将旋转木马添加到我的网站。我已经浏览了可用的插件，并且遇到了TinyCarousel，它非常简单轻便 - 我正在追求的。

我已经插入了他们的代码并遵循了他们的设置说明，并且可以成功编译并运行带有一些图像的轮播。

我面临的几个问题：

1）我如何修改他们的JS或CSS，以便图像的大小不是那么小？我已尝试在＃slider1 .viewport类中查找高度和宽度，但没有运气。

2）一旦我可以放大我的图像，我想添加一些覆盖图像的DIV，其中包含一些“更多信息”超链接到我网站上的其他页面。旋转木马中的图像仍应旋转，但“更多信息”DIV保持不变。

3）我有什么方法可以在图像顶部放置 NEXT 和 PREV 按钮吗？像这样 - http://wowslider.com/slider-jquery-elegant-linear-demo.html当用户将鼠标悬停在旋转木马上时， NEXT 和 PREV 按钮会淡入。

我在这里尝试过，请看下面的jsFiddle

HTML code：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
<section id="welcome">
    <form method="post">
        <div>
            <section>
                <fieldset>
                    <ul>
                        <div id="slider1">  
                            <a class="buttons prev" href="#">left</a>
                            <div class="viewport">
                                <ul class="overview">
                                    <li>
                                        <img src="http://www.freestanding-kitchens.com/data/usr_001_collections/tables___chairs.jpg" />
                                    </li>
                                    <li>
                                        <img src="http://www.pagazzi.com/wp/wp-content/uploads/2012/06/tables-and-chairs1.jpg" />
                                    </li>
                                </ul>
                            </div>
                            <a class="buttons next" href="#">right</a>
                        </div>
                    </ul>
                </fieldset>
            </section>
        </div>
    </form>
</section>
</body>

JS：

$(document).ready(function () {
    $('#slider1').tinycarousel({
       pager: true,
       interval: true
    });
});

由于

更新解决问题1

新jsFiddle - http://jsfiddle.net/ginarann/JtfDd/15/

Answer 1

这些是您在设置640 x 640尺寸图像时需要进行的更改。

 #slider1 .overview li {
        float: left;
        margin: 0 20px 0 0;
        padding: 1px;
        height:640px;
        border: 1px solid #dcdcdc;
        width: 640px
    }
    #slider1 .viewport {
        float: left;
        width:640px;
        height: 640px;
        overflow: hidden;
        position: relative;
    }

2。像这样。用于CSS。

 #slider1 .overview li span{
       position: absolute;
    background-color: rgba(0, 0, 0, 0.22);
    left: 0px;
    bottom: 0px;
    right: 0px;
    height: 50px;

    }
    #slider1 .overview li {
        float: left;
        margin: 0 20px 0 0;
        padding: 1px;
        height: 400px;
        border: 1px solid #dcdcdc;
        width: 400px;
    position :relative;
    }

for HTML

 <ul class="overview">
                                    <li>
                                        <img src="http://www.freestanding-kitchens.com/data/usr_001_collections/taes___chairs.jpg" />
                                        <span>Image description here 12345</span>
                                    </li>
                                    <li>
                                        <img src="http://www.pagazzi.com/wp/wp-content/uploads/2012/06/tables-d-chairs1.jpg" />
                                        <span>Image description here 2</span>
                                    </li>
                                </ul>

已经设置了html for按钮你只需要css
```
     #slider1 .buttons.prev{
  background-color:#333;
}
```
＃slider1 .buttons.next { 背景色：＃333; }

相应地自定义这些样式..

向TinyCarousel添加元素

1 个答案: