寻网页中JS实现的图片切换特效

2023-04-13 03:57:02JavaScript019

寻网页中JS实现的图片切换特效,第1张

我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去，也就是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>

<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>

</div>

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>

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>

不是很简单一两句话能说清楚地，需要HTML, CSS和javascript的配合。我大概说下做法，你需要自己写写试试看

首先把你的div设置style为overflow hidden

然后在div里面再添加一个div，假设叫做imgcontainer，在里面存放所有图片，图片以float: left方式显示，每个图片的宽度你是知道的，这样图片的个数*每个图片的宽度（必要的话再加上图片之间的间隔）设置为imgcontainer的总宽度。然后把div的宽度设置为显示3个图片的宽度。这样就可以保证只显示3个图片，多余的图片看不到。

然后在点击左右2个按钮的时候添加事件，每点击一次，让imgcontainer的marginLeft增加或减少一个图片的宽度（同样必要的时候加上图片之间的间隔距离），这样就使得图片列表在左右移动了。

下面是我的一个例子，跟你的需求可能不完全一样，大概做下参考：

HTML片段

<li><figure onclick="ViewPhoto(this,'aaaaa')"><div class="samplecontainer"><img src="./img/singularity.jpg" onload="javascript:DrawSampleImage(this)" border="0" ></div><figcaption class="imagename">aaaaa</figcaption></figure></li>

<li><figure onclick="ViewPhoto(this,'bbbbb')"><div class="samplecontainer"><img src="./img/pyre.jpg" onload="DrawSampleImage(this)" border="0" ></div><figcaption class="imagename">bbbbb</figcaption></figure></li>

</ol>

</div>

</div>

CSS部分

.photolist_container {

margin: 0

/*Firefox*/

width: -moz-calc(100% - 30px)

/*chrome safari*/

width: -webkit-calc(100% - 30px)

/*Standard */

width: calc(100% - 30px)