本文目录一览：
- 1、JS自动切换图片代码问题
- 2、求一个图片轮换JS效果代码
- 3、图片自动切换的JS代码
- 4、JavaScript 的网页图片切换代码
- 5、求纯js 图片切换代码，最好带注释！
- 6、JS实现点击一个按钮更换图片
JS自动切换图片代码问题
js代码如下，里面有详细解释：
script type="text/javascript"
/**
1. 图片自动切换(更改img标签src属性)
a.制作一个切换函数
b.加载事件，完成间歇函数功能
2. 完成图片停止功能
3. 如果鼠标移出图片，则间隙函数要调动起来
4. 图片切换的时候对应的序号需要高亮显示
5. 当鼠标"移入"一个序号，则图片要显示对应序号的图片
当前序号也需要被高亮显示
序号有鼠标移入事件
6. 鼠标从序号移出要继续图片切换
*/
//图片切换功能
var i = 1;
function pic_change(){
//图片如果到达最后一个张，则计数器清空、归位
i++;
if(i8){
i=1;
}
//全部序号"暗"下来
var lis = document.getElementsByTagName('li');
for(var j=0; jlis.length; j++){
lis[j].style.background="green";
}
//当前序号背景色高亮显示
document.getElementById('xu'+i).style.background="yellow";
var pic_obj = document.getElementById('pic');
pic_obj.src=i+".jpg";
}
//加载事件函数，完成页面每次加载间歇函数的制作
var timer = "";
function jia(){
clearInterval(timer);
timer = setInterval('pic_change()', 1000);
}
//停止图片切换
function stop_pic(){
clearInterval(timer);
}
//鼠标移入序号发生变化的函数
//1显示当前序号对应图片
//2当前序号高亮
//3鼠标移出图片要继续切换
function xu_change(n){
//显示图片
document.getElementById('pic').src=n+".jpg";
//立即停止间隙函数
stop_pic();
//序号背景色发生变化
//全部序号"暗"下来
var lis = document.getElementsByTagName('li');
for(var j=0; jlis.length; j++){
lis[j].style.background="green";
}
//当前序号背景色高亮显示
document.getElementById('xu'+n).style.background="yellow";
//让图片切换与当前序号一致 计数器与当前序号一致就可以
i=n;
}
/script
求一个图片轮换JS效果代码
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
style type="text/css"
* { margin:0; padding:0; word-break:break-all; }
ul, li { list-style:none; }
#focus_change_btn .current { background:url() no-repeat 37px 8px;}
#focus_change_btn .current img { border-color:#EEE; }
#focus_change_btn li { display:inline; float:right; margin:0 10px; padding-top:12px; }
#focus_change_btn li img { width:20px; height:20px; border:2px solid #888; }
#abb { width:200px; height:200px;}
#abb li { display:inline; margin:40px 20px; }
#abb li img { width:200px; height:50px; border:0;}
/style
script type="text/javascript"
function $(id) { return document.getElementById(id); }
/*位移算法，参数分别是:ID名，水平位移，垂直位移，和延迟时间（就是漂移时间）；每次移动的距离加上一张图片的width或者height就行。*/
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);//ceil(x)对x进行上舍入
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);
}
/*清除CSS，方便后面添加*/
function classNormal(){
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; ifocusBtnList.length; i++) {
focusBtnList[i].className='';
}
}
/*修改下面的图片顺序*/
function changeAbb(i,j,k){
var abblist = $('abb').getElementsByTagName('img');
abblist[i].src='images/t1.gif';
abblist[j].src='images/t2.gif';
abblist[k].src='images/t3.gif';
}
/*给触发按钮添加事件*/
function focusChange() {
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
focusBtnList[0].onmouseover = function() {
moveElement('focus_change_list',0,0,5);
classNormal();
focusBtnList[0].className='current';
changeAbb(0,1,2);
}
focusBtnList[1].onmouseover = function() {
moveElement('focus_change_list',-250,0,5);
classNormal();
focusBtnList[1].className='current';
changeAbb(1,0,2);
}
focusBtnList[2].onmouseover = function() {
moveElement('focus_change_list',-500,0,5);
classNormal()
focusBtnList[2].className='current';
changeAbb(1,2,0);
}
}
window.onload=function(){
focusChange();
}
/script
/head
body
div style="width:410px;height:245px;position:relative;margin:0;padding:0; border:1px solid blue;"
div id="focus_change" style="position:relative; width:250px; height:245px; overflow:hidden; margin:0px 0px 0px 80px;"
div id="focus_change_list" style="top:0; left:0;position:absolute; width:760px; height:245px; "
ul
li style="float:left;" img style="width:250px; height:245px; border:none; " src=""/ /li
li style="float:left;"img style="width:250px; height:245px; border:none; " src=""/ /li
li style="float:left;"img style="width:250px; height:245px; border:none; " src=""/ /li
/ul
/div
/div
div style="position:absolute; width:410px; height:30px; top:200px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;"/div
div id="focus_change_btn" style="position:absolute; width:410px; height:60px; top:190px; left:0;"
ul style="padding-left:5px;"
li class="current"a href="#"img src="" alt="" //a/li
lia href="#"img src="" alt="" //a/li
lia href="#"img src="" alt="" //a/li
/ul
/div
/div
div
ul id="abb"
lia href="#"img src="" alt="" //a/li
lia href="#"img src="" alt="" //a/li
lia href="#"img src="" alt="" //a/li
/ul
/div
/body
/html
/*楼主的图片我看不清楚，我用百度中心的图替代一下。CSS改成自己需要的，我中间加了个遮蔽层，楼主觉得不好看可以删掉*/
图片自动切换的JS代码
试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
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
自己改图片链接和大小~~
求纯js 图片切换代码，最好带注释！
现在所有图片都是放在images文件家里的。
你的图片要是不是放在images文件夹里的话，比如要放在tupian文件夹里，你就在dw里替换所有images字符为tupian，就能显示小箭头了啊
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
!-- saved from url=(0055) --
HTMLHEADTITLE无标题文档/TITLE
META http-equiv=Content-Type content="text/html; charset=gb2312"
STYLE type=text/cssBODY {
TEXT-ALIGN: center
}
TD {
FONT-SIZE: 12px
}
#textslide {
COLOR: #333333
}
/STYLE
META content="MSHTML 6.00.6000.16825" name=GENERATOR/HEAD
BODY
TABLE cellSpacing=0 cellPadding=0 width=325 border=0
TBODY
TR vAlign=top
TD colSpan=3A onmouseover=tu_ove() style="CURSOR: hand"
onclick=gotoshow() onmouseout=ou()IMG height=190 src="images/ad-01.jpg"
width=325 border=0 name=slide/A/TD/TR
TR
TD class=white align=middle width=229 bgColor=#f4f4f4 height=19/TD
TD width=1 bgColor=#7c7c7c
DIV style="POSITION: relative"
DIV style="POSITION: absolute; TOP: 10px"
TABLE cellSpacing=0 cellPadding=0 width=95 border=0
TBODY
TR vAlign=top align=middle
TD width=19 height=0
DIV style="POSITION: relative"
DIV id=xiaotu1
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan1
height=3 src="images/bian1.gif" width=10 border=0/DIV/DIV/TD
TD width=19 height=0
DIV style="POSITION: relative"
DIV id=xiaotu2
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan2
height=3 src="images/bian1.gif" width=10/DIV/DIV/TD
TD width=19 height=0
DIV style="POSITION: relative"
DIV id=xiaotu3
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan3
height=3 src="images/bian1.gif" width=10/DIV/DIV/TD
TD width=19 height=0
DIV style="POSITION: relative"
DIV id=xiaotu4
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan4
height=3 src="images/bian1.gif" width=10/DIV/DIV/TD
TD width=19 height=0
DIV style="LEFT: 1px; POSITION: relative"
DIV id=xiaotu5
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan5
height=3 src="images/bian1.gif"
width=10/DIV/DIV/TD/TR/TBODY/TABLE/DIV/DIV/TD
TD width=95 height=19
TABLE cellSpacing=0 cellPadding=0 width=95 border=0
TBODY
TR vAlign=top
TD class=homejdboder width=19 height=19A onmouseover=ove(0)
style="CURSOR: hand" onmouseout=ou()IMG height=19
src="images/1.gif" width=19 border=0/A/TD
TD class=homejdboder width=19 height=19A onmouseover=ove(1)
style="CURSOR: hand" onmouseout=ou()IMG height=19
src="images/2.gif" width=19 border=0/A/TD
TD class=homejdboder width=19 height=19A onmouseover=ove(2)
style="CURSOR: hand" onmouseout=ou()IMG height=19
src="images/3.gif" width=19 border=0/A/TD
TD class=homejdboder width=19 height=19A onmouseover=ove(3)
style="CURSOR: hand" onmouseout=ou()IMG height=19
src="images/4.gif" width=19 border=0/A/TD
TD width=19 height=19A onmouseover=ove(4) style="CURSOR: hand"
onmouseout=ou()IMG height=19 src="images/5.gif" width=19
border=0/A/TD/TR/TBODY/TABLE/TD/TRtrtd colspan="3"
DIV id=textslide焦点图标题层/DIV/td/tr/TBODY/TABLE
SCRIPT
//slideimages数组为变换的图
var slideimages=new Array();
slideimages[0]="images/ad-01.jpg";
slideimages[1]="images/ad-02.jpg";
slideimages[2]="images/ad-03.jpg";
slideimages[3]="images/ad-04.jpg";
slideimages[4]="images/ad-05.jpg";
//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="焦点图片广告011111";
slidetext[1]="焦点图片广告022222";
slidetext[2]="焦点图片广告033333";
slidetext[3]="焦点图片广告044444";
slidetext[4]="焦点图片广告055555";
//slidetext数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]="";
slidelinks[1]="";
slidelinks[2]="";
slidelinks[3]="";
slidelinks[4]="";
//焦点图初始内容－－start
var slidespeed=3000
var slidesanjiaoimages=new Array("images/bian2.gif","images/bian1.gif");
var slidesanjiaoimagesname=new Array("xiaosan1","xiaosan2","xiaosan3","xiaosan4","xiaosan5");
var filterArray=new Array();
filterArray[0]="progid:DXImageTransform.Microsoft.Pixelate (enabled=false,duration=2,maxSquare=25 )";
filterArray[1]="progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSH)";
filterArray[2]="progid:DXImageTransform.Microsoft.Stretch(duration=1)";
filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)";
filterArray[4]="progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )";
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;islideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function tu_ove(){clearTimeout(setID)}
function ou(){slideit()}
var whichlink=0
var whichimage=0
function gotoshow(){
window.open(slidelinks[whichlink]);
}
function slideit(){
document.images.slide.style.filter=filterArray[whichimage];
//alert(document.images.slide.style.filter);
pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000) : 0
//alert(pixeldelay);
if (!document.images) return
if (ie55) {
document.images.slide.filters[0].apply();
document.images.slide.filters[0].play();
}
document.images.slide.src=imageholder[whichimage].src
document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimageslideimages.length-1)? whichimage+1 : 0
setID=setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
function ove(n){
clearTimeout(setID)
whichimage=n;
document.images.slide.src=imageholder[whichimage].src
document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
}
/SCRIPT
/BODY/HTML
JS实现点击一个按钮更换图片
你的代码差在少了"选择元素"这一步。
img1.src = "..\images/DT2.JPG"这一步是没有作用的，因为img1你还没有定义。
正确的方法是让图片元素的id是img1，然后
document.getElementById('img1').src = "..\images/DT2.JPG"
这样进行赋值。
document.getElementById('img1')这一步的作用就是选择图片元素。
这是针对此问题的测试页面
代码如下
div class="DT"
div
img id="img1" src=""
/
/div
/div
div style="text-align:center"
input type="button" id="b1" value=" 放大 " onclick="fd();" /
input type="button" id="b3" value="还原 " onclick="hy();" /
input type="button" id="b2" value=" 缩小 " onclick="sx();" /
/div
function fd() {
document.getElementById('img1').src = ""
}
function sx() {
document.getElementById('img1').src = ""
}
function hy() {
document.getElementById('img1').src = ""
}
