个人中心
gpt4 book ai didi

javascript - 旋转木马 slider 图像不滑动

转载 作者：太空宇宙 更新时间：2023-11-04 12:51:47 25 4
gpt4 key购买 nike

我一直在制作我的轮播 slider ，我现在有图像显示。

但无法让它滑动第一张图像应该淡化并重置幻灯片。

我有来自 Google 的当前 Ajax/jquery。它应该能够滑动。不确定出了什么问题。

实例:http://codepen.io/riwakawebsitedesigns/pen/CEgdm 

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
   <link rel="stylesheet" href="css/responsive.css" media="screen" type="text/css" media="all" />
   <link rel="stylesheet" href="css/carousel.css" media="screen" type="text/css" media="all" />
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
   <script type="text/javascript">
    $(document).ready(function () {
            $(".carousel #1").show("fade", 500);
            $(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500);

            var sc = $(".carousel img").size();
            var count = 2;

            setInterval(function() {
                $(".carousel #"+count).show("slide",function(){direction: 'right', 500});
                $(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500);

                if (count == sc) {
                    count = 1;
                } else {
                    count = count + 1
                }
            }, 1700);
        })
    </script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="span12">
            <div class="carousel">
                <img id="1" class="active" src="images/image1.jpg" border="0" alt="" />
                <img id="2" src="images/image2.jpg" border="0" alt="" />
                <img id="3" src="images/image3.jpg" border="0" alt="" />
            </div>
        </div>
    </div>
</div><!-- . Container -->

</body>
</html>

slider CSS

.carousel {
    width: 100%;
    height: 350px;
    overflow: hidden;
    background-image: url('../images/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.carousel img {
    width: 100%;
    height: 350px;
    display: none;
}

最佳答案

我认为问题出在这行代码:

$(".carousel #"+count).show("slide",function(){direction: 'right', 500});

你实际上返回的是一个函数引用而不是一个对象，我认为正确的行应该是:

$(".carousel #"+count).show("slide",{direction: 'right'}, 500);

不过，我还是会简单地使用 jQuery.animate() 来代替，也许是一种完全不同的方法。检查更新后的代码，我也做了一些改进:

$(document).ready(function() {
    var images = $(".carousel img");
    var timeout = 5000; // 5 seconds
    var max = images.length;

    var slide = function(index) {
        var img = $(images[index]);

        // first show the image      
        img.animate({left: "0"}, 500, function() {

            // specify timeout to change image
            setTimeout(function() {
                // hide current image
                img.animate({left: "100%"}, 500, function() {                  
                    // reset state to start over
                    img.css("left" , "-100%");
                });
                if (++index == max) {
                    index = 0; // start over
                }
                // recursive call
                slide(index);
            }, timeout);        
        });          
    };

    slide(0);
});

我也更改了这个 CSS 规则:

.caoursel {
   position: relative;
}

.carousel img {
   position: absolute;
   width: 100%;
   height: 350px;
   left: -100%;
}

现场演示:http://codepen.io/riwakawebsitedesigns/pen/CEgdm

我建议使用一些第三方轮播，比如 Bootstrap 的轮播:http://getbootstrap.com/javascript/#carousel

关于javascript - 旋转木马 slider 图像不滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26111313/

25 4 0
文章推荐： jquery - 将图标/文本折叠为左侧导航栏上的图标
文章推荐： java - 如何强制spring-boot刷新资源？
文章推荐： linux - 无法从 Perl 内部运行有效的 shell 脚本
文章推荐： java - 无法找到如何实现binaryOperator接口(interface)java的apply方法
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com