#bg img{margin:0 5pxborder:1px solid #dddwidth:80pxheight:80px}
#bg img.on{border-color:#f00}
</style>
<div id="bg">
<img src="缩略图地址" rel="大图地址">
<img src="缩略图地址" rel="大图地址">
<img src="缩略图地址" rel="大图地址">
</div>
//引入jQuery.js
<script>
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>
<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>
最简单的办法就是在你的所有中文页面上，一般在导航位置加一个英文页面首页的超链接。这样用户点英文那个链接就进入英文页面了。同样的，在所有的英文页面导航位置都加一个中文首页链接。推荐你用图片做这两个链接，这样不会因为用户没有装对应的语言系统而出现奇怪字符。比如欧美用户一般是不会装中文系统的，页面上有中文字符的时候必然显示为乱码。网站目录当然要为中文和英文各建一个独立的目录，里面放置各自的页面了。
如果使用数据库的话，则思路是一样的。
