Question

图片滑块是由最初创建网站的人用jq javascript制作的，我想帮助在<li><a>上添加工作链接来触发脚本的动画。

这是我的代码：

<script type="text/javascript">
//<![CDATA[
jq(document).ready(function(){
    if ( jq('#slider-home ul#slider').length == 1 && jq('#slider-home ul#slider li').length > 1  ){
        var homeslidenav = new Array([!YAMS? &get=`tv` &from=`nav-slider`!]);
        jq.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
            jq(pager).each(function() {
                jq(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
            });
                        jq('#navwh').stop(true, true).css('width', currSlide * 138).animate({ width: '+=138' }, 4800 );
        };
        jq('#slider-home ul#slider').cycle({
            fx                : 'fade',
            pause             : true,
            pager             : '#nav-menu',
            pagerEvent        : 'mouseover',
            timeout           : 4000,
            activePagerClass  : 'active',
            onPagerEvent      : function(a){
                jq('#navwh').css('width', a * 138).animate({ width: '+=138' }, 4800 );
            },
            pagerAnchorBuilder: function(idx, slide) {
                var chtml = '<li id="hotel' + (idx + 1) + '"';
                if (idx == 0) chtml += ' class="first"';
                chtml   += '><a href="#">' + homeslidenav[idx] + '</a></li>';
                return chtml;
            }
        });
    }
});
//]]>
</script>

我已经能够将pageEvent从click更改为mouseover，因为我发现它更实用。现在我想保留动画，但同时在<a href="#">中添加工作链接而不是无用的<li>。我已经尝试在<a href="#">中添加一个实际的url，但它不起作用，因为我认为onPagerEvent会覆盖<a>（我可能已经注意到了我不能流利的js。）

有人可以帮我找到添加此工作链接的方法吗？

提前致谢。

Answer 1

onPagerEvent没有对你的链接做任何事情 - 它只是调整沿着图像底部的白条宽度（表示下一幅图像显示的时间长度）

该网站正在使用jQuery循环插件 - 您可以在此处找到文档：http://jquery.malsup.com/cycle/

updateActivePagerLink函数负责更新链接（顺便说一句，我访问过网站，链接似乎正在工作 - 你是否试图添加更多链接？）链接本身来自里面的列表项<ul id="slider">，如下：

<li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 7; opacity: 0; width: 966px; height: 390px;"><a href="/en/hotel-pont-royal"><img src="/assets/images/groupe/sliders/SliderHome-3_en.jpg" alt=""></a></li>

要使用链接添加新图片，只需添加上面格式的新<li>（以及<a>中的正确href） - 您无需修改任何JavaScript代码

将单击事件添加到JQUERY滑块

1 个答案: