1

我正在尝试为我的图像滑块构建一个计时器，因为它在此站点 https://store.sap.com/sap/cpa/repository/store/sapstore/US/default.html

这是我自己尝试过的。带有文字的图像滑动良好，但我的计时器有问题。但是由于我在尝试过的链接中评论了该代码，因此存在一些问题：

http://codebins.com/bin/4ldqp9c/24

在这里，我创建了一个缩略图，但问题是将图像及其文本与此计时器绑定。

4

1 回答 1

0

我根据图像长度生成了 li ：

for(var i = 0; i< maximages; i++){   
    var th = '<li><a href="#'+i+'"></a></li>';
    $(th).appendTo('#thumbs > ul');
}

并在 li 上添加一个点击功能（并不完美，但这是一个想法）：

$('.paging >li a').on('click', function(e){
    e.preventDefault();
    //console.log(e.target.href);
    var slide = e.target.href.split('#')[1];
    console.log(slide);
    prevIndex = slide; //set next slide to index clicked
});

为拇指设置动画：

$('.paging > li').eq(prevIndex-1).css('background-color', '#777777');
$('.paging > li').eq(prevIndex).css('background-color', '#FF0');

更多的效果应该用 Jquery UI 来完成。

例子

对不起，但现在我没有太多时间来测试它，但希望这会有所帮助。

于 2012-08-07T14:30:23.530 回答