1

私は jQuery CameraSlider を使用していますが、正常に動作していますが、ページが読み込まれると、含まれている div の上部でページネーション アイコンが点滅し、クライアントはそれらが消えるのを待ち望んでいます。コードは、実際に作成されたとおりに実行されます。ただし、可能であれば、読み込み時にページネーション アイコンが点滅しないようにしたいと考えています。

問題のページはこちらです。

制御する必要がある要素を特定し、自分が求めているものだと「思う」スクリプトを見つけましたが、それを自分のやりたいことを正確に実行させることができません。

スタイルでこの要素を設定することにより、"display:none; ページネーションが取得されないため、これらが制御する要素であることがわかります。

.camera_wrap .camera_pag .camera_pag_ul li {
    background: #929497;     
}

スクリプト内のこの行は、5 秒後にページネーションをオフにするので、それを制御できることはわかっていますが、その逆はできません。5 秒後、または許容できる時間後に表示されます。

setTimeout(function() { $('.camera_pag_ul li').hide() }, 5000);

次のようなものは、5 秒後にページネーション アイコンが表示されるのではないかと考えましたが、そうではありません。

<script type="text/javascript">

    $(document).ready(function() {
        setTimeout(function() { $('.camera_pag_ul li').show() }, 5000);
    });

</script>

私もこのアプローチを試みましたが成功しませんでした。

<style>.camera_pag_ul li{display:none;}</style>

$(window).load(function() {
  // When the page has loaded
$("camera_pag_ul li").show(5000);
});

ページの下部に表示されるスクリプトを次に示します。

<script src="js/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.js"><\/script>')</script>
    <!-- Camera Slideshow -->
    <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='js/slider/camera1920.js'></script>

    <script type="text/javascript">
        $(function(){

                //dropdown navigation
                $('#navigation_horiz').naviDropDown({
                        dropDownWidth: '165px'  //adjusted to longest title in dropdown = Corporate Responsibility

                });

                //Add bounce effect on Hover to class                    
        $('.imgHover').mouseenter(function () {
                      $(this).effect("bounce", { distance: 3, times:1 }, 900);
                });

                //camera slideshow
                jQuery('#camera_wrap_1').camera({               

            thumbnails: false,  //true will make thumbnails of the image appear on hovering over pagination dots
            pagination: true


        });

        setTimeout(function() { $('.camera_wrap .camera_pag .camera_pag_ul li').hide() }, 5000);   //This works so why can't I get it to do the opposite??

        });
</script>

ページが読み込まれるまで、それらを非表示にしたいだけです。

私は解決策を見つけました-ここにあります：

ラッパーでコントロールを参照します。

CSS
.camera_pag {
  display: none;
}

そして、スクリプト内の要素の表示を制御します = ページが読み込まれると表示されます。

JS
jQuery('#camera_wrap_1').camera({       
    /*/     /*sets the height */
    thumbnails: false,  
    pagination: true,
    onLoaded: function() {
        $(".camera_pag").show(); // or .fadeIn();
    }
});
4

0 に答える 0