javascript制作图片切换_javascript条件运算符切换图片-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript创建的图片轮播案例。通过简单的三步操作：定义CSS样式、搭建HTML结构和编写JavaScript行为，实现了图片的平滑切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript制作美术馆

本文使用javascrip，css，html制作一个图片切换案例。html作为网页的结构搭建，css作为样式表现，javascript控制网页的行为。案例制作分为三个步骤。

1。css样式的构建layout.css。

/* CSS Document */

body

{

font-family : "Helvetica" ,"Arial" ,sans-serif ;

color : #333 ;

background-color : #ccc ;

margin : 1em 10% ;

}

{

color : #333 ;

background-color : transparent ;

}

{

color : #c60 ;

background-color : transparent ;

font-family : bold ;

text-decoration : none ;

}

ul{

padding : 0 ;

}

{

float : left ;

padding : 1em ;

list-style : none;

}

#imagegallery

{

list-style : none ;

}

#imagegallery li

{

display : inline ;

}

#imagegallery li a img

{

border : 0 ;

}

2.编写html文件gallery.html，搭建网页的结构

<html>

<head>

</head>

<body>

<h1>Snapshots</h1>

</ul>

</body>

</html>

3。编写javascript文件showpic.js控制网页的行为

// JavaScript Document

addLoadEvent(preparePlace);

addLoadEvent(prepareGallery);

function showPic(whichpic)

{

var source=whichpic.getAttribute("href");

var placeholder=document.getElementById("placeholder");

placeholder.setAttribute("src",source);

var title=whichpic.getAttribute("title");

var description=document.getElementById("description");

description.childNodes[0].nodeValue=title;

}

function prepareGallery()

{

if(!document.getElementsByTagName) return false;

if(!document.getElementById) return false;

if(!document.getElementById("imagegallery")) return false;

var gallery=document.getElementById("imagegallery");

var links=gallery.getElementsByTagName("a");

for(var i=0;i<links.length;i++)

{

links[i].onclick=function()

{

showPic(this);

return false;

}

function addLoadEvent(func)

{

var oldonload=window.onload;

if(typeof window.onload!='function')

{

window.onload=func;

}

else

{

window.onload=function()

{

oldonload();

func();

}

function inserAfter(newElement,targetElement)

{

var parent=targetElement.parentNode;

if(parent.lastChild==targetElement)

{

parent.appendChild(newElement);

}

else{

parent.insertBefore(newElement,targetElement.nextSibling)

}

function preparePlace()

{

var place=document.createElement("img");

place.setAttribute("id","placeholder");

place.setAttribute("src","images/place.JPG");

place.setAttribute("width","400")

place.setAttribute("height","300")

var description=document.createElement("p");

description.setAttribute("id","description");

var desctext=document.createTextNode("select an pic");

description.appendChild(desctext);

var gallery=document.getElementById("imagegallery");

inserAfter(place,gallery);

inserAfter(description,place);

}