javascript - JS 和 HTML 中的交互式 slider

标签 javascript html

您好,我已经在 J​​avascript 中创建了一个 slider ,但我现在想将其更改为交互式 slider ,您可以在其中单击它来更改幻灯片,而不仅仅是自动的。我已经更改了 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>在这里标记。我会申请 onclick sanfor 直接向 <img> 建议的属性标记,因此您的代码将是:

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

请注意,我在为 width 输入值时使用了双引号和 height属性。这只是一个很好的做法。两种方法都行得通。

关于javascript - JS 和 HTML 中的交互式 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27883092/

相关文章:

html - 制作图片链接容器高度

jquery - 选择元素中的所有选项下划线/删除线

javascript - 如何使用变量在 Javascript 中构造正则表达式字符串

javascript - JQuery 中的动画雾/模糊效果

javascript - 如何比较格式为 dd/mm/yyyy hh :mm:ss in jquery 的两个日期

javascript - 使用 Blazor Server 时如何添加客户端 DOM javascript 事件处理程序?

python - Django 创建帖子

html - 最大宽度的媒体查询不激活 CSS 样式

html - 当它包含 & 时,你将如何制作一个有效的 URL 字符串

javascript - 动态创建回调