다음 시나리오에서 페이지로드시 jQuery 슬라이더 함수에 인수를 전달하는 방법은 무엇입니까?

-1

하나의 이미지 슬라이더를 사용했습니다. 이 jQuery 이미지 슬라이더의 HTML 코드에는 숫자 값이 들어있는 숨겨진 필드가 하나 있습니다. 이 수치는 각 슬라이더 이미지가 표시되어야하는 시간 (초)입니다. 시간이 끝나면 다음 이미지가 표시됩니다.다음 시나리오에서 페이지로드시 jQuery 슬라이더 함수에 인수를 전달하는 방법은 무엇입니까?

html로 다음과 같이 그것이를 위해 jQuery 코드 :

HTML 코드 :

<input type="hidden" name="brand_slider_time" id="brand_slider_time" value="10"> 
<div class="leaderboard"> 
    <ul id="demo1"> 
    <li><a href="#slide1"><img src="img/Slid1.png" alt="Lorem Ipsum"></a></li> 
    <li><a href="#slide2"><img src="img/Slid2.png" alt="Lorem Ipsum"></a></li> 
    <li><a href="#slide3"><img src="img/slid3.png" alt="Lorem Ipsum"></a></li> 
    </ul> 
</div>

jQuery 코드 : 필요한 jQuery를하고 CSS 파일이

$(function() { 
    var demo1 = $("#demo1").slippry({ 
    transition: 'fade', 
    useCSS: true, 
    speed: 1000, 
    pause: 3000, 
    auto: true, 
    preload: 'visible' 
    }); 
    $('.stop').click(function() { 
    demo1.stopAuto(); 
    }); 
    $('.start').click(function() { 
    demo1.startAuto(); 
    }); 
    $('.prev').click(function() { 
    demo1.goToPrevSlide(); 
    return false; 
    }); 
    $('.next').click(function() { 
    demo1.goToNextSlide(); 
    return false; 
    }); 
    $('.reset').click(function() { 
    demo1.destroySlider(); 
    return false; 
    }); 
    $('.reload').click(function() { 
    demo1.reloadSlider(); 
    return false; 
    }); 
    $('.init').click(function() { 
    demo1 = $("#demo1").slippry(); 
    return false; 
    }); 
});

을 이미 포함되었습니다.

숨겨진 필드의 값을 슬라이더 함수에 n 인수로 전달할 때 아래 코드를 동일한 파일에서 시도했지만 나에게 적합하지 않았습니다.

$(document).ready(function() { 
    var val = $('#brand_slider_time').val() * 1000; 
    demo1.destroySlider(); 
    demo1 = $("#demo1").slippry({ 
    pause: val 
    }); 
});

이 코드를 동일한 파일의 슬라이더 기능 코드 위에 썼습니다.

이 값을 jQuery 슬라이더 함수에 어떻게 전달해야하며이 값을 슬라이더의 각 이미지가 10 초 동안 표시되는 함수에 사용합니까?

내 문제를 이해하는 데 소중한 시간을 보내 주셔서 감사합니다. 이 문제와 관련하여 더 자세한 정보가 필요하면 알려주십시오.

모든 종류의 hep는 높이 평가됩니다. 소중한 답장을 기다리고 있습니다.

출처

2014-09-28 user2839497

당,'는 10000을주고있다? –

@jQueryAngryBird : 예, 10000을 경고합니다. – user2839497

나는 완벽하게는 FIDDLE

는 그 다음 십초 일시 정지, 다음 이미지를 의미 여기 pause: 10000,

을 적용 숨겨진 필드 값을 취함으로써 작동했다.

수정 된 코드를 사용해보십시오. 그리고 즐긴다 :) 나는 점검했다. 그리고 그것은 10 초를 움직이게했다. IMG`var에 발 = $ ('# 브랜드 ...') ' 쓰기`경고 (발) 후

<!DOCTYPE html> 
<html> 
    <head> 
     <title>slippry demo</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
     <script src="../dist/slippry.min.js"></script> 
     <script src="//use.edgefonts.net/cabin;source-sans-pro:n2,i2,n3,n4,n6,n7,n9.js"></script> 
     <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" href="demo.css"> 
    <link rel="stylesheet" href="../dist/slippry.css"> 
    </head> 
    <body>  
     <section class="demo_wrapper"> 
      <article class="demo_block"> 
       <input type="hidden" name="brand_slider_time" id="brand_slider_time" value="10"> 

       <h1>Simple demo with default setups</h1> 
       <a href="#glob" class='prev'>Prev</a>/<a href="#glob" class='next'>Next</a> 
     || <a href="#glob" class='init'>Init</a> | <a href="#glob" class='reset'>Destroy</a> | <a href="#glob" class='reload'>Reload</a> 
     || <a href="#glob" class='stop'>Stop</a> | <a href="#glob" class='start'>Start</a> 
      <ul id="demo1"> 
       <li><a href="#slide1"><img src="img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li> 
       <li><a href="#slide2"><img src="img/image-2.jpg" alt="This is caption 2"></a></li> 
       <li><a href="#slide3"><img src="img/image-4.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li> 
      </ul> 
      </article> 
     </section>  

     <script> 
      $(function() { 
       var demo1 = $("#demo1").slippry({ 
        transition: 'fade', 
        useCSS: true, 
        speed: 1000, 
        pause: $('#brand_slider_time').val() * 1000, 
        auto: true, 
        preload: 'visible' 
       }); 

       $('.stop').click(function() { 
        demo1.stopAuto(); 
       }); 

       $('.start').click(function() { 
        demo1.startAuto(); 
       }); 

       $('.prev').click(function() { 
        demo1.goToPrevSlide(); 
        return false; 
       }); 
       $('.next').click(function() { 
        demo1.goToNextSlide(); 
        return false; 
       }); 
       $('.reset').click(function() { 
        demo1.destroySlider(); 
        return false; 
       }); 
       $('.reload').click(function() { 
        demo1.reloadSlider(); 
        return false; 
       }); 
       $('.init').click(function() { 
        demo1 = $("#demo1").slippry(); 
        return false; 
       }); 
      }); 
     </script> 
    </body> 
</html>

출처

2014-09-28 06:46:12

네, 정확히 요점이 있습니다. 그러나이 값을 함수에 어떻게 전달해야합니까? 내가해야 할 코드가 어떻게 바뀌나요? – user2839497

내가 볼 수있는 곳으로 피들을 줘. 현재 내가 할 수 없기 때문에 디버그를 할 수 없다. –

나는 외부 js와 CSS를 사용하고 있기 때문에 그것을 위해 바이올린을 만들 수 없다. 또한 내 슬라이더가 완벽하게 작동합니다. 이 인수를 슬라이더 함수에 전달하는 방법에 대한 솔루션을 원하십니까? – user2839497

다음 시나리오에서 페이지로드시 jQuery 슬라이더 함수에 인수를 전달하는 방법은 무엇입니까?

답변

관련 문제