怎么用JS特效去做一个网页背景图片切换?(带略缩图)

JavaScript029

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

<style>

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

试一下这个代码(直接替换你发出的代码):

<div id="KinSlideshow" style="visibility:hidden">

{dede:arclist row='6' orderby='pubdate' type='image.' imgwidth='600' imgheight='300'}

<a href="[field:arcurl/]" target="_blank" alt="[field:title/]">[field:image/]</a>

{/dede:arclist}

</div>

解释:

{dede:arclist } {/dede:arclist} 这是数据循环的调用

row='6' 指调用6条信息

orderby='pubdate' 指按更新时间排序

type='image.' 指有上传缩略图或勾选图片属性的文章

imgwidth='600' imgheight='300'指图片的宽和高

[field:arcurl/] 指调出的图片所在文章的链接

[field:title/] 指文章标题

[field:image/] 指图片,已包含img标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>显示缩略图</title>

</head>

<script type="text/javascript">

//显示缩略图

function DrawImage(ImgD, width_s, height_s) {

/*var width_s=139

var height_s=104

*/

var image = new Image()

image.src = ImgD.src

if (image.width >0 &&image.height >0) {

flag = true

if (image.width / image.height >= width_s / height_s) {

if (image.width >width_s) {

ImgD.width = width_s

ImgD.height = (image.height * width_s) / image.width

} else {

ImgD.width = image.width

ImgD.height = image.height

}

} else {

if (image.height >height_s) {

ImgD.height = height_s

ImgD.width = (image.width * height_s) / image.height

} else {

ImgD.width = image.width

ImgD.height = image.height

}

}

}

/*else{

ImgD.src=""

ImgD.alt=""

}*/

}

</script>

</head>

<body>

<div>

<div>

<div>

<img src="D:\\02.9.3.3\1.jpg" align="center"

onclick="DrawImage(this,200,200)" alt="点击我!">

</div>

</div>

</div>

</body>

</html>