显示圆形阵列和大图像时遇到问题答案

【问题标题】：having trouble with circular array and large image displayed显示圆形阵列和大图像时遇到问题
【发布时间】：2014-03-05 06:49:45
【问题描述】：

我正在做一个小横幅广告测试，但由于我专门在右侧缩略图上添加了代码，我似乎无法弄清楚如何根据缩略图来修复主图像的显示方式——我把它贴在这里： view code here

我还需要动态更改文本和价格——如果有人能告诉我一个快速的操作方法，我将永远感激不尽...

理想情况下，我希望图像在按下箭头时滑过，但这可能要求太多......

谢谢， ---伊薇特

   <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Hotels ad</title>
    <link href="mainstyleshotels2.css" rel="stylesheet" type="text/css">

     <script>
    function init(){
    //document.getElementById("mainphoto").body.style.backgroundImage="url('i,ages/mainphoto0.jpg')";   

    }
    function init2(){
        ss_el = document.getElementById("ss_el");
        ss_elr = document.getElementById("ss_elr");
        ssSlide();
    }
        var ss_i=0;
        var ss_array=["<img src='images/paris_sm.jpg'/>",
                      "<img src='images/madrid_sm.png'/>",
                      "<img src='images/tokyo_sm.jpg'/>",
                      "<img src='images/amsterdam_sm.jpg'/>",
        ];
        var ss_el;
        var ss_elr;
        function ssNext(){
            ss_i++;
            if(ss_i > (ss_array.length - 1)){
                ss_i = 0;
            }
    ssSlide();
}
        function ssPrev(){
            ss_i--;
            if(ss_i < 0){
                ss_i = ss_array.length - 1;
            }
    ssSlide();
}
        function ssSlide(){
    ss_el.innerHTML = ss_array[ss_i];

    if(ss_i < (ss_array.length - 1)){
        ss_elr.innerHTML = ss_array[(ss_i)+1];
    }else{
        ss_elr.innerHTML = ss_array[0];
    }
    var urlString = 'url(images/mainphoto' + ss_i + '.jpg)';
    var obj= document.getElementById("mainphoto");
    obj.style.background =  urlString;
    //document.getElementById("mainphoto").style.backgroundImage = "url('images/mainphoto" + ss_i + ".jpg')";
    console.log(urlString);
}
     </script>
     </head>

     <body onLoad="init();init2();">
     <div id="wrapper">

     <div id="background"><img src="images/logo.png"></div>
     <div id="black"><p id="para1">Hotel Hospes</p><p2 id="para2">Madrid, Spain</p2><p3 id="para3">$289</p3><p4 id="para4">$242</p4> </div>

     <div id="mainphoto"></div>
     <nav id="leftnav"><img src="images/goleft.png" width="27" height="28"/></nav>


    <nav id="rightnav" ><img src="images/goright.png" width="27" height="28" /></nav>
    <div id="ss_el"></div><div id="ss_elr"></div>

    <div id="cta"><img src="images/cta.png" width="170" height="56" alt="" /></div>
    </div>

    <script>
        var goleft = document.getElementById("leftnav");
        goleft.addEventListener("click", changeMainImagesLeft, false);
        function changeMainImagesLeft(){
        ss_el = document.getElementById("ss_el");
        ss_elr = document.getElementById("ss_elr");
            ssNext();
        }       
        var goright = document.getElementById("rightnav");
        goright.addEventListener("click", changeMainImagesRight, false);    
        function changeMainImagesRight(){
            ss_el = document.getElementById("ss_el");
            ssPrev();
        }

    </script>

    </body>
    </html>

   @charset "utf-8";
   /* CSS Document */
   body{
   height:480px
   width:320px; 
   }


     #background {
    position: absolute;
    background: url(images/backgroundt.jpg) 0 0 no-repeat;
    margin: 100px auto 0;
    height: 480px;
    width: 320px;
    }

    #black {
    position: absolute;
    margin: 100px auto 0;
    z-index: 1;
    width: 320px;
    height: 120px;
    -webkit-border-radius: 13px 13px 13px 13px;
    -moz-border-radius: 13px 13px 13px 13px;
    border-radius: 13px 13px 13px 13px;
    background-color: #333333;
    top: 258px;
     }
     #cta {
    position: absolute;
    margin-bottom: 0;
    margin-top: 415px;
    margin-left: 147px;
    z-index: 1;

    }
    #cta:hover {
   cursor:pointer;
    }
    #ss_el {
    position: absolute;
    margin-top: 480px;
    padding-top: 0px;


    }
    #ss_elr {
    position: absolute;
    margin-top: 480px;
    margin-left: 160px;

   }
   #mainphoto {
    background:url(images/mainphoto0.jpg);
    position: absolute;
    margin-top: 149px;
    z-index: 0;
    width: 320px;
    height: 320px;
    }

    #black p {
    font-family: Arial;
    font-weight: bold;
    font-size: 1.5em;
    position: absolute;
    color: #FFFFFF;
    top: -20px;
    left: 11px;
    }
    #black p2 {
    color: #FFFFFF;
    font-family: Arial;
    font-weight: bold;
    font-size: 1.3em;
    position: absolute;
    top: 33px;
    left: 12px;
    }
    #black p3 {
    color: #000000;
    font-family: Arial;
    font-weight: bold;
    font-size: 1.3em;
    position: absolute;
    top: 63px;
    left: 16px;
    text-decoration: line-through;
    }
    #black p4 {
    color: #EE2E33;
    font-family: Arial;
    font-weight: bold;
    font-size: 1.7em;
    position: absolute;
    top: 86px;
    left: 15px;
    }
    #leftnav {
    background: rgb(255,255,255);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 529px;
    z-index: 2;
    left: 4px;
    padding: 3px;
    }
    #leftnav:hover {
   cursor:pointer;
    }
    #rightnav {
    background: rgb(255,255,255);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 529px;
    z-index: 2;
    left: 281px;
    padding: 3px;
    }
    #rightnav:hover {
   cursor:pointer;
    }

    #wrapper {
    left: 301px;
    position: fixed;
    }

【问题讨论】：

您的代码链接失效
liferingart.com/hoteltest/hotelstest.html
我看到了广告，但没有看到代码。
嗯，当我点击它们时，两个链接都可以工作——但这是网址：liferingart.com/hoteltest/hotelstest.html
将您的代码直接发布到问题中，最好附上jsFiddle 您的最新链接还提供广告。

标签： javascript html css

【解决方案1】：

例子

CSS

#wrapper {
    width:320px;
    height:480px;
}
#background {
    background-color:#e8e8de;
    position:relative;
    width:100%;
    height:100%
}
#logo, #main, #mainphoto, #black, #nav, #previous, #current, #next {
    width:100%;
}
#logo {
    background: url(http://www.kamiblue.com/hotelstest/images/logo.png) no-repeat;
    height:49px;
}
#main {
    height:320px;
}
#mainphoto {
    height:100%;
    display:block;
}
#black {
    position:absolute;
    height:120px;
    -webkit-border-radius:13px 13px 13px 13px;
    -moz-border-radius:13px 13px 13px 13px;
    border-radius:13px 13px 13px 13px;
    background-color:#333333;
    bottom:80px;
}
#paras {
    position:relative;
    left:10px;
    font-family:Arial;
    font-weight:bold;
    font-size:1.3em;
    color:#FFFFFF;
}
#para1, #para4 {
    font-size:1.5em;
}
#para3 {
    color:#000000;
    text-decoration:line-through;
}
#para4 {
    color:#EE2E33;
}
#bookNow {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/cta.png) no-repeat;
    width:170px;
    height:56px;
    bottom:5px;
    right:2px;
}
#bookNow:hover {
    cursor:pointer;
}
#previousWrap, #currentWrap, #nextWrap {
    width:33.3%;
    float:left;
}
#previous, #current, #next {
    height:110px;
}
#leftnav {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/goleft2.png) no-repeat;
    left:0px;
    bottom:0px;
    width:44px;
    height:44px;
}
#leftnav:hover {
    cursor:pointer;
}
#rightnav {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/goright2.png) no-repeat;
    right:0px;
    bottom:0px;
    width:44px;
    height:44px;
}
#rightnav:hover {
    cursor:pointer;
}

HTML

<div id="wrapper">
    <div id="background">
        <div id="logo"></div>
        <div id="main">
            <img id="mainphoto"></img>
            <div id="black">
                <div id="paras">
                    <div id="para1"></div>
                    <div id="para2"></div>
                    <div id="para3"></div>
                    <div id="para4"></div>
                </div>
                <div id="bookNow"></div>
            </div>
        </div>
        <div id="nav">
            <div id="leftnav"></div>
            <div id="rightnav"></div>
            <div id="previousWrap">
                <img id="previous"></img>
            </div>
            <div id="currentWrap">
                <img id="current"></img>
            </div>
            <div id="nextWrap">
                <img id="next"></img>
            </div>
        </div>
    </div>
</div>

Javascript

function RingArray(object, position) {
    this.array = RingArray.compact(object);
    this.setPosition(position);
}

RingArray.toInt32 = function (number) {
    return number >> 0;
};

RingArray.toUint32 = function (number) {
    return number >>> 0;
};

RingArray.isOdd = function (number) {
    return number % 2 === 1;
};

RingArray.indexWrap = function (index, length) {
    index = RingArray.toInt32(index);
    length = RingArray.toUint32(length);
    if (index < 0 && RingArray.isOdd(length)) {
        index -= 1;
    }

    return RingArray.toUint32(index) % length;
};

RingArray.compact = (function (filter) {
    var compact;

    if (typeof filter === 'function') {
        compact = function (object) {
            return filter.call(object, function (element) {
                return element;
            });
        };
    } else {
        compact = function (object) {
            object = Object(object);
            var array = [],
                length = RingArray.toUint32(object.length),
                index;

            for (index = 0; index < length; index += 1) {
                if (index in object) {
                    array.push(object[index]);
                }
            }

            return array;
        };
    }

    return compact;
}(Array.prototype.filter));

RingArray.prototype = {
    setPosition: function (position) {
        this.position = RingArray.indexWrap(position, this.array.length);

        return this;
    },

    setToStart: function () {
        return this.setPosition(0);
    },

    setToEnd: function () {
        return this.setPosition(this.array.length - 1);
    },

    setRandom: function () {
        return this.setPosition(Math.floor(Math.random() * this.array.length));
    },

    increment: function (amount) {
        return this.setPosition(this.position + (RingArray.toInt32(amount) || 1));
    },

    previousElement: function () {
        return this.array[RingArray.indexWrap(this.position - 1, this.array.length)];
    },

    currentElement: function () {
        return this.array[this.position];
    },

    nextElement: function () {
        return this.array[RingArray.indexWrap(this.position + 1, this.array.length)];
    }
};

var mainphoto = document.getElementById('mainphoto'),
    previous = document.getElementById('previous'),
    current = document.getElementById('current'),
    next = document.getElementById('next'),
    para1 = document.getElementById("para1"),
    para2 = document.getElementById("para2"),
    para3 = document.getElementById("para3"),
    para4 = document.getElementById("para4"),
    offers = [{
        url: "http://www.liferingart.com/hoteltest/images/mainphoto0.jpg",
        name: 'Hotel Hospes',
        location: 'Madrid, Spain',
        price: '$289',
        offer: '$242'
    }, {
        url: "http://www.liferingart.com/hoteltest/images/mainphoto1.jpg",
        name: 'Hotel Godard',
        location: 'Paris, France',
        price: '$1200',
        offer: '$1099'
    }, {
        url: "http://www.liferingart.com/hoteltest/images/mainphoto2.jpg",
        name: 'Park Hyatt',
        location: 'Tokyo, Japan',
        price: '$1500',
        offer: '$1399'
    }, {
        url: "http://www.liferingart.com/hoteltest/images/mainphoto3.jpg",
        name: 'Hotel Citadel',
        location: 'Amsterdam, The Netherlands',
        price: '$180',
        offer: '$157'
    }],
    offersRing = new RingArray(offers);

function update(x) {
    var currentOffer = offersRing.currentElement();

    mainphoto.src = current.src = currentOffer.url;
    para1.textContent = currentOffer.name;
    para2.textContent = currentOffer.location;
    para3.textContent = currentOffer.price;
    para4.textContent = currentOffer.offer;

    previous.src = offersRing.previousElement().url;
    next.src = offersRing.nextElement().url;
}

document.getElementById("leftnav").addEventListener("click", function () {
    offersRing.increment(-1);
    update();
}, false);

document.getElementById("rightnav").addEventListener("click", function () {
    offersRing.increment(1);
    update();
}, false);

update();

开启jsFiddle

【讨论】：

这几乎是完美的-保存我也需要正确的缩略图-也许我可以通过摆弄您的代码来弄清楚-我还需要更改显示的文本-我意识到我现在只显示一家酒店的价格和酒店名称，但我可以要求您将其添加到您的小提琴中吗？ ...谢谢！！！！--Yvette
我的示例有正确的缩略图。 large 和 thumb 使用相同的图像，只是使用 CSS 缩放。你真的需要付出更多的努力来明确你的问题，具体化，添加和整理你的代码，提供一个 jsFiddle。尝试阅读stackoverflow.com/help，它有很多关于提问的建议。
我知道您的缩略图是正确的，但我需要两个..因为这就是广告的设计方式...我添加第二个的方式是在数组中添加 1，所以它会显示数组中导致所有这些问题的下一个图像...对不起，我不清楚并尝试制作 jsFiddle 但无法显示图像
只需添加与第一个长度相同的第二个buffer（或您需要的任意多个）与您想要的图片，然后使用相同的currentPosition 为它们编制索引。我没有时间为示例添加第二个buffer 的替代方案。
它们将是相同的图像——问题是因为我在右边的拇指上加了 1，如果它超过了数组长度，我必须放入一个 if then 语句来重置它。 .