如何更改此javascript代码 - http://jsbin.com/ciduhegukinu/2/edit 如何更改此代码，使图片处于“主块”，而不是js代码。然后已经在javascript中将它们放入幻灯片数组中。
所有页面的结构如下：
我想：
------------------------
Big picture (100% width)
-----------------------
menu ||| galery
-----------------------
而不是（我现在有）：
.................
galery (100 width 100 height)
................
我想要（不要工作）：
var div = document.getElementById("main-block");
var images = div.getElementsByTagName("img");
var slides = Array.prototype.forEach.call(images,function (el) {
slides.push(el.getAttribute("src"));
});
Slider.init({
images : slides
})
而不是（工作）：
Slider.init(document.body,{
images : [
"http://cdn.trinixy.ru/pics3/20080515/vodopadi_18.jpg",
"http://i.redigo.ru/4fb0dd2a4e202.jpg",
"http://4.bp.blogspot.com/-dN_zBi_BLio/Uli2RStTf2I/AAAAAAAAIH4/EpGnraB6qu8/s1600/%D0%BB%D0%B0%D0%B2%D0%BE%D1%87%D0%BA%D0%B02.jpg",
"http://www.uznayvse.ru/images/stories/uzn_1384119271.jpg",
"http://i.redigo.ru/4fb0dd2a4e202.jpg",
]
});
如果照片太多，也一定要在浏览器中向下滚动。在画廊必须在3张照片上。
我的所有代码：
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<center>
<div width="300px" id="content">
<img src="images/top.gif" width="100%" height="300px">
<table border="3px">
<tr>
<td>
<div id="menu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<div id="menu_foto">
<li><a href=""></a></li><br>
<li><a href=""></a></li><br>
<li><a href=""></a></li><br>
</div>
</div>
</ul>
</td>
<td>
<div id="main-block">
<img src="images/fotogalery/1.jpg">
<img src="images/fotogalery/2.jpg"><br>
<img src="images/fotogalery/3.jpg">
<img src="images/fotogalery/4.jpg"><br>
<img src="images/fotogalery/5.jpg">
<img src="images/fotogalery/6.jpg"><br>
<img src="images/fotogalery/7.jpg">
<img src="images/fotogalery/8.jpg"><br>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
<style>
html,body{
margin:0px;
}
#cap {
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:flex;
z-index : 99999;
position:fixed;
}
figure {
padding:0px;
margin:100px auto;
width:800px;
overflow: hidden;
}
img {
height: 450px;
width:550px;
border:5px solid white;
border-radius: 5px;
margin:auto;
}
ul {
width:810px;
list-style:none;
margin:0px;
padding:0px;
}
li {
width:810px;
position:absolute;
opacity:0;
text-align: center;
}
li:first-child{
opacity:1;
}
.previewSlide{
width:250px;
height:250px;
overflow: hidden;
float: left;
margin:10px;
}
</style>
<script>
var Slider = {
Collection : [],
currentSlide : 0,
Box : {
showBox : function (n) {
if(!this.element) return;
this.element.style.display = "flex";
document.body.style.overflow = "hidden";
var slides = this.element.getElementsByTagName("li");
slides.item(n).style.opacity = 1;
Slider.currentSlide = n;
},
closeBox : function (n) {
if(!this.element) return;
this.element.style.display = "none";
document.body.style.overflow = "auto";
var slides = this.element.getElementsByTagName("li");
Array.prototype.forEach.call(slides,function (el) {
el.style.opacity = 0;
})
}
},
Prevew : {
element : {},
init : function (p) {
var div = document.createElement("div");
div.id = "previewSlides";
div.style.position = "fixed";
for(var i in Slider.Collection) {
var figure = document.createElement("figure");
figure.setAttribute("class","previewSlide");
var img = document.createElement("img");
img.src = Slider.Collection[i];
img.onclick = (function (i) {
var i = i;
return function (e) {
Slider.Box.showBox(i);
}
})(i);
figure.appendChild(img);
div.appendChild(figure);
this.element = div;
}
p.appendChild(div)
}
}
}
Slider.init = function (p,options) {
var opt = options || {};
this.Collection = opt.images;
var self = this;
(function (p) {
var cap = document.createElement("div");
cap.id = "cap";
var figure = document.createElement("figure");
figure.id = "slideWrapper";
var ul = document.createElement("ul");
ul.setAttribute("class","slideList");
ul.style.left = 0;
for(var i = 0; i < self.Collection.length; i++) {
var li = document.createElement("li");
var img = document.createElement("img")
img.src = self.Collection[i];
li.appendChild(img);
ul.appendChild(li);
}
var img = document.createElement("img");
img.class = "slide";
img.src = self.Collection[0] || "";
p.appendChild(cap);
cap.appendChild(figure);
figure.appendChild(ul);
self.Box.element = cap;
self.Box.closeBox();
self.Prevew.init(p);
})(p);
}
Slider.changeSlide = function (dir) {
var slides = this.Box.element.getElementsByTagName("li");
var l = this.Collection.length;
slides.item(this.currentSlide).style.opacity = 0;
(dir) ? this.currentSlide ++ : this.currentSlide--;
if(this.currentSlide == l) this.currentSlide = 0;
if(this.currentSlide < 0) this.currentSlide = l-1;
slides.item(this.currentSlide).style.opacity = 1;
};
var div = document.getElementById("main-block");
var images = div.getElementsByTagName("img");
var slides = Array.prototype.forEach.call(images,function (el) {
slides.push(el.getAttribute("src"));
});
Slider.init(document.body,{
images : slides
});
Slider.Box.element.onclick = function (e) {
if(e.target.tagName != "IMG") Slider.Box.closeBox();
else {
if(e.clientX > (e.target.offsetWidth + e.target.style.width/2) ) Slider.changeSlide(false);
else Slider.changeSlide(true);
}
}
</script>
答案 0 :(得分：0)
我不能为你写整页，所以这肯定不是一个完整的答案。 1）从你在这里找到的html开始。它将基本上为您的页面提供您要求的结构。当您根据需要插入元素时，不要忘记正确关闭它们。 2）忘记你发布的CSS，它与你的html没什么关系。为你拥有的元素编写自己的css，并将其放入样式标记中。 3）将脚本放在底部的脚本标记中。
我希望这会帮助你找到正确的方向。
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#menu {float: left; width: 30%}
#main-block {float: right; width: 70%}
#footer {clear: both;}
/* put your css here */
</style>
</head>
<body>
<div id="content">
<img src="images/top.gif" width="100%" height="300px">
<div id="menu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<div id="menu_foto">
<ul>
<li><a href=""></a></li><br>
<li><a href=""></a></li><br>
<li><a href=""></a></li><br>
</ul>
</div>
</div>
<div id="main-block">
<img src="images/fotogalery/1.jpg">
<img src="images/fotogalery/2.jpg"><br>
<img src="images/fotogalery/3.jpg">
<img src="images/fotogalery/4.jpg"><br>
<img src="images/fotogalery/5.jpg">
<img src="images/fotogalery/6.jpg"><br>
<img src="images/fotogalery/7.jpg">
<img src="images/fotogalery/8.jpg"><br>
</div>
</div>
<div id="footer">
<p> Put in here what you want to have in footer</p>
</div>
</body>
<script>
/* put your javascript here */
</script>
</html>