个人中心
gpt4 book ai didi

javascript - 为什么我的 jquery 幻灯片没有出现...？

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

它应该出现在当月演讲者和票价之间... enter image description here

我不得不删除第二个脚本，因为它在这里的格式不正确，因此出现了 fiddle 。

这是我的代码的 fiddle :https://jsfiddle.net/5pvb83wc/ 

<head>
    <meta charset="utf-8">
    <title>The Official Website of the Whitewater Warriors</title>
    <link rel="shortcut icon" href="images/WhitewaterWarriorsLogo - Copy.ico">
    <link rel="stylesheet" href="website.css">  
    <style>   
    a {text-decoration:none;}  
    </style>
    <style>
/* Prevents slides from flashing */
#slides {
  display:none;
}

</head>

<body>

    <header>
        <img src="images/WhitewaterWarriorsLogo.png" height="150" width="150" alt="Warrior Logo">
        <hgroup>
            <h1> <span class="shadow">The Official Website of the Whitewater Warriors</span> </h1>
        </hgroup>
    </header>

    <nav id="nav_bar">
    <ul>
        <li><a href="HOMEPAGE.html" class="current"> Home </a></li>
        <li><a href=""> History </a></li>
        <li><a href=""> Schedule </a></li>
        <li><a href=""> Tickets </a></li>
        <li><a href=""> Contact </a></li>
    </ul>
    </nav>

    <section>
        <h2 style="border-bottom: 2px solid black;"> Warrior Headlines </h2>
        <ul class="Headlines">
            <li>Join us at Perkins Stadium this Saturday 11/14/15 for a FREE meet and greet with the 2015 Warriors!</li>
            <li><a href="PREVIEW.html"> Opponent Breakdown: Rams</a></li>
            <li><a href="http://www.nfl.com/stats/player" target="blank" alt="2015 NFL Stats">Latest NFL Statistics</a></li>
            <li><a href="http://espn.go.com/nfl/injuries"target="blank" alt="2015 NFL Injury">Latest NFL Injury Report</a></li>
        </ul>
        <h2>Speaker of the Month</h2>

        <article> 
            <div id="slides">
            <img src="images/2008.jpg">
            <img src="images/Greenville_Road_Warriors_logo.svg.png">
            <img src="images/TicketsOnSale.png">
            <img src="images/WarriorHeader.png">
            <img src="images/WhitewaterWarriorsLogo.png">
            </div>
        </article>          
        <h2> Our Ticket Packages </h2>
        <ul>
            <li>
                Season Package: $95
            </li>
            <li>
                Patron Package: $200
            </li>
            <li>
                Single Speaker: $25
            </li>
        </ul>
    </section>

    <aside>
        <h2 id="speakers"> 2011-2012 Speakers </h2>
        <h2>October 19, 2011
        <br>
        <a href="speakers/toobin.html">Jeffrey Toobin </a></h2>
        <img src="images/toobin75.jpg" alt="speaker toobin's image" width="75" height="75">
        <h2>November 16, 2011
        <br>
        <a href="speakers/sorkin.html">Andrew Ross Sorkin </a></h2>
        <img src="images/sorkin75.jpg" alt="speaker sorkin's image" width="75" height="75">
        <h2>January 18, 2012
        <br>
        <a href="speakers/chua.html">Amy Chua </a></h2>
        <img src="images/chua75.jpg" alt="speaker chua's image" width="75" height="75">
        <h2> February 15, 2012
        <br>
        <a href="speakers/sampson.html"> Scott Sampson </a></h2>
        <img src="images/sampson75.jpg" alt="speaker sampson's image" width="75" height="75">
    </aside>

    <footer>
        <p>
            <img id="Footer" src="images/Warriors.png" alt="Warrior"><br>
            &copy; 2015, Whitewater Warriors Football, Whitewater, WI 53190
        </p>
    </footer>

</body>

最佳答案

更新:JS 中的一些错误也是有效的 JSFiddle link

这是一个包含少量 CSS 和 JS 的简单 slider 。下面的代码假定所有图像的大小都相同。请根据需要更改“#slide”的宽度和高度。如果您也需要 JSFiddle 示例，请告诉我。祝你好运。

CSS

#slides {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

#slides img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#slides img.active {
    z-index: 5;
}

#slides img.next-active {
    z-index: 3;
}

JS/jQuery

// make the first image '.active'
// can be done in the html itself
$( '#slides' ).find( 'img:first' );

// init the auto slider
setInterval(slider, 2000);

// rtl is right to left
// ltr is left to right
function slider (dir) {

    // set the default direction
    var dir = dir || 'rtl';

    // current and next item to be slided
    var current, next;

    current = $( '#slides' ).find( '.active' );

    if ( dir == 'rtl' ) {
        next = current.next( 'img' ).length ? current.next( 'img' ) : $( '#slides' ).find( 'img:first' );

        // animate out the current image and remove 'active'
        current.animate({ left: '-100%' }, 500, function () { $(this).removeClass('active') });

        //animate in the next image and make it active
        next.addClass( 'next-active' )
            .css({ left: '100%' })
            .animate({ left: '0' }, 500, function () { $(this).removeClass('next-active').addClass('active') });
    } else if ( dir == 'ltr' ) {
        next = current.prev( 'img' ).length ? current.prev( 'img' ) : $( '#slides' ).find( 'img:last' );

        // animate out the current image and remove 'active'
        current.animate({ left: '100%' }, 500, function () { $(this).removeClass('active') });

        //animate in the next image and make it active
        next.addClass( 'next-active' )
            .css({ left: '-100%' })
            .animate({ left: '0' }, 500, function () { $(this).removeClass('next-active').addClass('active') });
    };
};

关于javascript - 为什么我的 jquery 幻灯片没有出现...？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33770898/

24 4 0
文章推荐： python - 如何在输入流中播放声音
文章推荐： Python 递归 Hashlib
文章推荐： sql - linux 中具有多个子行的文本文件中的精确行
文章推荐： python - 遍历两个列表并更新其中一个的元素
太空宇宙
个人简介

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

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