javascript - 如何更改代码以使图片位于 "main-block"中，而不是 js 代码？

标签 javascript html css

<分区>

想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题.

关闭 8 年前。

Improve this question

如何更改此 javascript 代码 - http://jsbin.com/ciduhegukinu/2/edit 如何更改此代码以使图片位于“主 block ”而不是 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>

最佳答案

我无法为您写下整个页面，因此这肯定不是一个完整的答案。 1) 从您在此处找到的 html 开始。它将基本上为您的页面提供您要求的结构。当您根据需要插入元素时，不要忘记正确关闭它们。 2)忘记你发布的css，它与你的html没有太大关系。为您拥有的元素编写自己的 css，并将其放入 head 中的 style-tag 中。 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>

关于javascript - 如何更改代码以使图片位于 "main-block"中，而不是 js 代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25912019/

上一篇：javascript - 使用 JavaScript 创建 Highchart 图

下一篇：html - 添加文本内容后div悬停效果改变

相关文章：

javascript - 如何在 summernote 中设置字体大小？

javascript - 使用 XHR 更新服务器文件并向 html select 添加选项

jquery - 高度最高的 3 个 div？

jquery - IE11 问题与变换 rotateY 和背面可见性悬停效果

css - 对齐图标以选择标签

html - 如果页面超出正常高度，页脚会 float

javascript - 修改 jQueryUI 日期选择器按钮

javascript - Gulp 浏览器同步 ENOENT 错误

javascript - three.js Raycaster 似乎一直在动画的第一个关键帧的基础上工作

html - 防止在动态加载的 OPTION 中换行

©2024 IT工具网  联系我们