JS特效 按钮实现图片左右轮换(总共4张图,img1.jpg,img2.jpg,img3.jpg,img4.jpg)

JavaScript014

JS特效 按钮实现图片左右轮换(总共4张图,img1.jpg,img2.jpg,img3.jpg,img4.jpg),第1张

var picID = 0//换成网页中那幅图在picURL中的序号(记得要从0开始数)

var picURL = ["images/img1.jpg","images/img2.jpg","images/img3.jpg"]//将图片链接地址放进来,数量随意

function showimg(str){

 if(str=="L"){

if(picID==0){

 picID = picURL.length-1

 document.getElementById("advimg").src = picURL[picID]

}else{

 document.getElementById("advimg").src = picURL[--picID]

}

 }else if(str=="R"){

if(picID==(picURL.length-1)){

 picID = 0

 document.getElementById("advimg").src = picURL[picID]

}else{

 document.getElementById("advimg").src = picURL[++picID]

}

 }

}

<html>

<head>

<title>图片的显示</title>

<style type="text/css">

<!--

#bg1 {

position:absolute

width:162px

height:115px

z-index:1

}

#bg2 {

position:absolute

width:162px

height:115px

z-index:1

left: 1px

top: 1px

display:none

}

#b1 {

position:absolute

width:22px

height:21px

z-index:2

left: 60px

top: 201px

}

#b2 {

position:absolute

width:22px

height:24px

z-index:3

left: 84px

top: 203px

}

-->

</style>

<script>

function showbg1(){

document.getElementById("bg1").style.display="block"

document.getElementById("bg2").style.display="none"

}

function showbg2(){

document.getElementById("bg1").style.display="block"

document.getElementById("bg2").style.display="block"

}

</script>

</head>

<body>

<div id="bg1"><img src="mao.jpg" width="160" height="180" />

<div id="bg2"><img src="haitun.jpg" width="160" height="180" /></div>

</div>

<p></p>

<div id="b1" onmousemove="showbg1()"><img src="b1.png" width="22" height="20" /></div>

<div id="b2" onmousemove="showbg2()"><img src="b2.png" width="18" height="19" /></div>

</body>

</html>

JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。

比如图片切换,渐变等等,它为网页活跃了网页的气氛,有时候会起到一定的亲切力。

JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。

扩展资料:

能够具有交互性,能够包含更多活跃的元素,就有必要在网页中嵌入其它的技术。如:Javascript、VBScript、Document Object Model(DOM,文档对象模型)、Layers和 Cascading Style Sheets(CSS,层叠样式表)。

JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。