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