Question

我正在尝试重新创建此图片滑块：

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>

但我无法分辨哪个div选择器是js源代码中的内容。例如，这三个声明：

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？

提前感谢任何有帮助的人！

- 标记

Answer 1

在jsCarousel.js内部（代码从第2行开始），在这些行中将div更改为li：22, 43, 44

将第74行更改为：$('> div > li', slidercontents).css('display', '');

在jsCarousel.css中，将margin:0;和padding:0;添加到.jscarousel-contents（第35行）

也将.jscarousal-contents > div > div更改为.jscarousal-contents > div > li

应该这样做！

Answer 2

嗯，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>

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

2 个答案: