网页图片切换特效代码（网页制作切换图片效果）

本篇文章给大家谈谈网页图片切换特效代码，以及网页制作切换图片效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、怎么用JS特效去做一个网页背景图片切换？（带略缩图）
• 2、在HTML中用css如何实现图片切换！！！
• 3、dreamweaver中图片切换的代码是什么?
• 4、高分悬赏支持淘宝网页特效的图片切换效果代码
• 5、寻网页中JS实现的图片切换特效
• 6、JavaScript 的网页图片切换代码

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

style

#bg img{margin:0 5px;border:1px solid #ddd;width:80px;height: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哈

在HTML中用css如何实现图片切换！！！

该图片切换特效实现很简单，而且兼容性很好。 

html页面如下

div class="wrapper" 

div id="focus" 

ul 

lia href="" target="_blank"img src="img/01.jpg" alt="QQ商城焦点图效果下载" //a/li 

lia href="" target="_blank"img src="img/02.jpg" alt="QQ商城焦点图效果教程" //a/li 

lia href="" target="_blank"img src="img/03.jpg" alt="jquery商城焦点图效果" //a/li 

lia href="" target="_blank"img src="img/04.jpg" alt="jquery商城焦点图代码" //a/li 

lia href="" target="_blank"img src="img/05.jpg" alt="jquery商城焦点图源码" //a/li 

/ul 

/div 

/div!-- wrapper end -- 

/body 

css样式

style type="text/css"

* {margin:0; padding:0;} 

body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;} 

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} 

.clearfix {zoom:1;} 

ul,li {list-style:none;} 

img {border:0;} 

.wrapper {width:800px; margin:0 auto; padding-bottom:50px;} 

/* qqshop focus */ 

#focus {width:800px; height:280px; overflow:hidden; position:relative;} 

#focus ul {height:380px; position:absolute;} 

#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;} 

#focus ul li div {position:absolute; overflow:hidden;} 

#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;} 

#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;} 

#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;} 

#focus .btn span.on {background:#fff;} 

#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;} 

#focus .pre {left:0;} 

#focus .next {right:0; background-position:right top;} 

/style 

js脚本

$(function() { 

var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积） 

var len = $("#focus ul li").length; //获取焦点图个数 

var index = 0; 

var picTimer; 

//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮 

var btn = "div class='btnBg'/divdiv class='btn'"; 

for(var i=0; i len; i++) { 

btn += "span/span"; 

} 

btn += "/divdiv class='preNext pre'/divdiv class='preNext next'/div"; 

$("#focus").append(btn); 

$("#focus .btnBg").css("opacity",0.5); 

//为小按钮添加鼠标滑入事件，以显示相应的内容 

$("#focus .btn span").css("opacity",0.4).mouseenter(function() { 

index = $("#focus .btn span").index(this); 

showPics(index); 

}).eq(0).trigger("mouseenter"); 

//上一页、下一页按钮透明度处理 

$("#focus .preNext").css("opacity",0.2).hover(function() { 

$(this).stop(true,false).animate({"opacity":"0.5"},300); 

},function() { 

$(this).stop(true,false).animate({"opacity":"0.2"},300); 

}); 

//上一页按钮 

$("#focus .pre").click(function() { 

index -= 1; 

if(index == -1) {index = len - 1;} 

showPics(index); 

}); 

//下一页按钮 

$("#focus .next").click(function() { 

index += 1; 

if(index == len) {index = 0;} 

showPics(index); 

}); 

//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度 

$("#focus ul").css("width",sWidth * (len)); 

//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放 

$("#focus").hover(function() { 

clearInterval(picTimer); 

},function() { 

picTimer = setInterval(function() { 

showPics(index); 

index++; 

if(index == len) {index = 0;} 

},4000); //此4000代表自动播放的间隔，单位：毫秒 

}).trigger("mouseleave"); 

//显示图片函数，根据接收的index值显示相应的内容 

function showPics(index) { //普通切换 

var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 

$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position 

//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果

$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果 

} 

}); 

用到的左右切换图片

dreamweaver中图片切换的代码是什么?

script type="text/javascript"

!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;aia.length(x=a[i])x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; ia.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))0parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])d.all) x=d.all[n]; for (i=0;!xid.forms.length;i++) x=d.forms[i][n];

for(i=0;!xd.layersid.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x d.getElementById) x=d.getElementById(n); return x;

}function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//--

/script

div onload="MM_preloadImages('images/demo02.jpg')"a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/demo02.jpg',1)"img src="images/demo01.jpg" name="Image2" width="230" height="160" border="0" id="Image2" //a/div

高分悬赏支持淘宝网页特效的图片切换效果代码

P /P

P align=center /P

TABLE id=table8 borderColor=#bdb76b cellSpacing=0 cellPadding=0 width=533 align=center border=3

TBODY

TR

TD

SCRIPT language=JavaScript

!--

var bannerAD=new Array();

var bannerADlink=new Array();

var adNum=0;

bannerAD[0]="图片地址";

bannerAD[1]="图片地址";

bannerAD[2]="图片地址";

bannerAD[3]="图片地址";

bannerAD[4]="图片地址";

bannerAD[5]="图片地址";

bannerAD[6]="图片地址";

bannerAD[7]="";preloadedimages=new Array();

for (i=1;ibannerAD.length;i++){

preloadedimages[i]=new Image();

preloadedimages[i].src=bannerAD[i];

}

function setTransition(){

if (document.all){

bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);

bannerADrotator.filters.revealTrans.apply();

}

}

function playTransition(){

if (document.all)

bannerADrotator.filters.revealTrans.play()

}

function nextAd(){

if(adNumbannerAD.length-1)adNum++ ;

else adNum=0;

setTransition();

document.images.bannerADrotator.src=bannerAD[adNum];

playTransition();

theTimer=setTimeout("nextAd()", 5000);

}

function displayStatusMsg() {

status=bannerADlink[adNum];

document.returnValue = true;

}

//--

/SCRIPT

P align=centerIMG style="FILTER: revealTrans(duration=2,transition=20)" height=400 src="" width=533 border=0 name=bannerADrotator/P

SCRIPT language=JavaScriptnextAd()/SCRIPT

/TD/TR/TBODY/TABLE

P /P

P /P

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

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

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

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

title图片展示特效/title

style

body{ margin:20px auto; width: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:700px; margin:0 auto; height:auto; text-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:50px; width:70px; left:10px; bottom:5px;" onClick="clearInterval(autoplay);moveD('l');"/

img id="imgMiddleLeft" class="imgBorder" style="height:75px; width:100px; left:110px; bottom:5px;" onClick="clearInterval(autoplay);move('l');"/

img id="imgBig" class="imgBorder" style="height:105px; width:140px; left:240px; bottom:5px;" onClick="openNewPage();"/

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

img id="imgSmallRight" class="imgBorder" style="width:70px; height:50px; left:540px; bottom:5px;" onClick="clearInterval(autoplay);moveD('r');"/

img id="imgHidden" class="imgBorder" style="width:10px; height:10px; left:-90px; bottom: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=0;iimg.length;i++){

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=0; iimgLength; i++){

start = start + 1;

if(start (dataLength-1))

start = start - dataLength;

img[i].src = ad

本篇文章给大家谈谈网页图片切换特效代码，以及网页制作切换图片效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

}

position = position + 1;

if(position (dataLength-1))

position = position - dataLength;

}

if('l' == direction){

var a = true;

for(var i=0; iimgLength; i++){

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

本篇文章给大家谈谈网页图片切换特效代码，以及网页制作切换图片效果对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

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(i19){

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(i19){

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

JavaScript 的网页图片切换代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title网页特效 首页图片切换/title

style type="text/css"

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body {

background:#fff;

color:#000000;

font:12px/1.6em Helvetica, Arial, sans-serif;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#0287CA; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

legend { display:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }

table { border-collapse:collapse; }

html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iFocus style */

#ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }

#ifocus_pic { display:inline; position:relative; float:left; width:540px; height:225px; overflow:hidden; margin:10px 0 0 10px; }

#ifocus_piclist { position:absolute; }

#ifocus_piclist li { width:550px; height:225px; overflow:hidden; }

#ifocus_piclist img { width:550px; height:225px; }

#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }

#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }

#ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }

#ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }

#ifocus_tx .normal { display:none; }

/style

script type="text/javascript"

function $(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

}

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x ypos == final_y) {

return true;

}

if (xpos final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

for(var i=0; iiFocusBtns.length; i++) {

iFocusBtns[i].className='normal';

iFocusTxs[i].className='normal';

}

}

function classCurrent(iFocusBtnID,iFocusTxID,n){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

iFocusBtns[n].className='current';

iFocusTxs[n].className='current';

}

function iFocusChange() {

if(!$('ifocus')) return false;

$('ifocus').onmouseover = function(){atuokey = true};

$('ifocus').onmouseout = function(){atuokey = false};

var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');

var listLength = iFocusBtns.length;

iFocusBtns[0].onmouseover = function() {

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (listLength=2) {

iFocusBtns[1].onmouseover = function() {

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

}

if (listLength=3) {

iFocusBtns[2].onmouseover = function() {

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

}

if (listLength=4) {

iFocusBtns[3].onmouseover = function() {

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

}

}

setInterval('autoiFocus()',3500);

var atuokey = false;

function autoiFocus() {

if(!$('ifocus')) return false;

if(atuokey) return false;

var focusBtnList = $('ifocus_btn').getElementsByTagName('li');

var listLength = focusBtnList.length;

for(var i=0; ilistLength; i++) {

if (focusBtnList[i].className == 'current') var currentNum = i;

}

if (currentNum==0listLength!=1 ){

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (currentNum==1listLength!=2 ){

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (currentNum==2listLength!=3 ){

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

if (currentNum==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==1listLength==2 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==2listLength==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

}

addLoadEvent(iFocusChange);

/script

/head

body

br /

div align="center"

div id="ifocus"

div id="ifocus_pic"

div id="ifocus_piclist" style="left:0; top:0;"

ul

lia href="#" target="_blank"img src="/edu/img/js/200909/1.jpg" alt="武林三国" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/2.jpg" alt="武林英雄" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/3.jpg" alt="商业大亨" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/4.jpg" alt="帝国远征" border="0" //a/li

/ul

/div

div id="ifocus_opdiv"/div

div id="ifocus_tx"

ul

li class="current"2008年度排名第一的网页游戏/li

li class="normal"2009年最新的网页游戏 /li

li class="normal"商业大亨，挑战亿万富翁/li

li class="normal"一款2009年不得不玩的帝国远征/li

/ul

/div

/div

div id="ifocus_btn"

ul

li class="current"img src="/edu/img/js/200909/s1.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s2.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s3.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s4.jpg" alt="" //li

/ul

/div

/div

/div

/body

/html

自己改图片链接和大小~~

关于网页图片切换特效代码和网页制作切换图片效果的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。