图像计时器中的问题

时间:2012-08-07 13:34:00

标签: javascript jquery

我正在尝试为我的Image Slider构建一个计时器,因为它在此站点中 https://store.sap.com/sap/cpa/repository/store/sapstore/US/default.html

这是我尝试过的。 带文字的图像滑动良好,但我的计时器有问题。 但是有一些问题是由于我在我尝试的链接中评论了代码:

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

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

1 个答案:

答案 0 :(得分: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做更多的效果。

EXAMPLE

对不起,但现在我没有太多时间去测试它,但希望能有所帮助。