幻灯片导致下拉菜单不断下降

时间：2015-12-07 06:45:18

标签： jquery html drop-down-menu notepad++ slideshow

有人可以帮我解决我的编码问题吗？我已经找到了答案，但我找不到我的具体问题，老实说我不知道​​如何解决它，因为我无法真正编写代码。我可以阅读它并在互联网的帮助下改变它。

由于在页面上添加幻灯片，因此下拉菜单会不断缩小，但与悬停在其上时的方式不同。 （我添加了一个指向图像的链接）当你将鼠标悬停在它上面时仍然有效，然后看起来它应该悬停在它上面，但是只要你移开鼠标它就会返回到常量下拉菜单。

编辑：我把幻灯片显示出来，一切恢复正常。然后我再次添加它，同样的事情发生了。然后我想也许这就是我放置它的地方，所以只是为了它，我把它添加到页面的底部，同样的事情发生在下拉菜单中。所以无论我放在哪里，它都会导致下拉菜单基本上出现故障。 我没有改变幻灯片的编码，甚至没有改变图像名称。

编辑2：尝试通过键入不同的措辞在Google上找到答案，但它抛出的唯一结果是幻灯片背后的下拉菜单，这根本不是我的问题。

编辑3：我删除了大部分不必要的代码，并尝试将部分放在我怀疑问题的位置，我怀疑这可能是菜单选项卡和幻灯片的代码。它看起来仍然很多，但它只是菜单代码和幻灯片代码。

当你不将鼠标悬停在它上面时，这就是它的样子:(尝试发布图像，但我还不能这样，这就是它的链接）

https://flic.kr/p/BCiYwj

以下是编码:(我希望它有效并且我想出了如何发布它）

    <ul class="sf-menu">
        <li class="bgr"><a href="index.html">About Us</a></li>
        <li class="bgr"><a href="Riding_School.html">Riding School</a>
            <ul>
               <li><a href="Our_Riding_School.html">Our Riding School</a>       </li>
               <li><a href="Show_Results.html">Show Results</a>
               <li><a href="Pony_Rides.html">Pony Rides</a>
               <li><a href="#">Outrides</a>
               <li><a href="#">Holiday Camps</a>
               <li><a href="Horse_Clinics.html">Horse Clinics</a>
               <li><a href="#">Farm Animals</a>
               <li><a href="#">Gallery</a>                         
               </li>
            </ul>
        </li>
        <li class="bgr"><a href="Kids_Party_Venue.html">Kids Party Venue</a>      </li>
        <li class="bgr"><a href="#">Wedding Venue</a></li>
        <li class="bgr"><a href="#">Stabling</a></li>
        <li class="bgr"><a href="#">Contact Us</a></li>
    </ul>
</nav> 
</div>
</div> 
</header>

<!--==============================content================================-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;">

<!-- #region Jssor Slider Begin -->

<!-- Generated by Jssor Slider Maker Online. -->
<!-- This demo works with jquery library -->

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.mini.js"></script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
jQuery(document).ready(function ($) {

var jssor_1_SlideshowTransitions = [
  {$Duration:1200,x:0.3,$During:{$Left:[0.3,0.7]},$Easing: {$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,y:0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,y:-0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:0.3,$Cols:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,y:0.3,$Rows:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  {$Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:  {$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
];

var jssor_1_options = {
  $AutoPlay: true,
  $SlideshowOptions: {
    $Class: $JssorSlideshowRunner$,
    $Transitions: jssor_1_SlideshowTransitions,
    $TransitionsOrder: 1
  },
  $ArrowNavigatorOptions: {
    $Class: $JssorArrowNavigator$
  },
  $ThumbnailNavigatorOptions: {
    $Class: $JssorThumbnailNavigator$,
    $Cols: 10,
    $SpacingX: 8,
    $SpacingY: 8,
    $Align: 360
  }
};

var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

//responsive code begin
//you can remove responsive code if you don't want the slider scales while   window resizing
function ScaleSlider() {
    var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
    if (refSize) {
        refSize = Math.min(refSize, 800);
        jssor_1_slider.$ScaleWidth(refSize);
    }
    else {
        window.setTimeout(ScaleSlider, 30);
    }
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>

<style>

/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l                  (normal)
.jssora05r                  (normal)
.jssora05l:hover            (normal mouseover)
.jssora05r:hover            (normal mouseover)
.jssora05l.jssora05ldn      (mousedown)
.jssora05r.jssora05rdn      (mousedown)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url('img/a17.png') no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }

/* jssor slider thumbnail navigator skin 01 css */
/*

.jssort01 .p（正常）     .jssort01 .p：悬停（正常鼠标悬停）     .jssort01 .p.pav（有效）     .jssort01 .p.pdn（mousedown）     * /     .jssort01 .p {     位置：绝对;     顶部：0;     左：0;     宽度：72px;     身高：72px;     } 

.jssort01 .t {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}

.jssort01 .w {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.jssort01 .c {
position: absolute;
top: 0px;
left: 0px;
width: 68px;
height: 68px;
border: #000 2px solid;
box-sizing: content-box;
background: url('img/t01.png') -800px -800px no-repeat;
_background: none;
}

.jssort01 .pav .c {
top: 2px;
_top: 0px;
left: 2px;
_left: 0px;
width: 68px;
height: 68px;
border: #000 0px solid;
_border: #fff 2px solid;
background-position: 50% 50%;
}

.jssort01 .p:hover .c {
top: 0px;
left: 0px;
width: 70px;
height: 70px;
border: #fff 1px solid;
background-position: 50% 50%;
}

.jssort01 .p.pdn .c {
background-position: 50% 50%;
width: 68px;
height: 68px;
border: #000 2px solid;
}

* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
/* ie quirks mode adjust */
width /**/: 72px;
height /**/: 72px;
}

</style>


<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left:  0px; width: 800px; height: 456px; overflow: hidden; visibility: hidden; background-color: #24262e;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute;   display: block; top: 0px; left: 0px; width: 100%; height: 100%;">   </div>
<div   style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 356px; overflow: hidden;">
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/01.jpg" />
    <img data-u="thumb" src="img/thumb-01.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/02.jpg" />
    <img data-u="thumb" src="img/thumb-02.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/03.jpg" />
    <img data-u="thumb" src="img/thumb-03.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/04.jpg" />
    <img data-u="thumb" src="img/thumb-04.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/05.jpg" />
    <img data-u="thumb" src="img/thumb-05.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/06.jpg" />
    <img data-u="thumb" src="img/thumb-06.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/07.jpg" />
    <img data-u="thumb" src="img/thumb-07.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/08.jpg" />
    <img data-u="thumb" src="img/thumb-08.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/09.jpg" />
    <img data-u="thumb" src="img/thumb-09.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/10.jpg" />
    <img data-u="thumb" src="img/thumb-10.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/11.jpg" />
    <img data-u="thumb" src="img/thumb-11.jpg" />
</div>
<div data-p="144.50" style="display: none;">
    <img data-u="image" src="img/12.jpg" />
    <img data-u="thumb" src="img/thumb-12.jpg" />
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:800px;height:100px;" data-autocenter="1">
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;">
    <div data-u="prototype" class="p">
        <div class="w">
            <div data-u="thumbnailtemplate" class="t"></div>
        </div>
        <div class="c"></div>
    </div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora05l" style="top:158px;left:8px;width:40px;height:40px;"></span>
<span data-u="arrowright" class="jssora05r" style="top:158px;right:8px;width:40px;height:40px;"></span>
<a href="http://www.jssor.com" style="display:none">Bootstrap Carousel</a>
</div>

<!-- #endregion Jssor Slider End -->
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题