我的网站存在以下问题: 我的网站上有一个轮播滑块,它与图像和描述互换。您可以在http://jellekok.com/new/
上查看它的运行情况问题: 1.将鼠标悬停在右边的最后一个描述上:“〜éénvisuele identiteit en bewegwijzering” 2.等待,直到转到下一张(上/第一张)幻灯片。 3.然后该网站会由于没有特定原因自动向下滚动半屏?
有人知道这个问题可能是什么吗?
HTML代码:
<div class="banner">
<ul class="col-lg-8 col-md-6 order-last m_banner_con padding_fix">
<li><a href="exchange-party.php" id="mb01" style="display:"><img src="http://jellekok.com/img/inforintelligence_intro_960.png"></a></li>
<li><a href="visual-poetry-festival.php" id="mb02" style="display:none"><img src="http://jellekok.com/img/posters_folders_row.jpg"></a></li>
<li><a href="exchange-party.php" id="mb03" style="display:none"><img src="img/index_855tot1734.jpg"></a></li>
<li><a href="exchange-party.php" id="mb04" style="display:none"><img src="img/index_brouwerij_frankendael.jpg"></a></li>
<li><a href="exchange-party.php" id="mb05" style="display:none"><img src="http://jellekok.com/img/flyer_bno_img_lab_pioniers_960_v2.jpg"></a></li>
<li><a href="exchange-party.php" id="mb06" style="display:none"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg"></a></li>
<li><a href="exchange-party.php" id="mb07" style="display:none"><img src="http://jellekok.com/img/sequence_zero_bespreekruimte_960.jpg"></a></li>
</ul>
<ul class="col-lg-4 col-md-5 order-first m_banner_txt padding_fix">
<li><a href="exchange-party.php" class="mb01">~ Een wereld geinspireerd op een moederbord</a></li>
<li><a href="visual-poetry-festival.php" class="mb02">~ Posters die licht nodig hebben om te kunnen lezen</a></li>
<li><a href="exchange-party.php" class="mb03">~ Een boek leesbaar in twee richtingen</a></li>
<li><a href="exchange-party.php" class="mb04">~ Een website in de stijl van een stripboek</a></li>
<li><a href="exchange-party.php" class="mb05">~ Letters gevormt door magnetisme</a></li>
<li><a href="exchange-party.php" class="mb06">~ Een posterserie gemaakt van fysieke objecten</a></li>
<li><a href="exchange-party.php" class="mb07">~ Een visuele identiteit en bewegwijzering in één</a></li>
</ul>
</div>
CSS:
.banner {
overflow: hidden;
width: 100%;
}
.banner ul
{
list-style-type: none;
}
.banner ul.m_banner_txt
{
overflow: visible;
margin-bottom: 5px;
}
ul.m_banner_txt li
{
//position: absolute;
width: 200%;
overflow: visible;
}
.banner img
{
min-width: 100%;
//background-size: contain;
}
.banner ul.m_banner_con
{
float: right;
//height: 69vh;
//overflow: hidden;
}
.padding_fix
{
padding-left: 0px;
padding-right: 0px;
}
.banner ul.m_banner_txt {
float: left;
text-align: left;
}
.banner ul.m_banner_txt > li {
font-size: 24px;
line-height: 33px;
}
.banner ul.m_banner_txt > li:last-child { border-bottom: 0px; }
.banner ul.m_banner_txt > li.on {
background: url(../img/icon_bullet.png) no-repeat 5px center;
font-weight: bold;
}
.banner ul.m_banner_txt > li.on a {
color: #000;
}
js:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Portfolio slider indexpage -->
<script src="https://www.jqueryscript.net/demo/Tiny-jQuery-Image-Slider-With-Side-Navigation-myelinSlider/js/jquery.myelinSilder.js"></script>
<script>
$('.banner').myelinSlider({
mode : 'fade',
item : 7,
direction : 'down',
// auto play
auto : true,
// transition speed
speed : 4000
});
</script>