自定义图像滑块

时间：2013-07-20 04:44:51

标签： javascript html css slider

所以我试图用javascript创建自己的基本图像滑块，但它不起作用。我希望它在我的3张图像之间旋转。这是ym javascript：

var count = 1;

setInterval(function animate() {

var slides = document.getElementsByClassName("slide");

for(var i=1; i <slides.length+1; i++) {
    if(i == count) {
        slides[i-1].width = "170px";
    } else {
        slides[i-1].width = "0px"
    }
}

if(count == 3) {
    count = 1;
} else {
    count++;    
}

}, 1000);

这是我的HTML 

<div id="s1" class="slide"></div>
<div id="s2" class="slide"></div>
<div id="s3" class="slide"></div>

我想要它做的是将当前显示的幻灯片高度更改为170px，将其他高度更改为0px。但无论如何，它都会保留在第一张幻灯片上。

3 个答案:

答案 0 :(得分：2)

您应该使用slides[i-1].style.width = "0px"而不是slides[i-1].width = "0px"
jsfiddle：DEMO

答案 1 :(得分：0)

看起来这个例子有点过于简单，因为你没有图像元素。我假设您的HTML看起来像这样：

<div id="s1" class="slide"><img src="s1.jpg"/></div>
<div id="s2" class="slide"><img src="s2.jpg"/></div>
<div id="s3" class="slide"><img src="s2.jpg"/></div>

问题是容器div的大小不会影响其子节点的大小，它们只会溢出div。 Here's a good blog post on how this works.如果您在Firebug等工具中查看DOM，则可以轻松查看。

解决此问题的一种简单方法是将CSS属性“overflow：hidden”添加到.slide类。

.slide {
  overflow: hidden;
}

这会导致div之外的任何事情消失！

答案 2 :(得分：-1)

<html>
<head>
    <meta charset="utf-8">
    <title>Banner Rotator Demo - Jssor Slider, Slideshow with Javascript Source Code</title>
</head>
<body style="background:#fff;">
    <script>
    </script>
    <script type="text/javascript" src="../js/Jssor.Slider.Min.js"></script>
    <script>
        var _SlideshowTransitions = [
        //Swing Outside in Stairs
        {$Duration: 1200, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 9, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInWave, $Top: $JssorEasing$.$EaseInWave, $Clip: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.2, $ScaleVertical: 0.1, $Round: { $Left: 1.3, $Top: 2.5} }

        //Dodge Dance Outside out Stairs
        , { $Duration: 1500, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.1, 0.9], $Top: [0.1, 0.9] }, $SlideOut: true, $FlyDirection: 9, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Round: { $Left: 0.8, $Top: 2.5} }

        //Dodge Pet Outside in Stairs
        , { $Duration: 1500, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 9, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInWave, $Top: $JssorEasing$.$EaseInWave, $Clip: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.2, $ScaleVertical: 0.1, $Round: { $Left: 0.8, $Top: 2.5} }

        //Dodge Dance Outside in Random
        , { $Duration: 1500, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 9, $Easing: { $Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Round: { $Left: 0.8, $Top: 2.5} }

        //Flutter out Wind
        , { $Duration: 1800, $Delay: 30, $Cols: 10, $Rows: 5, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $FlyDirection: 5, $Reverse: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2050, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseOutWave, $Clip: $JssorEasing$.$EaseInOutQuad }, $ScaleHorizontal: 1, $ScaleVertical: 0.2, $Round: { $Top: 1.3} }

        //Collapse Stairs
        , { $Duration: 1200, $Delay: 30, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2049, $Easing: $JssorEasing$.$EaseOutQuad }

        //Collapse Random
        , { $Duration: 1000, $Delay: 30, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad }

        //Vertical Chess Stripe
        , { $Duration: 1000, $Cols: 12, $FlyDirection: 8, $Formation: $JssorSlideshowFormations$.$FormationStraight, $ChessMode: { $Column: 12} }

        //Extrude out Stripe
        , { $Duration: 1000, $Delay: 40, $Cols: 12, $SlideOut: true, $FlyDirection: 2, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInOutExpo, $Opacity: $JssorEasing$.$EaseInOutQuad }, $ScaleHorizontal: 0.2, $Opacity: 2, $Round: { $Top: 0.5} }

        //Dominoes Stripe
        , { $Duration: 2000, $Delay: 60, $Cols: 15, $SlideOut: true, $FlyDirection: 8, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Easing: $JssorEasing$.$EaseOutJump, $Round: { $Top: 1.5} }
        ];
    </script>
    <script>
        jssor_slider1_starter = function (containerId) {
            var jssor_slider1 = new $JssorSlider$(containerId, {
                $AutoPlay: true,//[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlayInterval: 1500,//[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
                    $Class: $JssorSlideshowRunner$,//[Required] Class to create instance of slideshow
                    $Transitions: _SlideshowTransitions,//[Required] An array of slideshow transitions to play slideshow
                    $TransitionsOrder: 1,//[Required] The way to choose transition to play slide, 1 Sequence, 0 Random
                    $ShowLink: 2,//[Required] 0 After Slideshow, 2 Always
                    $ContentMode: false //[Optional] Whether to involve whole html content of each slide to play slideshow, otherwise otherwise use the main image to play slideshow, default value is false
                }
            });
        }
    </script>
    <!-- Jssor Slider Begin -->
    <div id="slider1_container" class="slider1" style="position: relative; width: 600px;
        height: 300px;">
        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>
        <!-- Slides Container -->
        <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
            overflow: hidden;">
            <div>
                <a u=image href="#"><img src="../img/landscape/01.jpg" /></a>
            </div>
            <div>
                <a u=image href="#"><img src="../img/landscape/02.jpg" /></a>
            </div>
            <div>
                <a u=image href="#"><img src="../img/landscape/03.jpg" /></a>
            </div>
            <div>
                <a u=image href="#"><img src="../img/landscape/04.jpg" /></a>
            </div>
        </div>
        <a style="display: none" href="http://slideshow.jssor.com">Image Slider</a>
        <!-- Trigger -->
        <script>
            jssor_slider1_starter('slider1_container');
        </script>
</body>
</html>
相关问题
最新问题