이미지 갤러리가 계속 페이지를 이동시킵니다.

CCS 및 HTML 전용 이미지 갤러리 슬라이더를 만들려고합니다.이미지 갤러리가 계속 페이지를 이동시킵니다.

슬라이더가 작동하지만 버튼을 누를 때마다 포커스가 페이지에서 아래로 이동합니다. 나는 내가 생각할 수있는 모든하지만 어떤 도움이 좋을 것

없는 성공을 :(시도했습니다

HTML :!

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="Style.css"> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
</div> <!-- end of header --> 

<nav> 
<ul> 

<a href="index.html"><li id="HomeButton"><img id="HomeText" src="Images/Icons/HomeText.png" /> 
</li></a> 

<a href="whatswhat.html"><li id="WhatsWhatButton"> 
<img id="WhatsWhatText" src="Images/Icons/WhatsWhatText.png" /> 
</li></a> 

<a href="FoodFromPlants.html"><li id="FoodFromPlantsButton"> 
<img id="FoodFromPlantsText" src="Images/Icons/FoodFromPlantsText.png" /> 
</li></a> 

<a href="howplantsgrow.html"><li id="HowPlantsGrowButton"> 
<div id="HowPlantsGrowText"><img src="Images/Icons/HowPlantsGrowText.png" /> 
</div> 
<div id="HowPlantsGrowIcon"></div> 
</li></a> 

<a href="plantGame.html"><li id="PlantGameButton"> 
<img id="PlantGameText" src="Images/Icons/PlantGameText.png" /> 
</li></a> 
</ul> 

<form> 
<select accesskey="S" onchange="window.location.href=this.value;"> 
<option value="index.html">Home</option> 
<option value="whatswhat.html">Whats What</option> 
<option value="FoodFromPlants.html">Food From Plants</option> 
<option value="howplantsgrow.html">How Plants Grow</option> 
</select> 
</form> 

</nav> <!-- end of nav --> 

<div id="page"> 
<div id="content"> 

<img class="title" src="Images/Icons/FoodFromPlantsTitle.png" width="250" height="100"/> 

<div id="images"> 
    <img id="image1" src="Images/ImageGallery/Bananas.jpg" /> 
    <img id="image2" src="Images/ImageGallery/Apples.jpg" /> 
    <img id="image3" src="Images/ImageGallery/Broccoli.jpg" /> 
    <img id="image4" src="Images/ImageGallery/Carrots.jpg" /> 
    <img id="image5" src="Images/ImageGallery/Onions.jpg" /> 
    <img id="image6" src="Images/ImageGallery/Peas.jpg" /> 
</div> 
<div id="slider"> 
    <a href="#image1">1</a> 
    <a href="#image2">2</a> 
    <a href="#image3">3</a> 
    <a href="#image4">4</a> 
    <a href="#image5">5</a> 
    <a href="#image6">6</a> 

</div> 
</div> <!-- end of content --> 
</div> <!-- end of page --> 

<footer> 
</footer> <!-- end of footer --> 
</div> <!-- end of container --> 
</body> 
</html>

CSS :

#images { 
    width: 400px; 
    height: 250px; 
    overflow: hidden; 
    position: relative; 
    margin: 20px auto; 
} 
#images img { 
    width: 400px; 
    height: 250px; 
    position: absolute; 
    top: 0; 
    left: -400px; 
    z-index: 1; 
    opacity: 0; 
    transition: all linear 500ms; 
    -o-transition: all linear 500ms; 
    -moz-transition: all linear 500ms; 
    -webkit-transition: all linear 500ms; 
} 
#images img:target { 
    left: 0; 
    z-index: 9; 
    opacity: 1; 
} 
#images img:first-child { 
    left: 0; 
} 
#slider a { 
    text-decoration: none; 
    background: #E3F1FA; 
    border: 1px solid #C6E4F2; 
    padding: 4px 6px; 
    color: #222; 
} 
#slider a:hover { 
    background: #C6E4F2; 
}

출처

2013-04-20 WibblyWobbly

'SlideShow.js'에 무엇이 있습니까? http://jsfiddle.net에서 데모를 구할 수 있는지 확인하십시오. – chrx

및 그 대응 부분 은 앵커이며 하이퍼 링크를 클릭하면 페이지가 클릭되면 관련 앵커에 초점을 맞 춥니 다. 이것이 가능한지 확인하려면 자바 스크립트를 볼 필요가 있습니다 완화 될 – Silvertiger

포커스가 페이지에서 아래로 이동합니다. ? 방법? 더 명확하게 설명 할 수 있습니까? –

자바 스크립트를 추가하지 않고 현재 메소드를 수정할 수 있는지 의심됩니다.

jQuery를 사용하면 클릭 한 번에 이미지를 페이드 아웃하는 것이 매우 간단합니다.

실용 예제는 jsFiddle을 확인하십시오.

<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script> 

<script> 
$(document).ready(function(){ 
$(".selector").click(function() { 
$('#image1').fadeToggle(); 
}); 
</script>

".selector"를 방아쇠로 사용하려는 요소의 클래스 또는 ID로 바꾸십시오.

출처

2013-04-21 04:25:10 apaul

라이브러리를 링크해야합니까? – WibblyWobbly

@MattMeadows 예 라이브러리가 필요할 것입니다. 업데이트 된 답변을 참조하십시오. – apaul

@MattMeadows 당신은 타이밍과 여유를 추가 할 수있는 더욱 저렴한 스릴을 원합니다 - http://jsfiddle.net/apaul34208/sVmTn/2/ – apaul

이미지 갤러리가 계속 페이지를 이동시킵니다.

답변

관련 문제