-2

我创建了一个基本滑块，在使用 javascript 时每 5 秒运行一次图像。我的滑块工作得很好，但我不想再将它用作图像滑块。我想创建一个具有更多 html 设计功能的 div 并将其发布在我的滑块中而不是我的图像中。按照下面的代码，我需要更改和添加什么才能使其正常工作？

 <!doctype html>
 <html>
 <head>
 <title>Ad Slider</title>
 <style>
 #slider
 {
    width: 800px;
    height: 200px;
 }
 #sliderImages
 {
    width: 100%;
    height: 100%;
    border: 1px solid #06c;
border-radius: 10px;
 }
 </style>
 <script type = "text/javascript">
var image1 = new Image();
image1.src = "sky.jpg";
var image2 = new Image();
image2.src = "chatImage.jpg";
var image3 = new Image();
image3.src = "orange.jpg";
 </script>
 </head>
 <body>
 <div id = "slider">
    <img id = "sliderImages" src = "sky.jpg" name = "slide" />
    <script type = "text/javascript">
   var sliderAd = 1
   function slideAds()
   {
      if (!document.images)
      {
     return;
      }
      document.images.slide.src = eval("image"+sliderAd+".src")
      if (sliderAd < 3)
      {
         sliderAd++;
      }
      else
      {
     sliderAd = 1;
      }
      setTimeout("slideAds()",5000)
   }
   slideAds()
</script>
 </div>
 </body>
 </html>

现在不是添加这些图像，而是如何添加这种类型的内容，但以与图像相同的方式工作？

 <div>
    <p>Some Content</p>
 </div>
4

2 回答 2

0

有很多方法可以编写您要查找的内容。这是您的代码的增强版本...您可以将任何您想要的 HTML 放入 innerHTML。

将来，您最好使用 Google 来阅读 Javascript 的基础知识...

<div id = "container">
</div>

<script type = "text/javascript">
MAXSLIDES = 2
slideText = 1

function slideAds() {
    container = document.getElementById("container")

    if(slideText == 1) {
        container.innerHTML = "test1"
    } else if (slideText == 2) {
        container.innerHTML = "test2"
    }

    slideText += 1
    if(slideText > MAXSLIDES) { slideText = 1 }
    setTimeout("slideAds()",5000);
}

slideAds()

</script>
于 2013-02-02T01:44:30.790 回答
0

最简单的方法之一就是创建一个您需要的 html 数组，然后遍历它，将每个字符串作为 html 插入到您的持有人 div 中：这是您的问题中的一个示例，我唯一使用 jQuery 它更容易方法。

 <!doctype html>
  <html>
  <head>
  <title>Ad Slider</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <style>
    #slider
   {
      width: 800px;
      height: 200px;
   }
   #sliderImages
   {
      width: 100%;
      height: 100%;
      border: 1px solid #06c;
  border-radius: 10px;
   }
   </style>
<script type = "text/javascript">

var arrayOfDiv = new Array();
arrayOfDiv[0] = "<div style='background-color:#FF0'>this is first div!</div>";
arrayOfDiv[1] = "<div style='background-color:#0ff'>this is second div!</div>";
arrayOfDiv[2] = "<div style='background-color:#f0f'>this is third div!</div>";

      var sliderAd = 0;
     function slideAds()
     {

        $("#sliderImages").html(arrayOfDiv[sliderAd]);
        if (sliderAd < arrayOfDiv.length-1)
        {
           sliderAd++;
        }
        else
        {
       sliderAd = 0;
        }
        setTimeout("slideAds()",5000);
     }

      $(function(){
       slideAds();  
     });
  </script>
   </head>
   <body>
   <div id = "slider">
      <div id = "sliderImages" ></div>

   </div>
   </body>
   </html>
于 2013-02-02T02:01:53.553 回答