您好,我已经在 Javascript 中创建了一个 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="#">✭ HOME</a></li>
<li><a href="#">✭ link 2</a></li>
<li><a href="#">✭ link 3</a></li>
<li><a href="#">✭ 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/