Question

我想了解这是如何运作的。

我想使用的jQuery轮播是Elastislide http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

该网站为我们提供了我们需要使用的代码：

var carousel = $('#carousel').elastislide();
...
$('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
carousel.add();

我还在jquery.elastislide.js文件中找到了那些行，但它被/ *

忽略了

这是HTML：

      <div>
        <div class="fixed-bar">
           <!-- Elastislide Carousel -->
           <ul id="carousel" class="elastislide-list">     
              <li><a href="http://www.site1.com"><img src="images/1.jpg" alt="img1" /></a></li>
              <li><a href="http://www.site2.com"><img src="images/2.jpg" alt="img2" /></a></li>
              <li><a href="http://www.site3.com"><img src="images/3.jpg" alt="img3" /></a></li>
              <li><a href="http://www.site4.com"><img src="images/4.jpg" alt="img4" /></a></li>
           </ul>
           <!-- End Elastislide Carousel -->
        </div>
     </div>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
         <script type="text/javascript" src="js/jquerypp.custom.js"></script>
         <script type="text/javascript" src="js/jquery.elastislide.js"></script>
         <script type="text/javascript">      
            $( '#carousel' ).elastislide( {
            minItems : 1
             } );
          </script>

HTML显然会查找所有这些项目。但是javascript根据可用的内容决定html中显示的内容，对吧？

所以我的猜测是html在我做任何事情之前需要看起来像这样：

               <!-- Elastislide Carousel -->
           <ul id="carousel" class="elastislide-list">     
           </ul>
           <!-- End Elastislide Carousel -->

我需要添加Javascript。否则如何添加图像和链接等列表项？有人可以证实这是正确的吗？我不认为我在那之后就完成了，我需要在某个地方添加路径，也可能在javascript中添加。
否则它将如何知道它需要在哪个文件夹中查找？

为了使事情变得更复杂（或者可能不是），我试图在Joomla中这样做我可以安装或多或少做类似于这个旋转木马的扩展的扩展，但我不想，因为所有归结为单击按钮而不是真正理解它。

谢谢。

Answer 1

但是javascript决定了html中显示的内容，基于可用的，对吗？

可能有Javascript，PHP脚本甚至静态HTML标记来“决定”显示的内容。致电$('#carousel').elastislide();您只需告诉Elastislide插件，使用ul id="carousel"关于其当前内容制作旋转木马。这些内容（li s带有图片和链接）可能来自任何来源：

只需驻留在静态HTML代码中，就像您的第二个样本
由PHP或任何其他服务器脚本生成
通过Javascript代码在客户端（在浏览器的浏览器中）生成 $('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
如果在调用$('#carousel').elastislide();之前使用JS 生成它们，则不必执行任何其他操作。
但是如果你想在已经形成的轮播中添加项目，请在致电var carousel = $('#carousel').elastislide();后 - 使用相同的代码将新的li附加到轮播来源（ul），但在此之后你必须致电carousel.add();以'告知'Elastislide插件你已经更改了轮播来源，因此插件必须相应地更新其视觉表示。

补充：实际上，在Joomla中，您应该使用服务器端PHP代码来构建HTML轮播源（基于来自该CMS的一些数据），并且在客户端只需调用$('#carousel').elastislide();。

Answer 2

以下是使用Elastislide轮播的完整工作静态HTML页面

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>

</body>
<ul id="carousel" class="elastislide-list">     
  <li><a href="1.jpg"><img src="1.jpg" alt="img1" /></a></li>
  <li><a href="2.jpg"><img src="2.jpg" alt="img2" /></a></li>
  <li><a href="3.jpg"><img src="3.jpg" alt="img3" /></a></li>
  <li><a href="4.jpg"><img src="4.jpg" alt="img4" /></a></li>
</ul>
<script type="text/javascript">      
  $('#carousel').elastislide();
</script>

<body>
</html>

请注意，文件结构很重要 - 对于此类HTML，您必须具备：
/ filanme.htm（或.php） - 页面本身
/ css / * - 包含css文件
/ js / * - 包括javascripts
/ images / * - Elastislide补充图像（包含在其包装中）

要使用PHP超文本预处理器生成这样的页面，您的步骤可能就像这些。

从Joomla CMS（或直接MySQL数据库）中检索有关哪些图像和链接站点管理员希望加载到轮播中的PHP数据。我很难说如何用Joomla做这个，因为我不经常使用它，所以我给出一个简单函数的例子，总是返回带有数据的'预煮'PHP数组。
获得数据后，生成形成轮播来源的ul和li的标记，并在其后插入$('#carousel').elastislide();来插入脚本。

这是简单的，但正在运行的PHP代码示例：

<?
// such a funciton would be inside CMS, not in your code
function CMS_get_carousel_data( $carousel_name ) {
  return array(
    array( 'link'=>'1.jpg', 'image'=>'1.jpg', 'alt_text'=>'1' ),
    array( 'link'=>'2.jpg', 'image'=>'2.jpg', 'alt_text'=>'2' ),
    array( 'link'=>'3.jpg', 'image'=>'3.jpg', 'alt_text'=>'3' ),
    array( 'link'=>'4.jpg', 'image'=>'4.jpg', 'alt_text'=>'4' )
  );
}
?>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>
<?
// calling 'CMS' function to retrieve data to be displayed in the carousel
$data = CMS_get_carousel_data('carousel_A');
?>
</body>
<ul id="carousel_A" class="elastislide-list">
  <? foreach( $data as $item ) { /* generating markup */ ?>
  <li>
    <a href="<?=$item['link']?>">
      <img src="<?=$item['image']?>" alt="<?=$item['alt_text']?>" />
    </a>
  </li>
  <? } ?>
</ul>
<script type="text/javascript">      
  $('#carousel_A').elastislide();
</script>

<body>
</html>

要实现这一点，您应该将上面的代码放在您网站上的.php文件中，将其他所需文件放到适当的文件夹中，当然，在Joomla CMS中找到真正的API来检索轮播数据并使用它

如何动态添加图像和链接到旋转木马？

2 个答案: