怎么用JS特效去做一个网页背景图片切换？（带略缩图）

2023-02-28 22:01:02JavaScript08

怎么用JS特效去做一个网页背景图片切换？（带略缩图）,第1张

<style>

#bg img{margin:0 5pxborder:1px solid #dddwidth:80pxheight:80px}

#bg img.on{border-color:#f00}

</style>

</div>

//引入jQuery.js

var $mg=$("#bg").find("img")

$mg.click(function(){

var big=$(this).attr("rel")

$("body").css("background","url("+big+") 50% 50% no-repeat")

$(this).addClass("on").siblings("img").removeClass("on")

})

</script>

上面就是最简单的背景切换加缩略图，需要引入jQuery哈

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

<!doctype html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

window.onload = function (){

function getClass(className){

var get = document.getElementsByTagName('*')

var arr = []

for(var i = 0 i < get.length i ++){

if(get[i].className == className){

arr.push(get[i])

}

return arr

}

function lp(lp1,lp2,lp3,lp4,lp5,lp6,lp7){

var wrap = getClass(lp1)[0]

var ul = getClass(lp2)[0].getElementsByTagName('ul')[0]

var li = ul.getElementsByTagName('li')

var mar_r = 10 //margin-right

var w = li[0].offsetWidth + mar_r

var l = li.length

var max = w * l

var setIndex = 0

var lp_aleft = getClass(lp3)[0]

var lp_img = getClass(lp4)[0]

var img = lp_img.getElementsByTagName('img')[0]

var font = lp_img.getElementsByTagName('font')[0]

var lp_aright = getClass(lp5)[0]

var lp_zhezhao = getClass(lp6)[0]

var lp_wrap = getClass(lp7)[0]

var lp_iw = 540 //为弹出元素宽 ps：隐藏元素获取不到宽高，估写死值

var lp_ih = 400 //为弹出元素高

//获取屏幕宽高

var wid = document.body.clientWidth | document.documentElement.clientWidth

var hei = document.body.clientHeight | document.documentElement.clientHeight

//求值居中

function left(n,w){

return (n - w) / 2

}

function top(n,h){

return (n - h) / 2

}

lp_img.style.left = left(wid,lp_iw) + 'px'

lp_img.style.top = top(hei,lp_ih) + 'px'

lp_aleft.style.top = top(hei,lp_aleft.offsetHeight) + 'px'

lp_aright.style.top = top(hei,lp_aleft.offsetHeight) + 'px'

lp_zhezhao.style.width = wid + 'px'

lp_zhezhao.style.height = hei + 'px'

//窗口改变大小

window.onresize = function (){

console.log(lp_img.offsetWidth)

wid = document.body.clientWidth | document.documentElement.clientWidth

hei = document.body.clientHeight | document.documentElement.clientHeight

lp_img.style.left = left(wid,lp_img.offsetWidth) + 'px'

lp_img.style.top = top(hei,lp_img.offsetHeight) + 'px'

lp_aleft.style.top = top(hei,lp_aleft.offsetHeight) + 'px'

lp_aright.style.top = top(hei,lp_aleft.offsetHeight) + 'px'

lp_zhezhao.style.width = wid + 'px'

lp_zhezhao.style.height = hei + 'px'

}

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

ul.appendChild(li[i].cloneNode(true))

}

for(var i = 0 i < li.length i ++){

li[i].index = i

li[i].onclick = function (){

_this = this

img.src = this.getElementsByTagName('img')[0].src

font.innerHTML = this.getElementsByTagName('img')[0].alt

lp_wrap.style.display = 'block'

lp_zhezhao.style.display = 'block'

lp_aleft.onclick = function (){

_this.index --

if(_this.index < 1){

_this.index = 0

alert('当前第一张')

}

console.log(_this.index)

img.src = li[_this.index].getElementsByTagName('img')[0].src

font.innerHTML = li[_this.index].getElementsByTagName('img')[0].alt

}

lp_aright.onclick = function (){

_this.index ++

if(_this.index >= li.length){

_this.index = li.length - 1

alert('最后一张')

}

img.src = li[_this.index].getElementsByTagName('img')[0].src

font.innerHTML = li[_this.index].getElementsByTagName('img')[0].alt

}

var stop = setInterval(setl,30)

function setl(){

if(setIndex >= max){

setIndex = 0

}

setIndex ++

ul.style.left = -setIndex + 'px'

}

wrap.onmouseover = function (){

clearInterval(stop)

}

wrap.onmouseout = function (){

stop = setInterval(setl,30)

}

new lp('lp_wrap','lp_main','lp_aleft','lp_aimg','lp_aright','zhezhao','lp_alert')

}

*{ margin:0 padding:0 list-style:none }

.clear{ clear:both }

.lp_wrap{ width:900px margin:0 auto }

.lp_main{ width:835px margin-left:17px height:188px overflow:hidden float:left position:relative }

.lp_main ul{ width:1000em position:absolute }

.lp_main ul li{ float:left margin-right:10px }

.lp_main ul li img{ width:253px height:188px }

.lp_left{ background:url(../images/left_arrow.jpg) 0 50% no-repeat width:15px height:188px float:left }

.lp_right{ background:url(../images/right_arrow.jpg) 0 50% no-repeat width:15px height:188px float:right }

.zhezhao{ display:none background:#000 opacity:0.3 position:fixed top:0 left:0 z-index:233}

.lp_aleft{ background:url(../images/aleft.png) no-repeat width:35px cursor:pointer height:63px margin-left:165px }

.lp_alert{height:0 width:1000px margin:0 auto display:none}

.lp_aimg,.lp_aleft,.lp_aright{ position:absolute z-index:234}

.lp_aright{ background:url(../images/aright.png) no-repeat width:35px cursor:pointer height:63px margin-left:800px }

.lp_aimg span{ width:540px height:30px background:#000 display:block opacity:0.5 position:absolute margin-top:-33px }

.lp_aimg font{ width:540px height:30px margin-top:-33px display:block color:#fff font-size:14px position:absolute line-height:30px text-align:center }

以前练习的时候做的，你看看，合胃口?

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：电脑蓝屏f4怎么回事win7 如何解决

# 下一篇：苹果笔记本怎么清理电脑垃圾呢？