JS和HTML中的交互式滑块

Interactive slider in JS and HTML

本文关键字：交互式 HTML JS      更新时间：2023-09-26

嗨，我在 Javascript 中创建了一个滑块，但现在我想将其更改为交互式滑块，您可以在其中单击它来更改幻灯片，而不仅仅是自动的。 我已经更改了javascript，现在当我单击幻灯片时，它会出现找不到页面。 我忘了做什么。 这就是我目前所拥有的。

    <script type="text/javascript">
        var slideimages = new Array() // create new array to preload images
            slideimages[0] = new Image() // create new instance of image object
            slideimages[0].src = "Photos/slide1.jpg" // set image object src property to an image's src, preloading that image in the process
            slideimages[1] = new Image()
            slideimages[1].src = "Photos/slide2.jpg"
            slideimages[2] = new Image()
            slideimages[2].src = "photos/slide3.jpg"
    </script>   
</head> 
<body>
    <header>
        <div id="logo">
            <img id="logo" src="Photos/logo.jpg"  alt="My logo">
        </div>
    <div id="navigation_container">
 <!-- the body -->
        <div class="rectangle">
 <!-- the navigation links -->
            <ul id="navigation">
                <li><a href="#">&#10029; HOME</a></li>
                <li><a href="#">&#10029; link 2</a></li>
                <li><a href="#">&#10029; link 3</a></li>
                <li><a href="#">&#10029; link 4</a></li>
            </ul>
 <!-- end the body -->
        </div>
 <!-- end container -->
    </div>
    </header>
        <div id="content-scroll">
          <h1> Scrapbooking ideas</h1>
          <a href="javascript:slidelink()"><img src="Photos/slide1.jpg" id="slide" width=550 height=300 /></a>
          <script type="text/javascript">
            //variable that will increment through the images
            var step = 0
            var whichimage = 0
            function slideit(){
              //if browser does not support the image object, exit.
              if (!document.images)
                return
              document.getElementById('slide').src = slideimages[step].src
              whichimage = step
              if (step<2)
                step++
              else
                step=0
              //call function "slideit()" every 2.5 seconds
              setTimeout("slideit()",2500)
            }
            function slidelink(){
              if (whichimage == 0)
                window.location = "link1.htm"
              else if (whichimage == 1)
                window.location = "link2.htm"
              else if (whichimage == 2)
                window.location = "link3.htm"
            }
            slideit()
          </script>

感谢您的任何帮助琳 达

我什至不会在这里使用任何类型的<a>标签。我会将 sanfor 建议的 onclick 属性直接应用于 <img> 标签，因此您的代码将是：

<img src="Photos/slide1.jpg" id="slide" width="550" height="300" />

请注意，当我为 width 和 height 属性输入值时，我使用了双引号。这只是一个很好的做法。两种方法都将起作用。

如果我做对了，你想要这样的东西。

如果用户未单击任何链接，则自动启动，您可以使用这段代码在 10 秒后自动启动

 setTimeout(function(){slideit(0);},10000);

或者用户可以单击任何链接以在 10 秒过去之前开始使用与之关联的特定图像滑动（您可以给它任何特定时间）

setTimeout(function(){slideit(0);},10000);
             var links=document.getElementsByTagName('li');
           for(i=1;i<links.length;i++){
                  (function(val){
                      links[val].addEventListener('click',function(){
                         slideit(val);
                      });
                  })(i);
           }
            //variable that will increment through the images
            var step = 0;
            var whichimage = 0;
            function slideit(num){
              //if browser does not support the image object, exit.
              if (!document.images)
                return
              document.getElementById('slide').src = slideimages[num].src;
              if (num<2)
                num++;
              else
                num=0;
              //call function "slideit()" every 2.5 seconds
              setTimeout("slideit("+num+")",2500)
            }
相关文章：