Question

我想在每张幻灯片上创建一个带有自定义链接的幻灯片。到目前为止，我能够使用jQuery添加幻灯片中显示的图像。如何为每张图片添加不同的文字或按钮？

本网站上有一个例子：baronfig.com

PS任何具有此功能的joomla扩展也会很好。

Answer 1

如果您正在运行Joomla网站，请使用其中一个滑块。他们有你想要的东西

Answer 2

这是一个想法的简单示例。
如你所见，图片处于绝对位置，链接就在他们身上。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
    width:500px;
    height:300px;
    position:relative;
    background-color: #09C;
}
.contImages{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
.contImages img{
    position: absolute;
    z-index: 1;
}
.contImages a{
    position: absolute;
    z-index: 100;
    display: block;
    left: 0px;
    bottom: 0px;
    background-color: #C63;
    height: 30px;
    width: 100px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#next').click(function(){
        $('.contImages:first').appendTo('#container')
        })
});
</script>
</head>
<body>
<div id="container">
      <div class="contImages" style="background-color:red"><a href="#">aaaaa</a><img src="../immagini/foto/ingrandimenti/botti.jpg" width="520" height="300"></div>
      <div class="contImages" style="background-color:green"><a href="#">bbbb</a><img src="../immagini/foto/ingrandimenti/donna.jpg" width="520" height="300"></div>
      <div class="contImages" style="background-color:blue"><a href="#">cccc</a><img src="../immagini/foto/ingrandimenti/donnaaaa.jpg" width="520" height="300"></div>
      <div class="contImages" style="background-color:pink"><a href="#">dddd</a><img src="../immagini/foto/ingrandimenti/faccia.jpg" width="520" height="300"></div>
  </div>
  <input name="" type="button" id="next" value="next">
</body>
</html>

Answer 3

试试这个，

使用带有FREE扩展名的Joomla横幅组件创建一个漂亮的滑块。试试这个banner slideshow module。

跟踪点击次数和点击次数。
跟踪展示。
选择合适的类别。
10+幻灯片效果
所有效果的随机模式。

希望它的帮助..

幻灯片显示每张幻灯片的自定义链接

3 个答案: