javascript - 在 Anything Slider 下面添加一个文本框-6ren

javascript - 在 Anything Slider 下面添加一个文本框

转载作者：行者123 更新时间：2023-11-28 10:18:56

我在我正在构建的网站上使用 Anything Slider。 slider 用于显示视频，但我想在 slider 下方添加一个描述文本框，根据选择的选项卡更改其内容。这是我的 HTML 文件:

    <html>
<head>
    <title>Games</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../css/gamesPageStyle.css" />
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen">
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../CSS-Tricks-AnythingSlider/js/jquery.min.js"><\/script>')</script>
    <script src="../CSS-Tricks-AnythingSlider/js/swfobject.js"></script>
    <link rel="stylesheet" href="../CSS-Tricks-AnythingSlider/css/anythingslider.css">
    <script src="../CSS-Tricks-AnythingSlider/js/jquery.anythingslider.js"></script>
    <script src="../CSS-Tricks-AnythingSlider/js/jquery.anythingslider.video.js"></script>

</head>
<body>
        <div id="logoBlock" class= "grid_4">
            <h1>Logo</h1>
        </div>

            <div id="navigation" class="grid_8 omega">
                <ul>
                    <li>
                        <div id="egg">
                            <a  class= "home" href="../html/MichaelHomePage.html">Home</a>
                        </div>
                    </li>
                    <li>
                        <div id="egg2">
                            <a  class= "games" href="../html/gamesPage.html">Games</a>
                        </div>
                    </li>
                    <li>
                        <div id="egg3">
                            <a  class= "resume" href="../html/resumePage.html">Resume</a>
                        </div>
                    </li>
                    <li>
                        <div id="egg4">
                            <a  class= "contact" href="../html/contactPage.html">Contact</a>
                        </div>
                    </li>                   
                </ul>
            </div>  


    <script>
    // DOM Ready
    $(function(){
        $('#slider')
            .anythingSlider({
                resizeContents      : true,
                addWmodeToObject    : 'opaque',
                navigationFormatter : function(index, panel){ // Format navigation labels with text
                    return ['Welcome', 'Sky Catcher', 'Neon Night Ballz', 'Penguin Pushers', 'The Fishman Cometh', 'No More Bombs', 'Psychokinetic', 'Diamond Thief', 'Ranger Danger'] [index - 1];
                }
            })
            // Initialize video extension
            // see   https://developers.google.com/youtube/player_parameters?hl=en#Parameters for a list of   parameters
            .anythingSliderVideo({
                // video id prefix; suffix from    $.fn.anythingSliderVideo.videoIndex
                videoId : 'asvideo',
                // auto load YouTube api script
                youtubeAutoLoad : true,
                // see:     https://developers.google.com/youtube/player_parameters#Parameters
                youtubeParams: {
                    modestbranding : 1,
                    iv_load_policy : 3,
                    fs : 1
                }
            });
    });
</script>

    </head>

    <body>
    <br>

    <div id="section1" class="grid_9">
<!-- START AnythingSlider -->
<ul id="slider">

    <!-- Vimeo: iframe -->
    <li class="panel1"><iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>   </li>     
    <!-- Vimeo: Embeded -->
    <li class="panel2"><object width="940" height="529"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12280336&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12280336&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="940" height="529"></embed></object></li>

    <!-- YouTube: iframe -->
    <li class="panel3"><iframe title="YouTube video player" width="480" height="385" src="http://www.youtube.com/embed/1gOyrAVZHi4" frameborder="0" allowfullscreen></iframe></li>

    <!-- YouTube: Embedded -->
    <li class="panel4"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <!-- HTML5 Video -->
    <li class="panel5">
        <video width="320" height="240" controls="controls">
            <source src="demos/video/movie.ogg" type="video/ogg">
            <source src="demos/video/movie.mp4" type="video/mp4">
            <source src="demos/video/movie.webm" type="video/webm">
            Your browser does not support the video tag. But you could include an iframe/embeded video here.
        </video>
    </li>

    <li class="panel6"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel7"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel8"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>

    <li class="panel9"><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
</ul> <!-- END AnythingSlider -->
        </div>          
        <div id="contact" class="grid_5 omega">
            <p><span>Contact Information</span></p>
        </div>      
    <script src="../jquery.fitvids.js"></script>        
<script>
      // Target your .container, .wrapper, .post, etc.
      $("#game1").fitVids();
 </script>  
</body>

这是 anythingslider.css 文件:

    /*
AnythingSlider v1.8+ Default theme
By Chris Coyier: http://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
   */
   /*****************************
   SET DEFAULT DIMENSIONS HERE
   *****************************/
   /* change the ID & dimensions to match your slider */
   #slider {
width: 700px;
height: 390px;
list-style: none;
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled    */
overflow-y: auto;
overflow-x: hidden;
    }
    /******************
    SET STYLING HERE
    ******************
    =================================
    Default state (no keyboard focus)
    ==================================*/
    /* Overall Wrapper */
    .anythingSlider-default {
margin: 0 auto;
/* 45px right & left padding for the arrows, 28px @ bottom for navigation */
padding: 0 45px 28px 45px;
    }
    /* slider window - top & bottom borders, default state */
    .anythingSlider-default .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
    }
    /* Navigation buttons + start/stop button, default state */
    .anythingSlider-default .anythingControls a {
/* top shadow */
background: #777 url(../images/default.png) center -288px repeat-x;
color: #000;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
    }
    /* Make sure navigation text is visible */
    .anythingSlider-default .anythingControls a span {
visibility: visible;
    }
    /* Navigation current button, default state */
    .anythingSlider-default .anythingControls a.cur {
background: #888;
color: #000;
    }

    /* start-stop button, stopped, default state */
    .anythingSlider-default .anythingControls a.start-stop {
background-color: #040;
color: #ddd;
    }
    /* start-stop button, playing, default state */
    .anythingSlider-default .anythingControls a.start-stop.playing {
background-color: #800;
    }
    /* start-stop button, default hovered text color (when visible) */
    /* hide nav/start-stop background image shadow on hover - makes the button appear  to come forward */
   .anythingSlider-default .anythingControls a.start-stop:hover,
   .anythingSlider-default .anythingControls a.start-stop.hover,
   .anythingSlider-default .anythingControls a.start-stop .anythingControls ul a:hover   {
background-image: none;
color: #ddd;
    }
   /*
   =================================
   Active State (has keyboard focus)
   =================================
   */
   /* slider window - top & bottom borders, active state */
   .anythingSlider-default.activeSlider .anythingWindow {
border-color: #7C9127;
   }
  /* Navigation buttons, active state */
  .anythingSlider-default.activeSlider .anythingControls a {
/* background image = top shadow */
background-color: #7C9127;
  }
  /* Navigation current & hovered button, active state */
  .anythingSlider-default.activeSlider .anythingControls a.cur,
  .anythingSlider-default.activeSlider .anythingControls a:hover {
/* background image removed */
background: #7C9127;
   }

   /* start-stop button, stopped, active state */
   .anythingSlider-default.activeSlider .anythingControls a.start-stop {
background-color: #080;
color: #fff;
   }
   /* start-stop button, playing, active state */
   .anythingSlider-default.activeSlider .anythingControls a.start-stop.playing {
background-color: #d00;
color: #fff;
   }
   /* start-stop button, active slider hovered text color (when visible) */
   .anythingSlider-default.activeSlider .start-stop:hover,
   .anythingSlider-default.activeSlider .start-stop.hover {
color: #fff;
   }

   /************************
   NAVIGATION POSITIONING
   ************************/
   /* Navigation Arrows */
   .anythingSlider-default .arrow {
top: 50%;
position: absolute;
display: block;
   }

    .anythingSlider-default .arrow a {
display: block;
width: 45px;
height: 140px;
margin: -70px 0 0 0; /* half height of image */
text-align: center;
outline: 0;
background: url(../images/default.png) no-repeat;
   }

    /* back arrow */
    .anythingSlider-default .back { left: 0; }
    .anythingSlider-default .back a { background-position: left top; }
    .anythingSlider-default .back a:hover,
    .anythingSlider-default .back a.hover { background-position: left -140px; }
    /* forward arrow */
    .anythingSlider-default .forward { right: 0; }
    .anythingSlider-default .forward a { background-position: right top; }
    .anythingSlider-default .forward a:hover,
    .anythingSlider-default .forward a.hover { background-position: right -140px; }

    /* Navigation Links */
    .anythingSlider-default .anythingControls { outline: 0; display: none; }
    .anythingSlider-default .anythingControls ul { margin: 0; padding: 0; float: left;    }
    .anythingSlider-default .anythingControls ul li { display: inline; }
    .anythingSlider-default .anythingControls ul a {
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
text-align: center;
outline: 0;
    }

    /* navigationSize window */
    .anythingSlider-default .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
    }

    /* Autoplay Start/Stop button */
    .anythingSlider-default .anythingControls .start-stop {
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
z-index: 100;
outline: 0;
    }

    /***********************
    IE8 AND OLDER STYLING
    ***********************/

    /* Navigation Arrows */
    .as-oldie .anythingSlider-default .arrow {
top: 30%;
    }
    .as-oldie .anythingSlider-default .arrow a {
margin: 0;
    }

    /* margin between nav buttons just looks better */
    .as-oldie .anythingSlider-default .anythingControls li {
margin-left: 3px;
    }

    /* When using the navigationSize option, the side margins need to be zero
None of the navigation panels look good in IE7 now =( */
    .as-oldie .anythingSlider-default .anythingControls a {
margin: 0;
    }
    .as-oldie .anythingSlider-default .anythingNavWindow {
margin: 0 2px;
    }
    .as-oldie .anythingSlider-default .anythingNavWindow li {
padding: 3px 0 0 0;
    }

    /***********************
    COMMON SLIDER STYLING
    ***********************/
    /* Overall Wrapper */
    .anythingSlider {
display: block;
overflow: visible !important;
position: relative;
    }
    /* anythingSlider viewport window */
    .anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
    }
    /* anythingSlider base (original element) */
    .anythingSlider .anythingBase {
background: transparent;
list-style: none;
position: absolute;
overflow: visible !important;
top: 0;
left: 0;
margin: 0;
padding: 0;
    }

    /* Navigation arrow text; indent moved to span inside "a", for IE7;
    apparently, a negative text-indent on an "a" link moves the link as well as the t   text */
    .anythingSlider .arrow span {
display: block;
visibility: hidden;
    }
    /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50);  */
    .anythingSlider .arrow.disabled {
display: none;
    }
    /* all panels inside the slider; horizontal mode */
    .anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
padding: 0;
margin: 0;
    }
    /* vertical mode */
    .anythingSlider .vertical .panel {
float: none;
    }
    /* fade mode */
    .anythingSlider .fade .panel {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
    }
    /* fade mode active page - visible & on top */
    .anythingSlider .fade .activePage {
z-index: 1;
    }

    /***********************
    RTL STYLING
    ***********************/
    /* slider autoplay right-to-left, reverse order of nav links to look better */
    .anythingSlider.rtl .anythingWindow {
direction: ltr;
unicode-bidi: bidi-override;
    }
    .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to   left */
    .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of   nav links */
    .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button -  in case you want to switch sides */

    /* probably not necessary, but added just in case */
    .anythingSlider,
    .anythingSlider .anythingWindow,
    .anythingSlider .anythingControls ul a,
    .anythingSlider .arrow a,
    .anythingSlider .start-stop {
transition-duration: 0s;
-o-transition-duration: 0s;
-moz-transition-duration: 0s;
-webkit-transition-duration: 0s;
    }

如果有人对如何在与所选选项卡相对应的 slider 下方添加描述文本框有任何建议，我将不胜感激。

谢谢!

最佳答案

因此，我认为您不能只添加一些东西 - 在 slider “下方”，因为它超出了它的范围，而是 --- 在底部的 slider 内部。

这与 slider 无关，而只是一个 CSS 问题。无论你用幻灯片放在列表项中。你试过放一个<p>test test test... </p>吗？在那里？

虽然我喜欢 Chris Coyier...即使他也承认对于大多数元素来说，任何 slider 都太强大了。您可能想列出您的需求...并且可能还有另一个更轻便且更易于使用的 slider 。

<li class="panel1">
    <iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
    <div class="your-thing">Hello.... can you see me... </div>
</li>

像这样放入一些东西，看看会发生什么。然后你只需样式 .your-thing ---

关于javascript - 在 Anything Slider 下面添加一个文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24109711/

文章推荐： css - 如何删除 CSS 引擎中的特定属性？

文章推荐： javascript - 是否可以在javascript中将图像加载到字节数组中

文章推荐： css - 我如何在 li 中获取图像以忽略 css 填充

javascript - 将数据从应用程序组件[文本框]传递到网站组件[文本框]
我正在为一个网站开发应用程序(我无法访问该网站)。所以我想做以下事情: 那么如何将文本数据从 Android View 传递到网页中的文本框并捕获来自网站的响应？我试图记住这一切我无法访问任何网站
Silverlight 文本框
我有一个文本框，里面有一个很长的 url。我想做的是，当用户点击主页按钮时，我希望光标移动到文本框的开头。我希望这是正常行为，但事实并非如此，当文本框内的文本很长时，我点击回家，它会转到文本框中当前
带有图像的 WPF 文本框
我正在做一个WPF登录界面。在我的登录面板中，我有一个登录 TextBox和 PasswordBox .如下图第一张所示，登录文本框中有一个小人类标志，密码框中有一个锁。我将图像设置为文本框背景，然后
wpf - 文本框 - 水平文本居中
是否有任何简单的方法可以使文本在文本框中居中？我正在寻找一些内置函数，但什么也没找到。最佳答案将 TextAlignment 属性设置为 Center: 关于wpf - 文本框 - 水平文本居中
Powershell 文本框 SecureString
是否可以使用 System.Windows.Forms.TextBox(或任何其他方法)输入可随后转换为安全字符串的文本？我希望能够获取输入的值，将其转换为安全字符串并将其写入一个文件，然后可以在需要
Powershell 文本框 SecureString
是否可以使用 System.Windows.Forms.TextBox(或任何其他方法)输入可随后转换为安全字符串的文本？我希望能够获取输入的值，将其转换为安全字符串并将其写入一个文件，然后可以在需要
java - Android 文本框
我想将纬度和经度的值返回到我的 EditText 中，我已经能够使用 Toast 来做到这一点，但没有通过实现它>编辑文本。请帮忙 // EditText latEditText =
Jquery Iframe 文本框
我是Jquery新手，其实我对JQuery的使用知识是0。我正在尝试使用 JQuery 来实现某些功能。我有一个带有 iframe 的 html 页面。 iframe 页面中有一个表单和一个文本框。
c# - 在动态创建的事件处理程序中访问动态创建的控件(文本框)
我正在尝试在 Button 的事件处理程序中访问我在 C# 中动态创建的 TextBox。 void MainFormLoad(object sender, EventArgs e)
javascript - 文本框 -> 立即开始输入而不是单击文本框
我有一个搜索栏，当我打开搜索栏时，我想立即开始输入，不想点击文本框。我尝试使用 myTextBoxId.click()(因为当您单击它时，您可以开始输入)但它不起作用。最佳答案你必须 docum
Javascript 文本框 "Scrubber"
我还没有找到好的解决方案:我有一个文本框，用户需要能够在其中输入特定信息。例如，命令可能是“9030 OUT FU [1234 TEST]”。我需要“擦洗”这个文本框以确保数据是以这种格式输入的(不
Java 文本框 - 将字节转换为字符串
我有一个 Java 应用程序，您可以在其中将字符串输入文本框，点击加密，它会在单独的文本框中显示加密的字符串。我将为此使用 AES 加密。问题是我无法让加密文本按字节显示，但文本框不会显示字节(仅采用
html - 文本框，将文本带到文本框中的下一行
我已经浏览了您庞大的问题数据库，但似乎没有找到答案。我在将文本换行时遇到问题 - 即使之前的行上仍有空间。这是代码: p1 { border-left: 6px solid blue; bac
javascript - 如何触发按钮打开用户输入/文本框
所以我正在尝试创建“看板/待办事项列表”网站，但我在触发添加按钮时遇到了问题。我试图触发“添加”按钮以打开用户输入框。所以我有这个创建一个小框的“添加”按钮。但我无法弄清楚如何在该框中添加一个小区域，
javascript - JavaScript 文本框
我有一个文本框，应该只接受浮点值。它不应该允许任何其他值。怎么做。我在 HTML 中完成了此操作。 Weight 但是，它不起作用？如何做到这一点。最佳答案 // remo
javascript - 文本框 - 如何不显示已填充的值
当用户点击文本框时，如何不显示出现在文本框下方的已填充值最佳答案将这个属性放在你的文本框中 autocomplete="off" 关于javascript - 文本框 - 如何不显示已填充的值，我
javascript - flex 文本框
JavaScript: function resize(elem){ if(!elem.value.length) elem.size=1; else elem.size=elem.value
带有两个按钮的 HTML 文本框
在我的代码下面，我需要它具有相同的宽度和高度，但有多行“从第一行开始”，当到达行尾时转到新行，只有 120 个字符，就像我用“Enter短信”当您向右单击时隐藏，但我需要它为灰色。最佳答案您可以使
C#、文本框、.NET
我有一个问题，我必须创建一种方法来搜索显示在多个文本框 (lblResult.Text) 中的选定文本文件的内容。使用简单的搜索算法:搜索用户输入的整个搜索词。例如，如果用户输入“hello”，则只搜
c# - 文本框.SelectionStart
我正在尝试对文本框使用 SelectionStart 和 SelectionLength 属性。它没有效果，但也没有错误。它实际上是后台工作程序 ProgressChanged 方法的一部分，但我已经

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 Anything Slider 下面添加一个文本框