-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

最も簡単な方法の 1 つは、必要な html の配列を作成し、ホルダー div に各文字列を html として挿入することを反復することです。仕方。

 <!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 に答える