Добавление графических ссылок на определенную страницу в слайд-шоу JavaScript - PullRequest
Новая
       7

Добавление графических ссылок на определенную страницу в слайд-шоу JavaScript

0 голосов
/ 14 апреля 2011

Я занят веб-сайтом электронной коммерции, и клиент хочет, чтобы 3 слайд-шоу работали рядом друг с другом, отображая специальные предложения или рекламные акции, запущенные на сайте.Я правильно понял, что запускаю 3 слайд-шоу рядом друг с другом, но не знаю, как добавить ссылки на изображения, если вы нажмете на это специальное объявление, которое приведет вас на соответствующую страницу.

Обратите внимание, яЯ все еще новичок, когда дело доходит до JavaScript, но я знаю html и css.

Вот код, который я использовал:

Это код, который идет в разделе заголовка. 

<head>
<script type="text/javascript">
<!--
var Imgs=['/images/specials/1.jpg','/images/specials/2.jpg','/images/specials/3.jpg','/images/specials/4.jpg','/images/specials/5.jpg',];
for (var src,z0=0;z0<Imgs.length;z0++){
src=Imgs[z0];
Imgs[z0]=new Image();
Imgs[z0].src=src;
 }

var Imgs1=['/images/specials/3.jpg','/images/specials/4.jpg','/images/specials/5.jpg','/images/specials/1.jpg','/images/specials/2.jpg',]
for (var src,z0=0;z0<Imgs1.length;z0++){
src=Imgs1[z0];
Imgs1[z0]=new Image();
Imgs1[z0].src=src;
 }

var Imgs2=['/images/specials/5.jpg','/images/specials/1.jpg','/images/specials/4.jpg','/images/specials/2.jpg','/images/specials/3.jpg',];
for (var src,z0=0;z0<Imgs2.length;z0++){
src=Imgs2[z0];
Imgs2[z0]=new Image();
Imgs2[z0].src=src; 
 }

//-->
</script>
</head>

Следующая часть, которая входит в раздел тела моей страницы 

<body>
<img src="/images/1.jpg" id="slide" width="33%" height="300" />
<img src="/images/3.jpg" id="slide1" width="33%" height="300" />
<img src="/images/5.jpg" id="slide1" width="33%" height="300" />

<script type="text/javascript">
<!--

function slideit(o){
this.img=document.getElementById(o.ImageID);
if (this.img){
this.ary=o.ImageArray;
this.ms=o.Duration;
this.cnt=0;
this.to=null;
this.slide();
 }
}

slideit.prototype.slide=function(){
this.img.src=this.ary[this.cnt].src;
this.cnt=++this.cnt%this.ary.length;
var oop=this;
this.to=setTimeout(function(){ oop.slide(); },this.ms);
}

new slideit({
ImageID:'slide'
ImageArray:Imgs,
Duration:4500
});

new slideit({
ImageID:'slide1'
ImageArray:Imgs1,
Duration:5500
});

new slideit({
ImageID:'slide2',
ImageArray:Imgs2,
Duration:6500
});

//-->
</script>
</body>

Если это так просто, не могли бы вы, пожалуйста, посоветовать мне, как и где добавить изображения ссылки на код выше.

С уважением, Jakesza

Обновление

Я снова заставил работать слайд, и я заметил, что скрипту в части тела нужнычтобы оставаться там как можно быстрее, когда я перемещаю его в головную секцию, слайд перестает работать.Также, если я добавлю части var = Href в код, слайд-шоу не перейдет.Вот ссылка на страницу, на которой я экспериментировал.

http://www.compunamics.co.za/test.html

Спасибо за ваше время,

Jakesza

1 Ответ

0 голосов
/ 14 апреля 2011

Веселись 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript"><!--
var sliderSetup = [
  {
    "id":"slide0",  
    "hrefs":['http://www.google.co.za','http://www.stackoverflow.com','http://www.test.com','http://www.amazon.com','http://www.bidorbuy.co.za'],
    "images":['/images/test/image1.gif','/images/test/image2.gif','/images/test/image3.gif','/images/test/image4.gif','/images/test/image5.gif'],
    "duration":4500
  },
  {
    "id":"slide1",  
    "hrefs":['http://www.bidorbuy.co.za','http://www.stackoverflow.com','http://www.test.com','http://www.amazon.com','http://www.google.co.za'],
    "images":['/images/test/image5.gif','/images/test/image6.gif','/images/test/image7.gif','/images/test/image8.gif','/images/test/image1.gif'],
    "duration":5000
  },
  {
    "id":"slide2",  
    "hrefs":['http://www.google.co.za','http://www.stackoverflow.com','http://www.test.com','http://www.amazon.com','http://www.bidorbuy.co.za'],
    "images":['/images/test/image7.gif','/images/test/image8.gif','/images/test/image1.gif','/images/test/image2.gif','/images/test/image6.gif'],
    "duration":5500
  }
];

function slideit(o){
  this.img=document.getElementById(o.ImageID);
  if (this.img){
    this.ary=[];
    for (var i=0;i<o.ImageArray.length;i++) {
      this.ary[i]=new Image(); 
      this.ary[i].src=o.ImageArray[i];
    }
    this.ms=o.Duration;
    this.cnt=0;
    this.hrefs=o.HrefArray;
    this.to=null;
    this.slide();
  }
}

slideit.prototype.slide=function() {
  this.img.src=this.ary[this.cnt].src;
  this.cnt=++this.cnt%this.ary.length;
  this.img.parentNode.href = this.hrefs[this.cnt];
  var oop=this;
  this.to=setTimeout(function(){ oop.slide(); },this.ms);
}

window.onload=function() {
  for (var i=0;i<sliderSetup.length;i++) {
    new slideit({
      ImageID:sliderSetup[i].id,
      ImageArray:sliderSetup[i].images,
      HrefArray:sliderSetup[i].hrefs,
      Duration:sliderSetup[i].duration
    });
  }
}


//-->
</script>
</head>
<body>
<a href="http://www.google.co.za"><img alt="" src="/images/test/image1.gif" id="slide0" height="150" width="150" /></a>
<a href="http://www.bidorbuy.co.za"><img alt="" src="/images/test/image5.gif" id="slide1" height="150" width="150" /></a>
<a href="http://www.test.com"><img alt="" src="/images/test/image3.gif" id="slide2" height="150" width="150" /></a>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...