Question

我正在使用我的ASP.NET网络应用程序上的jQuery实现一个强制图像滑块。我可以看到第一张照片，但是当我按下下一个或上一个按钮时，它不起作用。

我也安装了jQuery.cycle插件，但不知道出了什么问题。我是否需要另一个插件以及jQuery循环？

HTML

<div id="slider-nav">

        <div id="next">&rang;</div>
        <div id="prev">&lang;</div>

        <div id="slider">
            <img src="~/img/img1.jpg" alt="image">
            <img src="~/img/img2.jpg" alt="image">
            <img src="~/img/img3.jpg" alt="image">
        </div>
    </div>

CSS

<style type="text/css">

    #slider-nav{
        width: 700px;
        height: 280px;
        position: relative;
        margin: 50px auto;
    }

    #slider{
        width: 700px;
        height: 280px;
        position: absolute;
        overflow: hidden;
    }

    #next {
        text-align: center;
        line-height: 50px;
        color: white;
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        top: 120px;
        right: 0;
        z-index: 99;
        cursor: pointer;
        opacity: 0;
    }

    #prev {
        text-align: center;
        line-height: 50px;
        color: white;
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        top: 120px;
        left: 0;
        z-index: 99;
        cursor: pointer;
        opacity: 0;
    }

    #slider-nav:hover #next {
        opacity: 1;
        transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
    }

    #slider-nav:hover #prev {
        opacity: 1;
        transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
    }
  </style>

的Javascript

<script type="text/javascript" src="~/Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.cycle.all.min.js"></script>

<script type="text/javascript">

    $('#slider').cycle({
        fx: 'scrollHorz',
        next: '#next',
        prev: '#prev',
        timeout: 3000,
        pause: 1
    });
</script>

Answer 1

删除重复的<script type="text/javascript" src="~/Scripts/jquery.cycle.all.min.js"></script>

您已经调用它（.min表示脚本的缩小版本。）

将你的电话包裹在一个准备好的块中

<script type="text/javascript">
$( document ).ready(function() {
    $('#slider').cycle({
        fx: 'scrollHorz',
        next: '#next',
        prev: '#prev',
        timeout: 3000,
        pause: 1
    });
});
</script>

更新：我使用您的确切代码创建了一个代码段。它完美地运作。这表明您的其他脚本正在干扰。

＆＃13;

    $('#slider').cycle({
        fx: 'scrollHorz',
        next: '#next',
        prev: '#prev',
        timeout: 3000,
        pause: 1
    });

＆＃13;

    #slider-nav{
        width: 700px;
        height: 280px;
        position: relative;
        margin: 50px auto;
    }

    #slider{
        width: 700px;
        height: 280px;
        position: absolute;
        overflow: hidden;
    }

    #next {
        text-align: center;
        line-height: 50px;
        color: white;
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        top: 120px;
        right: 0;
        z-index: 99;
        cursor: pointer;
        opacity: 0;
    }

    #prev {
        text-align: center;
        line-height: 50px;
        color: white;
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        top: 120px;
        left: 0;
        z-index: 99;
        cursor: pointer;
        opacity: 0;
    }

    #slider-nav:hover #next {
        opacity: 1;
        transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
    }

    #slider-nav:hover #prev {
        opacity: 1;
        transition: all .5s ease-out;
        -webkit-transition: all .5s ease-out;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>

<div id="slider-nav">

        <div id="next">&rang;</div>
        <div id="prev">&lang;</div>

        <div id="slider">
            <img src="//placehold.it/250x250/ff00ff" alt="image">
            <img src="//placehold.it/250x250/0000ff" alt="image">
            <img src="//placehold.it/250x250/00ff00" alt="image">
        </div>
    </div>

＆＃13;

jQuery图像滑块无法使用jQuery-cycle（ASP.NET）

1 个答案: