圆形阵列和大图像显示有问题 [英] having trouble with circular array and large image displayed
本文介绍了圆形阵列和大图像显示有问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在做一个小横幅广告测试，似乎无法找出如何解决主要图像显示的方式根据缩略图，由于我特别放在右缩略图的代码 - 我在这里发布：
在这里查看代码
I'm working on a little banner ad test and can't seem to figure out how to fix the way the main image is displaying in accordance with the thumbnails due to the code I put in specifically on the right thumbnail--I posted it here: view code here
我还需要动态改变文本和价格 - 如果有人可以告诉我一个快速的方法，我会永远感激...
I also need to change the text-and prices dynamically--if someone could show me a quick how-to I'd be eternally grateful...
理想情况下，当按下箭头时，我希望图像滑过，但这可能要求太多....
Ideally, I'd like the images to slide over when the arrows are pressed, but that may be asking for too much....
谢谢，
--- Yvette
Thanks, ---Yvette
<!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;
}
推荐答案
示例
CSS
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
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
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
这篇关于圆形阵列和大图像显示有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
