0

我正在尝试向我的网站添加轮播。我环顾了一下可用的插件，发现了 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 代码：

<!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/

4

1 回答 1

0

好的，如果您要设置 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;
    }

对于 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>

  1. 按钮的 html 已经设置好了，你只需要 css

         #slider1 .buttons.prev{
  background-color:#333;
}

    #slider1 .buttons.next{ 背景颜色：#333; }

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

于 2013-08-03T11:50:00.117 回答