图片切换代码(html)网页
图片切换代码(html)网页,谁能帮我做一个网页代码.我就是有几张照片想在网页上做一个图片切换的代码.图片的大小是180*180的!希望能有高手帮忙!请简单的用文字说明一...
图片切换代码(html)网页,谁能帮我做一个网页代码.我就是有几张照片想在网页上做一个图片切换的代码.图片的大小是180*180的!希望能有高手帮忙!
请简单的用文字说明一下!谢谢 展开
请简单的用文字说明一下!谢谢 展开
展开全部
<!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/html; charset=utf-8" />
<title>qweq</title>
<link href="css/om_system.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style type="text/css">
.banner{
width: 1000px;
margin: 50px auto 0 auto;
height: 500px;
position: relative;
}
.banner img{
width: 100%
}
.banner ul{
height: 100%;
overflow:hidden;
}
.banner li{
display: none;
height: 100%;
overflow: hidden;
}
.banner li.on{
display: block;
}
.banner-btn{
width: 700px;
position: absolute;
left: 150px;
top: 200px;
}
.banner-btn button{
border: none;
background:none;
}
.pic-left{
float: left;
}
.pic-right{
float: right;
}
</style>
</head>
<body class="body-bg">
<div class="banner">
<ul>
<li class="on"><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
</ul>
<div class="banner-btn clear">
<button class="pic-left"><img src="images/arrow-3-l.png"></button>
<button class="pic-right"><img src="images/arrow-3-r.png"></button>
</div>
</div>
<input value="dd" id="dd" />
<script type="text/javascript">
$(function(){
$('.pic-left').click(function(){
var index=$('li.on').index();
var nextindex=(index+2)%3;
// alert(nextindex)
$("#dd").val(nextindex);
$('li.on').fadeOut(200,function(){
$('li.on').removeClass('on');
$('.banner li').eq(nextindex).addClass('on')
});
setTimeout(function(){$('.banner li').eq(nextindex).fadeIn(200)},200);
});
$('.pic-right').click(function(){
var index=$('li.on').index();
var nextindex=(index+1)%3;
// alert(nextindex)
$("#dd").val(nextindex);
$('li.on').fadeOut(200,function(){
$('li.on').removeClass('on');
$('.banner li').eq(nextindex).addClass('on')
});
setTimeout(function(){$('.banner li').eq(nextindex).fadeIn(200)},200);
});
});
</script>
</body>
</html>
图片自己替换下，原理其实很简单：这边是通过ul li上加一个class='on',做标记（即当前显示），然后通过这个on来遍历下一个元素
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qweq</title>
<link href="css/om_system.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style type="text/css">
.banner{
width: 1000px;
margin: 50px auto 0 auto;
height: 500px;
position: relative;
}
.banner img{
width: 100%
}
.banner ul{
height: 100%;
overflow:hidden;
}
.banner li{
display: none;
height: 100%;
overflow: hidden;
}
.banner li.on{
display: block;
}
.banner-btn{
width: 700px;
position: absolute;
left: 150px;
top: 200px;
}
.banner-btn button{
border: none;
background:none;
}
.pic-left{
float: left;
}
.pic-right{
float: right;
}
</style>
</head>
<body class="body-bg">
<div class="banner">
<ul>
<li class="on"><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
<li><img src="images/6.jpg"></li>
</ul>
<div class="banner-btn clear">
<button class="pic-left"><img src="images/arrow-3-l.png"></button>
<button class="pic-right"><img src="images/arrow-3-r.png"></button>
</div>
</div>
<input value="dd" id="dd" />
<script type="text/javascript">
$(function(){
$('.pic-left').click(function(){
var index=$('li.on').index();
var nextindex=(index+2)%3;
// alert(nextindex)
$("#dd").val(nextindex);
$('li.on').fadeOut(200,function(){
$('li.on').removeClass('on');
$('.banner li').eq(nextindex).addClass('on')
});
setTimeout(function(){$('.banner li').eq(nextindex).fadeIn(200)},200);
});
$('.pic-right').click(function(){
var index=$('li.on').index();
var nextindex=(index+1)%3;
// alert(nextindex)
$("#dd").val(nextindex);
$('li.on').fadeOut(200,function(){
$('li.on').removeClass('on');
$('.banner li').eq(nextindex).addClass('on')
});
setTimeout(function(){$('.banner li').eq(nextindex).fadeIn(200)},200);
});
});
</script>
</body>
</html>
图片自己替换下，原理其实很简单：这边是通过ul li上加一个class='on',做标记（即当前显示），然后通过这个on来遍历下一个元素
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!---###########################################################-->
<style type="text/css">
/* 数字按钮框样式 */
#imgTitle {FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:left;overflow: hidden;}
#imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; }
#imgTitle_down {left:0px;text-align: right; width:inherit; }
/* 图片框样式 */
.imgClass {border: 1px solid #000;}
/* 图片文字框样式 */
#txtFrom {text-align: center;vertical-align: middle;}
/* 数字按钮样式 */
.button {text-decoration: none;padding: 2px 7px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;}
a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;}
a.button:hover {font-family: sans-serif;text-decoration: none;color:#fff;background:#fff; }
.buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;}
/*渐变*/
.trans { width:90px; background-color:#000;filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);}
</style>
<script language="javascript" type="text/javascript">
var imgWidth=260; //图片宽
var imgHeight=195; //图片高
var textFromHeight=2; //焦点字框高度 (单位为px)
var textStyle="f12"; //焦点字class style (不是连接class)
var textLinkStyle="p1"; //焦点字连接class style
var buttonLineOn="#f60"; //button下划线on的颜色
var buttonLineOff="#000"; //button下划线off的颜色
var TimeOut=3000; //每张图切换时间 (单位毫秒);
var imgUrl=new Array();
var imgLink=new Array();
var imgtext=new Array();
var imgAlt=new Array();
var adNum=0;
//焦点字框高度样式表 开始
document.write('<style type="text/css">');
document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');
document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+16)+'px;height:18px}');
document.write('</style>');
document.write('<div id="focuseFrom">');
//焦点字框高度样式表 结束
imgUrl[1]='hot_product_img/1.gif';
imgtext[1]='<A HREF="#"></A>';
imgLink[1]='#';
imgAlt[1]='alt';
imgUrl[2]='hot_product_img/2.gif';
imgtext[2]='<A HREF="#"></A>';
imgLink[2]='#';
imgAlt[2]='alt';
imgUrl[3]='hot_product_img/3.gif';
imgtext[3]='<A HREF="#" ></A>';
imgLink[3]='#';
imgAlt[3]='alt';
imgUrl[4]='hot_product_img/4.gif';
imgtext[4]='<A HREF="http://adv.pconline.com.cn/adpuba/click?adid=20644&id=pc.sjtx.jdtp.&" TARGET="_blank" class="'+textLinkStyle+'">NEC N8202</A>';
imgLink[4]='cp_view.asp?cpid=CJ0104';
imgAlt[4]='alt';
function changeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum=adNum-1;
nextAd();
}
function goUrl(){
window.open(imgLink[adNum],'_blank');
}
//NetScape开始
if (navigator.appName == "Netscape")
{
document.write('<style type="text/css">');
document.write('.buttonDiv{height:4px;width:21px;}');
document.write('</style>');
function nextAd(){
if(adNum<(imgUrl.length-1))adNum++;
else adNum=1;
theTimer=setTimeout("nextAd()", TimeOut);
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('focustext').innerHTML=imgtext[adNum];
document.getElementById('link'+adNum).style.background=buttonLineOn;
document.getElementById('imgLink').href=imgLink[adNum];
for (var i=1;i<=imgUrl.length;i++)
{
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
}
}
document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="linkwhite"><img src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>')
document.write('<div id="imgTitle">');
document.write('<div id="imgTitle_down">');
//数字按钮代码开始
for(var i=1;i<imgUrl.length;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');}
//数字按钮代码结束
document.write('</div>');
document.write('</div>');
document.write('</div>');
nextAd();
}
//NetScape结束
//IE开始
else
{
var count=0;
for (i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
break;
}
}
function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<count)adNum++ ;
else adNum=1;
if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=6;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('link'+adNum).style.background=buttonLineOn;
for (var i=1;i<=count;i++)
{
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
}
focustext.innerHTML=imgtext[adNum];
theTimer=setTimeout("nextAd()", TimeOut);
}
document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a>');
document.write('<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>');
document.write('<div id="imgTitle">');
document.write(' <div id="imgTitle_down"> <a class="trans"></a>');
//数字按钮代码开始
for(var i=1;i<imgUrl.length;i++){document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');}
//数字按钮代码结束
document.write('</div>');
document.write('</div>');
document.write('</div>');
}
//IE结束
</script>
<!--#########################################################--->
<style type="text/css">
/* 数字按钮框样式 */
#imgTitle {FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:left;overflow: hidden;}
#imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; }
#imgTitle_down {left:0px;text-align: right; width:inherit; }
/* 图片框样式 */
.imgClass {border: 1px solid #000;}
/* 图片文字框样式 */
#txtFrom {text-align: center;vertical-align: middle;}
/* 数字按钮样式 */
.button {text-decoration: none;padding: 2px 7px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;}
a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;}
a.button:hover {font-family: sans-serif;text-decoration: none;color:#fff;background:#fff; }
.buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;}
/*渐变*/
.trans { width:90px; background-color:#000;filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);}
</style>
<script language="javascript" type="text/javascript">
var imgWidth=260; //图片宽
var imgHeight=195; //图片高
var textFromHeight=2; //焦点字框高度 (单位为px)
var textStyle="f12"; //焦点字class style (不是连接class)
var textLinkStyle="p1"; //焦点字连接class style
var buttonLineOn="#f60"; //button下划线on的颜色
var buttonLineOff="#000"; //button下划线off的颜色
var TimeOut=3000; //每张图切换时间 (单位毫秒);
var imgUrl=new Array();
var imgLink=new Array();
var imgtext=new Array();
var imgAlt=new Array();
var adNum=0;
//焦点字框高度样式表 开始
document.write('<style type="text/css">');
document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');
document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+16)+'px;height:18px}');
document.write('</style>');
document.write('<div id="focuseFrom">');
//焦点字框高度样式表 结束
imgUrl[1]='hot_product_img/1.gif';
imgtext[1]='<A HREF="#"></A>';
imgLink[1]='#';
imgAlt[1]='alt';
imgUrl[2]='hot_product_img/2.gif';
imgtext[2]='<A HREF="#"></A>';
imgLink[2]='#';
imgAlt[2]='alt';
imgUrl[3]='hot_product_img/3.gif';
imgtext[3]='<A HREF="#" ></A>';
imgLink[3]='#';
imgAlt[3]='alt';
imgUrl[4]='hot_product_img/4.gif';
imgtext[4]='<A HREF="http://adv.pconline.com.cn/adpuba/click?adid=20644&id=pc.sjtx.jdtp.&" TARGET="_blank" class="'+textLinkStyle+'">NEC N8202</A>';
imgLink[4]='cp_view.asp?cpid=CJ0104';
imgAlt[4]='alt';
function changeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum=adNum-1;
nextAd();
}
function goUrl(){
window.open(imgLink[adNum],'_blank');
}
//NetScape开始
if (navigator.appName == "Netscape")
{
document.write('<style type="text/css">');
document.write('.buttonDiv{height:4px;width:21px;}');
document.write('</style>');
function nextAd(){
if(adNum<(imgUrl.length-1))adNum++;
else adNum=1;
theTimer=setTimeout("nextAd()", TimeOut);
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('focustext').innerHTML=imgtext[adNum];
document.getElementById('link'+adNum).style.background=buttonLineOn;
document.getElementById('imgLink').href=imgLink[adNum];
for (var i=1;i<=imgUrl.length;i++)
{
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
}
}
document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="linkwhite"><img src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>')
document.write('<div id="imgTitle">');
document.write('<div id="imgTitle_down">');
//数字按钮代码开始
for(var i=1;i<imgUrl.length;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');}
//数字按钮代码结束
document.write('</div>');
document.write('</div>');
document.write('</div>');
nextAd();
}
//NetScape结束
//IE开始
else
{
var count=0;
for (i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
break;
}
}
function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<count)adNum++ ;
else adNum=1;
if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=6;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('link'+adNum).style.background=buttonLineOn;
for (var i=1;i<=count;i++)
{
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
}
focustext.innerHTML=imgtext[adNum];
theTimer=setTimeout("nextAd()", TimeOut);
}
document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a>');
document.write('<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>');
document.write('<div id="imgTitle">');
document.write(' <div id="imgTitle_down"> <a class="trans"></a>');
//数字按钮代码开始
for(var i=1;i<imgUrl.length;i++){document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');}
//数字按钮代码结束
document.write('</div>');
document.write('</div>');
document.write('</div>');
}
//IE结束
</script>
<!--#########################################################--->
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<SCRIPT language=JavaScript>
<!-- // BannerAD
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;
改下面的图片地址和数量就行了
bannerAD[0]="1.gif";
bannerADlink[0]="#";
bannerAD[1]="2.gif";
bannerADlink[1]="#";
bannerAD[2]="3.gif";
bannerADlink[2]="#";
bannerAD[3]="4.gif";
bannerADlink[3]="#";
bannerAD[4]="5.gif";
bannerADlink[4]="#";
bannerAD[5]="1.gif";
bannerADlink[5]="#";
bannerAD[6]="1.gif";
bannerADlink[6]="#";
bannerAD[7]="1.gif";
bannerADlink[7]="#";
var preloadedimages=new Array();
for (i=0;i<bannerAD.length;i++){
preloadedimages=new Image();
preloadedimages.src=bannerAD;
}
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(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 3500);
}
function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
}
//-->
</SCRIPT>
<A onmouseover="displayStatusMsg();return document.returnValue"
href="javascript:jump2url()"><IMG
style="FILTER: revealTrans(duration=2,transition=23)"
src="TungstenCore.files/1.jpg" border=0 name=bannerADrotator> </A>
<SCRIPT language=JavaScript>nextAd()</SCRIPT>
<!-- // BannerAD
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;
改下面的图片地址和数量就行了
bannerAD[0]="1.gif";
bannerADlink[0]="#";
bannerAD[1]="2.gif";
bannerADlink[1]="#";
bannerAD[2]="3.gif";
bannerADlink[2]="#";
bannerAD[3]="4.gif";
bannerADlink[3]="#";
bannerAD[4]="5.gif";
bannerADlink[4]="#";
bannerAD[5]="1.gif";
bannerADlink[5]="#";
bannerAD[6]="1.gif";
bannerADlink[6]="#";
bannerAD[7]="1.gif";
bannerADlink[7]="#";
var preloadedimages=new Array();
for (i=0;i<bannerAD.length;i++){
preloadedimages=new Image();
preloadedimages.src=bannerAD;
}
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(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 3500);
}
function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
}
//-->
</SCRIPT>
<A onmouseover="displayStatusMsg();return document.returnValue"
href="javascript:jump2url()"><IMG
style="FILTER: revealTrans(duration=2,transition=23)"
src="TungstenCore.files/1.jpg" border=0 name=bannerADrotator> </A>
<SCRIPT language=JavaScript>nextAd()</SCRIPT>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
