个人中心
gpt4 book ai didi

javascript - 图像 slider 和下拉菜单不能一起使用

转载 作者：行者123 更新时间：2023-11-28 06:35:40 25 4
gpt4 key购买 nike

这是我的页面代码，其中包含用于登录和注册下拉菜单的js。 slider 添加到页面中心，在页面加载时开始播放。

但在添加 slider 登录和注册部分之前工作正常，但现在点击不起作用。当我从这个页面中删除 slider 时，它可以工作，但使用 slider 时却没有。任何人都可以帮助我保持这两个功能的完整功能吗？

       <!DOCTYPE html>
       <html lang="en">
        <head>


    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="keywords" content="jquery, css3, 3d, webkit, fallback,               slider, css3, 3d transforms, slices, rotate, box, automatic" />
    <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/slicebox.css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
    <script type="text/javascript" src="js/modernizr.custom.46884.js">    </script>

    <link rel="stylesheet" href="css/style.css">


<script src="js/index.js"></script>     


    <script type="text/javascript">

function click1(){
            document.getElementById("navPlay").click();
       }



    $('input[type="submit"]').mousedown(function(){
    $(this).css('background', '#2ecc71');
    });
   $('input[type="submit"]').mouseup(function(){
  $(this).css('background', '#1abc9c');
   });

   $('#loginform').click(function(){
   $('.login').fadeToggle('slow');
   $(this).toggleClass('green'); 
   });

$(document).mouseup(function (e)


     {
     var container = $(".login");



    if (!container.is(e.target) // if the target of the click isn't the      container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
  {
    container.hide();
    $('#loginform').removeClass('green');
}  
});

$('#registration').click(function(){
 $('.register').fadeToggle('slow');
$(this).toggleClass('green');
});

$(document).mouseup(function (e) 
{  
  var container = $(".register");

  if (!container.is(e.target) // if the target of the click isn't the   container...
    && container.has(e.target).length === 0) // ... nor a descendant of the   container
{
    container.hide();
    $('#registration').removeClass('green');
}
});

    </script>

    <Style>
    body{
        background-image:url("./images/bgimg.jpg");
    }
    #h21{
        float:left;
        padding : 20px;
        color: #ecf0f1;
        margin-left:80px;
        font-size: 30px;
        }
    #h22 {  
        padding: 20px;
        color: #ecf0f1;
        margin-left:500px;
        }
    footer {
        text-align: center;
        padding: 50px ;
        margin-top:50px;
        background-color: #34495e;
        margin-bottom:-550px;

    }

    footer p {
        color: #f8f8f8;
        }


    h4 {

        color : #ecf0f1;
        text-align: center;
        padding: 20px 0px 20px;
        margin-top:399px;
    }

    </style

</head>


<body onload="click1()"s> 



 <div id="wrap">
   <div id="regbar">
   <div id="navthing">
   <h2 id ="h21">Pictoria </h2>
  <h2 id ="h22"><a href="#" id="loginform">Login</a> | <a href="#"    id="registration">Register</a></h2>
<div class="login">
  <div class="arrow-up"></div>
  <div class="formholder">
    <div class="randompad">
       <fieldset>
         <label name="email">Email</label>
         <input type="email" PlaceHolder="example@example.com" />
         <label name="password" >Password</label>
         <input type="password" PlaceHolder="*******"/>
         <input type="submit" value="Login" />

       </fieldset>
    </div>
  </div>
</div>
</div>


<div class="register">
  <div class="arrow-up1"></div>
  <div class="formholder1">
    <div class="randompad">
       <fieldset>
         <label name="displayname">Display name</label>
         <input type="text" PlaceHolder="Display name" />

         <label name="username">Username</label>
         <input type="text" PlaceHolder="Username" />

        <label name="password" >Password</label>
         <input type="password" PlaceHolder="*******" />

         <label name="email">Email</label>
         <input type="email" PlaceHolder="example@example.com" />

         <label name="bio" >Bio</label>
         <input type="text" PlaceHolder="About you!" />

         <input type="submit" value="Register" />

       </fieldset>
    </div>
  </div>
</div>
</div>

 </div>
 </div>



    <div class="container">

        <div class="wrapper">

            <ul id="sb-slider" class="sb-slider">
                <li>
                    <img src="images/1.jpg" alt="image1"/>
                    <div class="sb-description">
                        <h3>Creative Lifesaver</h3>
                    </div>
                </li>
                <li>
                    <img src="images/2.jpg" alt="image2"/>
                    <div class="sb-description">
                        <h3>Honest Entertainer</h3>
                    </div>
                </li>
                <li>
                    <img src="images/3.jpg" alt="image1"/>
                    <div class="sb-description">
                        <h3>Brave Astronaut</h3>
                    </div>
                </li>
                <li>
                    <img src="images/4.jpg" alt="image1"/>
                    <div class="sb-description">
                        <h3>Affectionate Decision Maker</h3>
                    </div>
                </li>
                <li>
                    <img src="images/5.jpg" alt="image1"/>
                    <div class="sb-description">
                        <h3>Faithful Investor</h3>
                    </div>
                </li>
                <li>
                    <img src="images/6.jpg" alt="image1"/>
                    <div class="sb-description">
                        <h3>Groundbreaking Artist</h3>
                    </div>
                </li>
                <li>
                    <img src="images/7.jpg" alt="image1"/>
                    <div class="sb-description">
                        <h3>Selfless Philantropist</h3>
                    </div>
                </li>
            </ul>

            <div id="shadow" class="shadow"></div>

            <div id="nav-arrows" class="nav-arrows">
                <a href="#">Next</a>
                <a href="#">Previous</a>
            </div>

            <div id="nav-options" class="nav-options" Style="   display:hidden;">
                <span id="navPlay">Play</span>
                <script>
                document.getElementById('navPlay').style.visibility = 'hidden';
                </script>
            </div>

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

    </div  >
    <script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script   src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script type="text/javascript" src="js/jquery.slicebox.js"></script>
        <script type="text/javascript">


    $(function() {

            var Page = (function() {

                var $navArrows = $( '#nav-arrows' ).hide(),
                    $navOptions = $( '#nav-options' ).hide(),
                    $shadow = $( '#shadow' ).hide(),
                    slicebox = $( '#sb-slider' ).slicebox( {
                        onReady : function() {

                            $navArrows.show();
                            $navOptions.show();
                            $shadow.show();

                        },
                        orientation : 'h',
                        cuboidsCount : 3
                    } ),

                    init = function() {

                        initEvents();

                    },
                    initEvents = function() {

                        // add navigation events
                        $navArrows.children( ':first' ).on( 'click',   function() {

                            slicebox.next();
                            return false;

                        } );

                        $navArrows.children( ':last' ).on( 'click',  function() {

                            slicebox.previous();
                            return false;

                        } );


                    $( '#navPlay' ).on( 'click', function() {

                            slicebox.play();
                            return false;

                        } );    

                    };

                    return { init : init };

            })();

            Page.init();

        });
    </script>

    <footer>
        <p>     &copy;Copyright 2016 Pictoria`enter code here` | All rights   reserved.  </p>      
</footer>

 </body>
  </html>

最佳答案

我们在这里遗漏了一些 CSS 信息。但是，它可能是一个 z-index 问题。确保 slider 不在注册/登录按钮上方。

关于javascript - 图像 slider 和下拉菜单不能一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34703210/

25 4 0
文章推荐： html - CSS 选择器正在选择页面中的所有 p 元素
文章推荐： c++ - 模板函数中 STL 容器的默认参数
文章推荐： c++ - 嵌套 For 循环和输出星号
文章推荐： javascript - 当一个 div 完全加载时删除另一个 div