如何将jscarousel转换为可使用语义html？

问题描述

| 我正在尝试重新创建此图像滑块： http://www.egrappler.com/contents/jsCarousel/demo/jsCarousel.htm 除了使用更有意义的html。此页面仅使用了一堆随机div，更多div封装了整个内容：

<div id=\"jsCarousel\">
  <div>Image</div>
  <div>Image</div>
  <div>Image</div>
</div>

我希望我的html看起来更像：

<ul id=\"jsCarousel\">
  <li>Image</li>
  <li>Image</li>
  <li>Image</li>
</ul>

但我无法确定js源中的div选择器是什么。例如，以下三个声明：

var slider = $(\'<div/>\').addClass(\'jscarousal\');
var leftbutton = $(\'<div/>\').addClass(\'jscarousal-left\');
var rightbutton = $(\'<div/>\').addClass(\'jscarousal-right\');

我无法确定html中的哪些div受到影响，因此可以将div更改为ul或li。如果只是这三行，我敢肯定，经过10分钟的猜测，我会到达需要的位置，但是js文件中有30多个地方。 我感觉这是基本的js / jquery，因此我用Google搜索了它，但是找不到能翻译或教会我所需知识的东西。那里的任何javascript专家都有免费的时间向我展示如何确定哪些div需要为ul，哪些为li？ 在此先感谢任何可以提供帮助的人！ - 标记     

解决方法

在jsCarousel.js（代码从第2行开始）内部，将这些行中的

div

更改为

li

：

22,43,44

将第74行更改为：

$(\'> div > li\',slidercontents).css(\'display\',\'\');

在jsCarousel.css内部，将

margin:0;

和add8ѭ添加到

.jscarousel-contents

（第35行） 也将

.jscarousal-contents > div > div

更改为

.jscarousal-contents > div > li

那应该做！     ,好吧，js就像

$(document).ready(function() {
$(\'#jsCarousel\').jsCarousel({ onthumbnailclick: function(src) { alert(src); },autoscroll: true });
}); 

html的结构是这样的

<div id=\"jsCarousel\">
            <div>
                <img src=\"images/img_1.jpg\"><br>
                <span class=\"thumbnail-text\">Image Text</span></div>
            <div>
                <img src=\"images/img_2.jpg\"><br>
                <span class=\"thumbnail-text\">Image Text</span></div>
            <div>
                <img src=\"images/img_3.jpg\"><br>
                <span class=\"thumbnail-text\">Image Text</span></div>
            <div>
                <img src=\"images/img_4.jpg\"><br>
                <span class=\"thumbnail-text\">Image Text</span></div>
            .........
            .........

        </div>