0

ユーザーが閲覧できるさまざまな画像のスライドショーを表示する Web ページを作成しました。ただし、関数を作成する必要があるため、次のような URL をクリックすると、

http://www.slideshow.com/image3

ページが読み込まれると、スライドショーに「画像 3」が自動的に表示されます。AJAX、ASP、およびさまざまな jQuery および .js ファイルを使用しようとして、これを何日も調査しましたが、調査したものは私の目的に合っていないようです。JavaScriptだけでこれを行う簡単な方法はありますか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Slideshow</title>


<script type="text/javascript">
//preloading all the images into a cache
//to add more slides, add extra variable declarations
var img1 = new Image()
img1.src = "img/1.jpg"
var img2 = new Image()
img2.src = "img/2.jpg"
var img3 = new Image()
img3.src = "img/3.jpg"
var img4 = new Image()
img4.src = "img/4.jpg"
var img5 = new Image()
img5.src = "img/5.jpg"
var img6 = new Image()
img6.src = "img/6.jpg"
var img7 = new Image()
img7.src = "img/7.jpg"
var img8 = new Image()
img8.src = "img/8.jpg"
var img9 = new Image()
img9.src = "img/9.jpg"

var imgNum = 1
var x = 0
var width
//function that cycles through different images
function slideshow()
{
if (!document.images)
    return
if (imgNum < 9) // <-- If you add or subtract images in the slideshow, you need to change this number to the amount of   
    imgNum++         //images in the slideshow so it will loop correctly.
        else
            imgNum=1
document.images.slide.src=eval("img" + imgNum + ".src")
}

//function that crops the slideshow image to the screen size and centers it
function crop()
{
if (document.getElementById("slide").width > screen.width)
{
width = document.getElementById("slide").width
width = -1*((width - screen.width)/2)
    document.getElementById("slide").style.marginLeft= width +"px"
document.getElementById("slide").style.marginRight= width + "px"
}
}

//function that evaluates a number passed to it and returns the corresponding image in /img
function imgSelect(x)
{
imgNum = x
document.images.slide.src=eval("img" + imgNum + ".src")
}

//function that hides or shows the menu
function hide(object)
{
if (object.style.display=="none")
    object.style.display="block"
else
    object.style.display="none"
}

//function that changes the menu text from "hide menu" to "show menu" and vice versa
function menuChange(object)
{
if (object.innerHTML=="hide menu")
    object.innerHTML="show menu"
else
    object.innerHTML="hide menu"
}

//function that allows a link to do both the hide(object) function and the menuChange(object) function with once click
function doBoth(object1, object2)
{
hide(object1)
menuChange(object2)
}
</script>

</head>

<body onload="crop()">

<center>
<div style="background-color:#87D300; padding:5px;">
<a id="button" href="javascript:doBoth(document.getElementById('menu'),document.getElementById('button'))" style="color:#FFFFFF">hide menu</a>
</div>
</center>

<img src="img/logo.png"/>

<div id="title">
<h1 style="position:relative; top:-31px; right:-133px">Slideshow</h1>
</div>

<div id="menu" class="margin">
    <h2>Designs</h2>
    <ul>
        <li><a href="javascript:imgSelect(1)">Splash Page:1</a></li>
        <li><a href="javascript:imgSelect(2)">Splash Page:2</a></li>
        <li><a href="javascript:imgSelect(3)">Splash Page:3</a></li>
        <li><a href="javascript:imgSelect(4)">Splash Page:4</a></li>

        <li class="new"><a href="javascript:imgSelect(5)">Book: 1</a></li>
        <li><a href="javascript:imgSelect(6)">Book: 2</a></li>
        <li><a href="javascript:imgSelect(7)">Book: Rollover</a></li>
        <li><a href="javascript:imgSelect(8)">Book: Clicked</a></li>
        <li><a href="javascript:imgSelect(9)">Book: Clicked, no Email</a></li>
    </ul>
</div>

</br>

<center>
<div id="mySlides" style="width:screen.width; overflow:hidden;">
<img src="img/1.jpg" onclick="slideshow()" id="slide"/>
</div>
</center>

</body>
</html>
4

1 に答える 1