javascript做图片轮换 的问题 。document.getElementById()。。。

JavaScript018

javascript做图片轮换 的问题 。document.getElementById()。。。,第1张

change(dd)的意思就是如果用change('1.gif')调用,那么dd就是'1.gif',如果用change('2.gif')调用,则dd就是'2.gif',就是这么简单。

document.getElementById("photo") 这个当然啦,你要操作的是图片,又不是其他。没看见下面的p.src吗?只有img标签才有src属性,Div哪来的src?

我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去,也就是onMouseOver。是停不下来的,会一直滚下去,因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。

js css image都是调用的。我都写到页面里了,你自己改下。图片地址我没改。本地测试的。自己换成你的图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>图片展示特效</title>

<style>

body{ margin:20px autowidth:100%height:auto}

#dHomePageCarousel {

height:221px

width:670px

position:relative

margin:40px auto

}

#dLocalHomesCarousel {

height:131px

margin:0px 2px 3px 1px

overflow:hidden

position:relative

}

.divCarouselInfo {

color:#3C404E

font-size:12px

width:639px

height:64px

line-height:16px

margin-right:15px

padding-top:10px

position:relative

}

.imgBorder{

border:2px solid #fff

position:absolute

cursor:pointer

}

.imgBorder:hover {

border:2px solid #FFAA55

cursor:pointer

position:absolute

}

.btnCarouselLT {

background:url("../images/btn_nav_carousel.png") no-repeat scroll left top transparent

display:block

height:41px

overflow:hidden

position:absolute

cursor:pointer

top:17px

width:40px

}

.btnCarouselRT {

background:url("../images/btn_nav_carousel.png") no-repeat scroll right top transparent

display:block

height:41px

overflow:hidden

position:absolute

cursor:pointer

top:17px

width:40px

}

img {

border:medium none

}

.author{ width:700pxmargin:0 autoheight:autotext-align:center}

</style>

</head>

<body onLoad="clearInterval(autoplay)">

<!-- 头开始 -->

<!-- 滚动房源广告开始 -->

<div id="dHomePageCarousel" style="padding-left:15px">

<div id=dLocalHomesCarousel>

<img id="imgSmallLeft" class="imgBorder" style="height:50pxwidth:70pxleft:10pxbottom:5px" onClick="clearInterval(autoplay)moveD('l')"/>

<img id="imgMiddleLeft" class="imgBorder" style="height:75pxwidth:100pxleft:110pxbottom:5px" onClick="clearInterval(autoplay)move('l')"/>

<img id="imgBig" class="imgBorder" style="height:105px width:140pxleft:240pxbottom:5px" onClick="openNewPage()"/>

<img id="imgMiddleRight" class="imgBorder" style="height:75pxwidth:100px left:410px bottom:5px" onClick="clearInterval(autoplay)move('r')"/>

<img id="imgSmallRight" class="imgBorder" style="width:70pxheight:50pxleft:540pxbottom:5px" onClick="clearInterval(autoplay)moveD('r')"/>

<img id="imgHidden" class="imgBorder" style="width:10pxheight:10pxleft:-90pxbottom:5px"/>

</div>

<script type="text/javascript">

function AdItem(Photo,url) {

this.Photo = Photo

this.url = url

}

var ad = new Array()

ad[0] = new AdItem('images/1.jpg','#')ad[1] = new AdItem('images/2.jpg','#')ad[2] = new AdItem('images/3.jpg','#')ad[3] = new AdItem('images/4.jpg','#')ad[4] = new AdItem('images/5.jpg','#')ad[5] = new AdItem('images/6.jpg','#')

var img = new Array()

img[0] = document.getElementById("imgSmallLeft")

img[1] = document.getElementById("imgMiddleLeft")

img[2] = document.getElementById("imgBig")

img[3] = document.getElementById("imgMiddleRight")

img[4] = document.getElementById("imgSmallRight")

img[5] = document.getElementById("imgHidden")

var position = 0

for(i=0i<img.lengthi++){

img[i].src = ad[i].Photo

}

var cur = 2

adname.href = ad[2].url

</script>

</div>

<script type="text/javascript">

function roll(direction){

var imgLength = img.length

var dataLength = ad.length

var start = position

if('r' == direction){

for(var i=0i<imgLengthi++){

start = start + 1

if(start >(dataLength-1))

start = start - dataLength

img[i].src = ad[start].Photo

}

position = position + 1

if(position >(dataLength-1))

position = position - dataLength

}

if('l' == direction){

var a = true

for(var i=0i<imgLengthi++){

if(a){

start = start - 1

if(start <0){

start = start + dataLength

a = false

}

if(start <(dataLength-1)){

a = false

}

}else{

start = start + 1

if(start >(dataLength-1)){

start = start - dataLength

a = true

}

}

//alert(position + " === " + i + " === " + start)

img[i].src = ad[start].Photo

if(start == (dataLength-1)){

start = -1

}

}

position = position - 1

if(position <0)

position = position + dataLength

}

}

function right(){

i++

var img0H = parseFloat(img[0].style.height)

var img0W = parseFloat(img[0].style.width)

var img0L = parseFloat(img[0].style.left)

var img1H = parseFloat(img[1].style.height)

var img1W = parseFloat(img[1].style.width)

var img1L = parseFloat(img[1].style.left)

var img2H = parseFloat(img[2].style.height)

var img2W = parseFloat(img[2].style.width)

var img2L = parseFloat(img[2].style.left)

var img3H = parseFloat(img[3].style.height)

var img3W = parseFloat(img[3].style.width)

var img3L = parseFloat(img[3].style.left)

var img4H = parseFloat(img[4].style.height)

var img4W = parseFloat(img[4].style.width)

var img4L = parseFloat(img[4].style.left)

var img5H = parseFloat(img[5].style.height)

var img5W = parseFloat(img[5].style.width)

var img5L = parseFloat(img[5].style.left)

//解决IE兼容性问题

if(navigator.userAgent.indexOf("MSIE")>0 &&i%2==0) {

img1W = img1W + 1

img2H = img2H + 1

img2L = img2L + 1

img3H = img3H + 1

img3L = img3L + 1

img4L = img4L + 1

img4W = img4W + 1

}

img[0].style.height = (img0H - 2).toString() + "px"

img[0].style.left = (img0L - 5).toString() + "px"

img[0].style.width = (img0W - 3).toString() + "px"

img[1].style.height = (img1H - 1).toString() + "px"

img[1].style.left = (img1L - 5).toString() + "px"

img[1].style.width = (img1W - 1.5).toString() + "px"

img[2].style.height = (img2H - 1.5).toString() + "px"

img[2].style.left = (img2L - 6.5).toString() + "px"

img[2].style.width = (img2W - 2).toString() + "px"

img[3].style.height = (img3H + 1.5).toString() + "px"

img[3].style.left = (img3L - 8.5).toString() + "px"

img[3].style.width = (img3W + 2).toString() + "px"

img[4].style.height = (img4H + 1).toString() + "px"

img[4].style.left = (img4L - 6.5).toString() + "px"

img[4].style.width = (img4W + 1.5).toString() + "px"

img[5].style.height = (img5H + 2).toString() + "px"

img[5].style.left = (img5L - 5).toString() + "px"

img[5].style.width = (img5W + 3).toString() + "px"

//alert(img[1].style.width)

if(i>19){

clearInterval(hide)

reset()

roll('r')

isRunning = 'false'

}

}

function left(){

i++

var img0H = parseFloat(img[0].style.height)

var img0W = parseFloat(img[0].style.width)

var img0L = parseFloat(img[0].style.left)

var img1H = parseFloat(img[1].style.height)

var img1W = parseFloat(img[1].style.width)

var img1L = parseFloat(img[1].style.left)

var img2H = parseFloat(img[2].style.height)

var img2W = parseFloat(img[2].style.width)

var img2L = parseFloat(img[2].style.left)

var img3H = parseFloat(img[3].style.height)

var img3W = parseFloat(img[3].style.width)

var img3L = parseFloat(img[3].style.left)

var img4H = parseFloat(img[4].style.height)

var img4W = parseFloat(img[4].style.width)

var img4L = parseFloat(img[4].style.left)

var img5H = parseFloat(img[5].style.height)

var img5W = parseFloat(img[5].style.width)

var img5L = parseFloat(img[5].style.left)

//解决IE兼容性问题

if(navigator.userAgent.indexOf("MSIE")>0 &&i%2==0) {

img0W = img0W + 1

img1H = img1H + 1

img1L = img1L + 1

img2H = img2H + 1

img2L = img2L + 1

img3L = img3L + 1

img3W = img3W + 1

}

img[0].style.height = (img0H + 1).toString() + "px"

img[0].style.left = (img0L + 5).toString() + "px"

img[0].style.width = (img0W + 1.5).toString() + "px"

img[1].style.height = (img1H + 1.5).toString() + "px"

img[1].style.left = (img1L + 6.5).toString() + "px"

img[1].style.width = (img1W + 2).toString() + "px"

img[2].style.height = (img2H - 1.5).toString() + "px"

img[2].style.left = (img2L + 8.5).toString() + "px"

img[2].style.width = (img2W - 2).toString() + "px"

img[3].style.height = (img3H - 1).toString() + "px"

img[3].style.left = (img3L + 6.5).toString() + "px"

img[3].style.width = (img3W - 1.5).toString() + "px"

img[4].style.height = (img4H - 2).toString() + "px"

img[4].style.left = (img4L + 5).toString() + "px"

img[4].style.width = (img4W - 3).toString() + "px"

img[5].style.height = (img5H + 2).toString() + "px"

img[5].style.left = (img5L + 5).toString() + "px"

img[5].style.width = (img5W + 3).toString() + "px"

//alert(img[1].style.left)

if(i>19){

clearInterval(hide)

reset()

roll('l')

isRunning = 'false'

}

}

var isRunning

function move(direction){

//alert(isRunning)

if(isRunning != 'udefined' &&isRunning == 'true')

return

frequency = 20

if(navigator.userAgent.indexOf("MSIE")>0) {

frequency = 15

}

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){

frequency = 20

}

i = 0

if(direction == 'r'){

cur = cur + 1

img[5].style.left = "640px"

hide = setInterval("right()", frequency)

isRunning = 'true'

}

if(direction == 'l'){

cur = cur - 1

img[5].style.left = "-90px"

var pos = position - 1

if(pos <0)

pos = pos + ad.length

img[5].src = ad[pos].Photo

hide = setInterval("left()", frequency)

isRunning = 'true'

}

if(cur >(ad.length - 1))

cur = 0

if(cur <0)

cur = ad.length - 1

//alert(cur)

adname.href = ad[cur].url

if(navigator.userAgent.indexOf("Firefox")>0){

adname.textContent = ad[cur].name

adtel.textContent = ad[cur].phone

adaddr.textContent = ad[cur].address

adprice.textContent = ad[cur].price

adtime.textContent = ad[cur].time

} else {

adname.innerText = ad[cur].name

adtel.innerText = ad[cur].phone

adaddr.innerText = ad[cur].address

adprice.innerText = ad[cur].price

adtime.innerText = ad[cur].time

}

}

function moveC(direction){

if(isRunning != 'true'){

move(direction)

clearInterval(movec)

}

}

function moveD(direction){

move(direction)

if('r' == direction){

movec = setInterval("moveC('r')",5)

} else {

movec = setInterval("moveC('l')",5)

}

}

function reset(){

img[0].style.width = "70px"

img[0].style.height = "50px"

img[0].style.left = "10px"

img[1].style.width = "100px"

img[1].style.height = "75px"

img[1].style.left = "110px"

img[2].style.width = "140px"

img[2].style.height = "105px"

img[2].style.left = "240px"

img[3].style.width = "100px"

img[3].style.height = "75px"

img[3].style.left = "410px"

img[4].style.width = "70px"

img[4].style.height = "50px"

img[4].style.left = "540px"

img[5].style.width = "10px"

img[5].style.height = "10px"

img[5].style.left = "-90px"

}

autoplay = setInterval("move('r')",2000)

function openNewPage(){

window.open(ad[cur].url)

}

</script>

<!-- 滚动房源广告结束 -->

</body>

</html>