-2
자바 스크립트 풍선 링크가있는 페이지를 만들고 있는데 슬라이드 쇼가 필요합니다. 그것은 잘 작동하는 것 같았지만 슬라이드 쇼가있는 몇 개의 다른 페이지를 만든 후에 모두 부러졌습니다. 나는 왜 그들이 다른 자바 스크립트와 다른 이름을 가지고 있고 그들은 모두 올바른 장소에 있기 때문에 왜 확실하지 않다. 나는 한 페이지에 대해 가지고있는 모든 코드를 붙여 넣을 것이다. 나는 사진과 자바 스크립트가있는 보석이라는 폴더를 가지고 있지만, HTML 페이지는 기본 폴더에 있지만 그와 같은 것으로 분류되어 있습니다. 제가 누락되었거나 제거해야 할 것이 있습니까? 나는 javascript가 javascript 책 (전 단지 파일 위치와 캡션을 변경 했음)에서 훨씬 완벽하게 pretyy하다는 점에 유의하고 싶습니다. 대부분 HTML입니다. 내 탐색을 내 슬라이드 쇼와 함께 사용하길 원합니다. 첫 번째 이미지가 표시되지만 버튼은 다음 슬라이드로 이동하지 않습니다.왜 코드가 손상 되었습니까?
쉬운 코딩에 대한 제안 사항이 있으면 계속하십시오. 그렇지 않으면이 문제를 해결하고 싶습니다. 나의 마지막 프로젝트는 며칠 안에 해결할 수있는 방법이있다. 나는 모든 것을 실제 링크에 업로드 할 필요가 없기 때문에 내가 준 코드 조각으로 작업해야합니다. 사실 그대로 전체 전체 페이지와 모든 자바 스크립트입니다.
미리 감사드립니다.
window.onload = initAll;
var currImg = 0;
var captionText = [
\t "Mostly bracelets right now",
];
function initAll() {
\t document.getElementById("imgText").innerHTML = captionText[0];
\t document.getElementById("prevLink").onclick = function() {
\t \t newSlide(-1);
\t }
\t document.getElementById("nextLink").onclick = function() {
\t \t newSlide(1);
\t }
}
function newSlide(direction) {
\t var imgCt = captionText.length;
\t currImg = currImg + direction;
\t if (currImg < 0) {
\t \t currImg = imgCt-1;
\t }
\t if (currImg == imgCt) {
\t \t currImg = 0;
\t }
\t document.getElementById("slideshow1").src = "jewelry/bracelet" + currImg + ".jpg";
\t document.getElementById("imgText").innerHTML = captionText[currImg];
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Think Jewelry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="jewelry/jewelry.js"></script>
<style>
#horizon
\t \t \t \t \t {
\t \t \t \t text-align: center;
\t \t \t \t position: absolute;
\t \t \t \t top: 50%;
\t \t \t \t left: 0px;
\t \t \t \t width: 100%;
\t \t \t \t overflow: visible;
\t \t \t \t visibility: visible;
\t \t \t \t display: block;
\t \t \t \t
\t \t \t }
\t \t \t #stuff
\t \t \t \t {
\t \t \t font-family: Verdana, Geneva, Arial, sans-serif;
\t \t \t background-color: #fff;
\t \t \t margin-left: -500px;
\t \t \t position: absolute;
\t \t \t top: -125px;
\t \t \t left: 50%;
\t \t \t width: 1000px;
\t \t \t height: 450px;
\t \t \t visibility: visible;
\t \t \t overflow: scroll;
\t \t \t padding: 10px;
\t \t \t border: 5px dotted #F3DECD;
\t \t \t text-align: center;
\t \t \t }
\t \t \t
\t \t \t footer {
\t \t \t height:45px;
\t \t \t width:100%;
\t \t \t background-color:#EAC5E4;
\t \t \t position:relative;
\t \t \t bottom:-0;
\t \t \t font-style: italic;
\t \t \t }
\t \t \t
\t \t \t *{
margin:0;
padding:0;
}
body{
font-family:Arial;
\t \t \t \t background:#fff url(images/bg1.png) repeat;
\t \t \t \t background-size: 700px;
\t \t \t \t height: 100%;
\t \t \t \t min-height: 100%;
}
.title{
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content{
margin:0 auto;
}
\t \t \t
</style>
</head>
<body>
\t
<div id="content">
\t \t <a href="index.html"><div class="title"> </div></a>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul>
<li><a href="aboutshop.html">About the Shop</a></li>
\t \t \t \t \t \t <li><a href="aboutartist.html">About the Artist</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>How-To's</h2>
<ul>
<li><a href="howtojewelry.html">Jewelry</a></li>
<li><a href="howtoclay.html">Clay</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Portfolio</h2>
<ul>
<li><a href="jewelry.html">Jewelry</a></li>
<li><a href="clay.html">Clay</a></li>
<li><a href="digital.html">Digital</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Contact</h2>
<ul>
\t \t \t \t \t \t <li><a href="contact.html">Questions</a></li>
<li><a href="suggestions.html">Suggestions</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function() {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function() {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
\t \t \t
</script>
\t \t
\t \t
\t \t
\t \t
<div id="horizon">
\t <div id="stuff">
\t <h2> Jewelry Gallery </h2><br>
\t <img src="jewelry/bracelet0.jpg" alt="My Jewelry" id="slideshow1"></img>
\t <div id="imgText"> </div>
\t <div id="chgImg">
\t \t <input type="button" id="prevLink" value="« Previous">
\t \t <input type="button" id="nextLink" value="Next »">
\t </div>
\t </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<footer>
<a href="http://kiya-rose.deviantart.com/">
<img height="32" width="32" alt=" Deviantart" src="deviantart.png">
</a>
<a href="https://www.facebook.com/thinkjewelryy">
<img height="32" width="32" alt=" Think Jewelry Page" src="facebook.png">
</a>
Copyright© Brittany Rose
</footer>
</body>
</html>
원하는 기능과 문제점은 무엇입니까? 브라우저 자바 스크립트 콘솔에 오류가 있습니까? – showdev
귀하의 URL 또는 소스에 실제 URL이 필요합니다. 귀하의 발췌 문장의 소스를 확인할 수 없습니다. – easywaru
문제를 재현하는 코드의 축소되고 단순하며 훨씬 짧은 버전을 만드십시오. –