个人中心
gpt4 book ai didi

jQuery 狭缝 slider 问题

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

我正在使用 this fantastic创建水平图像 slider 的教程，但是显然有问题，因为 slider 看起来坏了。 Javascript 也不起作用。我只是JS的初学者，希望能从中学到一些东西。

我正在使用一个名为 phpVMS 的 CMS，其中每个页面都作为一个可修改的模板。 Layout.cpl 可以不言自明地显示所有页面的总体布局。我检查过没有任何 CSS 或 JS 文件覆盖 mypage.cpl 中的文件。

enter image description here 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/jquery.slitslider.js"></script>
<script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro/scripts/modernizr.custom.79639.js" ></script>

<link rel="stylesheet" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro/css/slider-style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro/css/custom.css" />

Chrome 似乎指出这是唯一的错误...

Uncaught TypeError: Cannot call method 'prefixed' of undefined

出现错误的行...

this.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ) ];

最佳答案

只需尝试以下示例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Fullscreen Slit Slider with CSS3 and jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
        <meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
        <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
        <noscript>
            <link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
        </noscript>
    </head>
    <body>

        <div class="container demo-2">

            <!-- Codrops top bar -->
            <div class="codrops-top clearfix">
                <a href="http://tympanus.net/Tutorials/CSS3BouncingBall/">
                    <strong>&laquo; Previous Demo: </strong>3D Bouncing Ball with CSS3
                </a>
                <span class="right">
                    <a href="http://www.flickr.com/photos/majownik/">Images by Majownik</a>
                    <a href="http://tympanus.net/codrops/?p=9357">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->

            <header class="clearfix">

                <h1>Slit Slider <span>with CSS3 and jQuery</span></h1>

                <nav class="codrops-demos">
                    <a href="index.html">Demo 1</a>
                    <a class="current-demo" href="index2.html">Demo 2</a>
                </nav>

            </header>

            <div id="slider" class="sl-slider-wrapper">

                <div class="sl-slider">

                    <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                        <div class="sl-slide-inner">
                            <div class="bg-img bg-img-1"></div>
                            <h2>A bene placito.</h2>
                            <blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
                        </div>
                    </div>

                    <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                        <div class="sl-slide-inner">
                            <div class="bg-img bg-img-2"></div>
                            <h2>Regula aurea.</h2>
                            <blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
                        </div>
                    </div>

                    <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <div class="bg-img bg-img-3"></div>
                            <h2>Dum spiro, spero.</h2>
                            <blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
                        </div>
                    </div>

                    <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <div class="bg-img bg-img-4"></div>
                            <h2>Donna nobis pacem.</h2>
                            <blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
                        </div>
                    </div>

                    <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <div class="bg-img bg-img-5"></div>
                            <h2>Acta Non Verba.</h2>
                            <blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
                        </div>
                    </div>
                </div><!-- /sl-slider -->

                <nav id="nav-dots" class="nav-dots">
                    <span class="nav-dot-current"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </nav>

            </div><!-- /slider-wrapper -->

            <div class="content-wrapper">
                <h2>About this slider</h2>
                <p>The Slit Slider is a slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. </p>
            </div>

        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
        <script type="text/javascript" src="js/jquery.slitslider.js"></script>
        <script type="text/javascript"> 
            $(function() {

                var Page = (function() {

                    var $nav = $( '#nav-dots > span' ),
                        slitslider = $( '#slider' ).slitslider( {
                            onBeforeChange : function( slide, pos ) {

                                $nav.removeClass( 'nav-dot-current' );
                                $nav.eq( pos ).addClass( 'nav-dot-current' );

                            }
                        } ),

                        init = function() {

                            initEvents();

                        },
                        initEvents = function() {

                            $nav.each( function( i ) {

                                $( this ).on( 'click', function( event ) {

                                    var $dot = $( this );

                                    if( !slitslider.isActive() ) {

                                        $nav.removeClass( 'nav-dot-current' );
                                        $dot.addClass( 'nav-dot-current' );

                                    }

                                    slitslider.jump( i + 1 );
                                    return false;

                                } );

                            } );

                        };

                        return { init : init };

                })();

                Page.init();

                /**
                 * Notes: 
                 * 
                 * example how to add items:
                 */

                /*

                var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');

                // call the plugin's add method
                ss.add($items);

                */

            });
        </script>
    </body>
</html>

另请参阅以下位置:http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

我认为这可以帮助您解决问题。

关于jQuery 狭缝 slider 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14175565/

26 4 0
文章推荐： python - 只读定义的 CSV 列
文章推荐： python - 如何使用 Python ijson 读取大型 JSON 文件？
文章推荐： Python:xpath 稳健地获取表中的数据
文章推荐： python - 将列表转换为谷歌发布/订阅的字节串
太空宇宙
个人简介

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

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