<!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>
</head>
<body>
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
–>
</style>
<div id=”demo”>
<div id=”indemo”>
<div id=”demo1″>
<a href=”#”><img src=”/data/upload/help/202211/08/ff008c8a4e9a5b1cbab22b31d2d357a8.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/5fc7c41a504a7ee07a59486f2fb531b3.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/cff6b1639d01437b532238ad93b0877e.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/5eb89127836e2a47b90a91107d691b65.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/db67c702b9d7fcd07a291bdaf2bd90b0.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/c571c8fc13e86641b7cf516dc3b7d9d7.jpg” border=”0″ /></a>
</div>
<div id=”demo2″></div>
</div>
</div>
<script>
<!–
var speed=10;
var tab=document.getElementById(“demo”);
var tab1=document.getElementById(“demo1”);
var tab2=document.getElementById(“demo2”);
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
–>
</script>
</body>
</html>
网页制作中如何调整轮换图片的大小,始终调不了!直接调整不管用!希望好心人可以帮帮忙
亲 直接改图片的width和height就可以了~~比如<img height=”” width=””>或者在样式表css中修改图片的height和width就可以了
html网页里图片轮换效果是怎么制作.
呵呵,这种效果网上有专门的模板的
不过一般是ASP的,可能HTML是做好以后
自动生成的,
HTML怎么弄图片轮转 如下图?
是轮播吧,转轮是个什么鬼?一般使用插件 swiper 就可以了,当然自己写也可以,但是没有插件方便
html怎样实现图片自动切换
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的script标签中,填入js代码:setInterval(‘$(“img”).attr(“src”, “small3.png”)’, 1000);。
3、浏览器进入index.html页面中,此时显示出一张图片。
4、过1秒后,图片自动切换为另一张图片了。
html代码中如何实现图片轮换效果?
<!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>
</head>
<body>
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
–>
</style>
<div id=”demo”>
<div id=”indemo”>
<div id=”demo1″>
<a href=”#”><img src=”/data/upload/help/202211/08/ff008c8a4e9a5b1cbab22b31d2d357a8.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/5fc7c41a504a7ee07a59486f2fb531b3.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/cff6b1639d01437b532238ad93b0877e.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/5eb89127836e2a47b90a91107d691b65.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/db67c702b9d7fcd07a291bdaf2bd90b0.jpg” border=”0″ /></a>
<a href=”#”><img src=”/data/upload/help/202211/08/c571c8fc13e86641b7cf516dc3b7d9d7.jpg” border=”0″ /></a>
</div>
<div id=”demo2″></div>
</div>
</div>
<script>
<!–
var speed=10;
var tab=document.getElementById(“demo”);
var tab1=document.getElementById(“demo1”);
var tab2=document.getElementById(“demo2”);
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
–>
</script>
</body>
</html>