jQuery滑块单击事件

时间:2015-03-09 13:49:48

标签: javascript jquery function slider

我正在尝试为我的网站上的寻呼机锚点创建一个点击事件,而我遇到它没有做这个事件的麻烦。有人可以帮我弄明白我的错误。

这是我的jQuery代码。

<script type="text/javascript">
    $('.prodSlider').cycle({
        fx: 'scrollLeft',
        timeout: 0,
        pause: 1,
        pager: '.prodPager',

        pagerAnchorBuilder: function(idx, slide){
            return '<a href="#">' + slide.alt + '</a>'; 
        }
    });

    $('.prodPager a').on('click', function(){
        setCounter(function(idx, slide){
            return slide.alt;});
    });
</script>

这是其他JavaScript代码

// Create Global Variable
    var count = 0;
    function setCounter(str){
        if(str.indexOf("Sliding") > -1)
        {
            count = 0;
        }
        else if(str.indexOf("Swinging") > -1)
        {
            count = 9;
        }
        else{
            count = 18;
        }
    }

    function getCounter(){
        return count;   
    }

现在,当点击寻呼机锚时,所有这些都应该更新。

<li><a href="#" onclick="getDesc(getCounter())">Overview</a></li>
<li><a href="#" onclick="getDesc(getCounter() + 1)">Features</a></li>
<li><a href="#" onclick="getDesc(getCounter() + 2)">Options</a></li>
<li><a href="#" onclick="getDesc(getCounter() + 3)">Finishes</a></li>
<li><a href="#" onclick="getDesc(getCounter() + 4)">Operators</a></li>
<li><a href="#" onclick="getDesc(getCounter() + 5)">Drawings</a></li>
<li><a href="#" onclick="getDesc(getCounter() + 6)">Installation Instructions</a></li>
<li><a href="#" onclick="getDesc(getCounter() + 7)">CSI Specifications</a></li>
<li><a href="#" onclick="getDesc(getCounter() + 8)">Request a Quote</a></li>

这是我的幻灯片ID和图片。

<div class="prodSlider">
                <img src="images.jpg" alt="Sliding"/>       
                <img src="images.jpg" alt="Swinging Low"/>
                <img src="images.jpg" alt="Vertical"/>
            </div>
            <div class="prodPager" onclick="setCounter(This needs to call the function to get the slides alt values)">

            </div>

如果点击寻呼机,它将采用slides.alt文本并使用它来确定计数。设置计数时,应该通过链接抓取它以显示XML对象的apporiate索引。我知道XML是正确的,因为当我对其中的数字进行硬编码时,它可以正常工作,所以问题在于我的JavaScript。我觉得我错误地使用了.on('click', function()),它也可能与我的JavaScript变量的范围有关,但我不确定。

3 个答案:

答案 0 :(得分:0)

确定答案将此内容添加到.cycle jquery

onPagerEvent: function(idx, slide){
            setCounter(slide.alt)   
        },

并摆脱prodPager div的onclick

答案 1 :(得分:0)

http://jsfiddle.net/manish1706/zhzgmq77/

$(document).ready(function() {
    alert("hello");
    $(".js-header-swipe-image").swipe({
        tap: function(event, target) {
            alert('tap');
        },
        swipe:function(event, direction, distance, duration, fingerCount){
            //Handling swipe direction.
            alert('swipe');
        }
    });
});

答案 2 :(得分:-1)

我想知道您是否可以使用onclick事件与.on('click' - http://www.w3schools.com/jsref/event_onclick.asp