1. 首頁
  2. 問答
  3. CSS和JQuery - 如何停止幻燈片在每個圖像

CSS和JQuery - 如何停止幻燈片在每個圖像

2017-09-26 55 views
0

我需要幫助我的圖像滑塊。 問題是：每次單擊按鈕時，圖像都不會顯示爲完整的圓形圖像。我希望每個圖像停止在確切的位置，以便它將顯示5個完整的圓形圖像。懸停圖像時也存在問題：當懸停一張圖像時，下一張圖像會產生不必要的影響，而圖像會顯示在隱藏部分中。我希望你能幫助我，每個人。CSS和JQuery - 如何停止幻燈片在每個圖像

非常感謝。

Here is my fiddle

HTML：

<div class="left"> 
    <button id="left-button"> 
    < 
    </button> 
</div> 
<div class="center" id="content"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
</div> 
<div class="right"> 
    <button id="right-button"> 
    > 
    </button> 
</div>

CSS：

.left{ 
float: left; 
width: 8%; 
height: 200px; 
border: 0; 
} 

img.internal{ 
width: 100px; 
max-width:100px !important; 
height: auto; 
max-height:100px; 
border-radius: 100%; 
border: 2px solid transparent; 
margin-left: -4px; 
} 

img.internal:hover{ 
    position: fixed; 
border: 2px solid orange; 
overflow: hidden !important; 
} 

.center{ 
float: left; 
margin-top: 5px; 
width: 540px; 
height: auto; 
border: 2px solid transparent; 
margin: 0; 
overflow: hidden !important; 
/*will change this to hidden later to deny scolling to user*/ 
white-space: nowrap; 
border-radius: 55px 55px 55px 55px; 
} 

.right{ 
float: left; 
width: 10%; 
height: 200px; 
border: 0; 
}

來源

2017-09-26 mr. Newbie

+0

@Jay值是用來讓編輯接受鏈接的jsfiddle。 – reporter

+0

對不起，這是我的第一篇文章。該鏈接已列出。 –

+0

請去看[問]。相關代碼直接屬於您的問題，而不僅僅是外部網站。 – CBroe

回答

0

你給固定位置 「img.internal：懸停」 這是你更新fiddle。

img.internal:hover{ 
border: 2px solid orange; 
overflow: hidden !important; 
}

來源

2017-09-26 09:14:06

+0

謝謝，解決了其中一個問題。 –

0

希望你錯過傳遞事件作爲參數上click事件會拋出誤差和塊的代碼進一步執行。檢查下面的代碼段。

$('#right-button').click(function(event) { 
 
    event.preventDefault(); 
 
    $('#content').animate({ 
 
    scrollLeft: "+=100px" 
 
    }, "slow"); 
 
}); 
 

 
$('#left-button').click(function(event) { 
 
    event.preventDefault(); 
 
    $('#content').animate({ 
 
    scrollLeft: "-=100px" 
 
    }, "slow"); 
 
});
.left { 
 
    float: left; 
 
    width: 8%; 
 
    height: 200px; 
 
    border: 0; 
 
} 
 

 
img.internal { 
 
    width: 100px; 
 
    max-width: 100px !important; 
 
    height: auto; 
 
    max-height: 100px; 
 
    border-radius: 100%; 
 
    border: 2px solid transparent; 
 
    margin-left: -4px; 
 
} 
 

 
img.internal:hover { 
 
    border: 2px solid orange; 
 
    overflow: hidden !important; 
 
} 
 

 
.center { 
 
    float: left; 
 
    margin-top: 5px; 
 
    width: 540px; 
 
    height: auto; 
 
    border: 2px solid transparent; 
 
    margin: 0; 
 
    overflow: hidden !important; 
 
    /*will change this to hidden later to deny scolling to user*/ 
 
    white-space: nowrap; 
 
    border-radius: 55px 55px 55px 55px; 
 
} 
 

 
.right { 
 
    float: left; 
 
    width: 10%; 
 
    height: 200px; 
 
    border: 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="left"> 
 
    <button id="left-button">&lt; 
 
    </button> 
 
</div> 
 
<div class="center" id="content"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"><img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
    <img class="internal" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
</div> 
 
<div class="right"> 
 
    <button id="right-button"> 
 
    &gt; 
 
    </button> 
 

 
</div>

來源

2017-09-26 10:31:49

相關問題

 相關問題