Javascript 向TinyCarousel添加元素
我正在尝试向我的站点添加旋转木马。我环顾了一下可用的插件，发现了TinyCarousel，它非常简单和轻巧——这就是我想要的 我已经插入了他们的代码并按照他们的安装说明进行了操作，并且能够成功地编译并运行带有一些图像的旋转木马 我面临的几个问题： 1） 我如何修改他们的JS或CSS，使图像的大小不那么小？我曾尝试在#slider1.viewport类中更改高度和宽度，但没有成功 2） 一旦我可以放大我的图片，我想在图片上添加一些DIV，其中包含一些到我网站上其他页面的“更多信息”超链接。旋转木马中的图像仍应旋转，但“更多信息”DIV保持不变 3） 是否有任何方法可以将下一个和上一个按钮放置在图像顶部？这样-当用户将鼠标悬停在旋转木马上时，NEXT和PREV按钮淡入 我已经在这里尝试过了，请看下面我的JSFIDLE HTML代码：Javascript 向TinyCarousel添加元素,javascript,jquery,html,jquery-plugins,Javascript,Jquery,Html,Jquery Plugins,我正在尝试向我的站点添加旋转木马。我环顾了一下可用的插件，发现了TinyCarousel，它非常简单和轻巧——这就是我想要的 我已经插入了他们的代码并按照他们的安装说明进行了操作，并且能够成功地编译并运行带有一些图像的旋转木马 我面临的几个问题： 1） 我如何修改他们的JS或CSS，使图像的大小不那么小？我曾尝试在#slider1.viewport类中更改高度和宽度，但没有成功 2） 一旦我可以放大我的图片，我想在图片上添加一些DIV，其中包含一些到我网站上其他页面的“更多信息”超链接。旋转木马
<!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>
$(document).ready(function () {
$('#slider1').tinycarousel({
pager: true,
interval: true
});
});
新的JSFIDLE-好的，如果要设置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;
}
#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;
}
<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>
相应地定制这些样式。谢谢，但我并不是要调整图像大小以适合盒子，我希望它们是真实的大小，例如600px 600px是的，这很有效-谢谢您的时间！您是否能够帮助解决问题2和问题3？再次感谢！这与我所追求的非常接近，然而，我正试图让“更多信息”坐在图像上方。。。图像在下面旋转。因此，“更多信息”分区/跨度是静态的，在旋转图像的下方有一个旋转木马。希望这是有道理的。谢谢你的时间。更新我的小提琴与您的修正案-抱歉，我的印象是我需要15rep标记为答案，刚刚意识到这是为了“升级”：）感谢更新有关的按钮。任何关于尝试让“更多信息”坐在图像上方的建议。。。图像在下面旋转。因此，“更多信息”分区/跨度是静态的，在旋转图像的下方有一个旋转木马。
#slider1 .buttons.prev{
background-color:#333;
}