导航:首页 > 好看图片 > 简单html图片滚动

简单html图片滚动

 发布时间：2022-01-06 15:49:44

Ⅰ html 图片滚动代码

<div id="gpic" style="overflow:hidden; width:600px; height:182px;">

<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="gpic1" valign="top" align="center"><table width="974" border="0" align='center' cellpadding="0" cellspacing="0">
<tr>
<td height="120" bgcolor="#FF00FF">图片/链接</td>
<td valign='top' bgcolor="#00FFFF">图片/链接</td>
<td valign='top' bgcolor="#FFFF00">图片/链接</td>
<td valign='top' bgcolor="#0000FF">图片/链接</td>
<td valign='top' bgcolor="#00FF00">图片/链接</td>
<td valign='top' bgcolor="#FF0000">图片/链接</td>
</tr>
<tr>
<td height="24" align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
<td align="center">文字信息</td>
</tr>
</table></td>
<td id="gpic2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30
gpic2.innerHTML=gpic1.innerHTML
function Marquee(){
if(gpic2.offsetWidth-gpic.scrollLeft<=0)
gpic.scrollLeft-=gpic1.offsetWidth
else{
gpic.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
gpic.onmouseover=function() {clearInterval(MyMar)}
gpic.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

Ⅱ HTML图片滚动的代码

你的结构写错了，<html><head><title></title></head><body><script>
var speed=30//速度数值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function() {clearInterval(MyMar4)}
butong_net_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<div id="butong_net_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="imags/1.jpg" width="100" height="133"></td>
<td><img src="imags/2.jpg" width="100" height="133"></td>
<td><img src="imags/3.jpg" width="100" height="133"></td>
<td><img src="imags/4.jpg" width="100" height="133"></td>
<td><img src="imags/5.jpg" width="100" height="133"></td>
</tr>
</table>
</td>
<td id="butong_net_right2" valign="top"></td>
</tr>
</table>
</body></html>

Ⅲ html滚动图片代码

你把正面的代码弄到HTML文件的<body>区应该就行了：
<div id="ShowDiv" style="position:relative; overflow:hidden; width:306px; height:102px;">
<div id="div1" style="position:absolute; width: 310px; height: 103px;">
<img src="图片地址1" width="100" height="100" />
<img src="图片地址2" width="100" height="100" />
<img src="图片地址3" width="100" height="100" />
</div>
</div>
<script type='text/javascript'>
var adiv=document.getElementById('div1');
var imgs=document.getElementsByTagName('img');
adiv.style.width=620+'px';
adiv.innerHTML+=adiv.innerHTML;
setInterval(function()
{
adiv.style.left=adiv.offsetLeft-3+'px';
if(adiv.offsetLeft<-adiv.offsetWidth/2)
{
adiv.style.left=0+'px';
}
},10)
</script>

Ⅳ html图片无缝滚动代码怎么写

marquee和js两种方法，我建议使用js的，marquee兼容性不好，只兼容IE浏览器。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<metacharset="utf-8"/>
<TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE>
</HEAD>
<BODY>
用marquee实现首尾相连循环滚动效果（仅IE）：<br/><br/>
<MARQUEEbehavior="scroll"contenteditable="true"onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"scrollamount="3"width="100"><SPANunselectable="on"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"></SPAN></MARQUEE>
<br/><br/>用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br/><br/>
<DIVid="scrollobj"style="white-space:nowrap;overflow:hidden;width:500px;"><span>这里是要滚动的内容</span></DIV>
<scriptlanguage="javascript"type="text/javascript">
<!--
	functionscroll(obj){
		vartmp=(obj.scrollLeft)++;
		//当滚动条到达右边顶端时
		if(obj.scrollLeft==tmp)obj.innerHTML+=obj.innerHTML;
		//当滚动条滚动了初始内容的宽度时滚动条回到最左端
		if(obj.scrollLeft>=obj.firstChild.offsetWidth)obj.scrollLeft=0;
	}
	setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
</BODY>
</HTML>

望采纳！

Ⅳ 如何在HTML中实现图片的滚动效果

素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，小编也准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。

打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。

切换至代码编辑界面，输入如下代码：

<body><div id="photo-list"> <ul id="scroll">
<li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li>


<li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div></body>

新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。

在新建的样式表文件"MyStyle.css”文件中输入如下代码：


* { padding:0; margin:0;} /*设置所有对像的内边距为0*/
body { text-align:center;} /*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
计算：6*(100+2*2+1*2+9) - 9
之所以减去9是第6张图片的右边留白 */
width:681px;

/* 图片的宽度（包含高度、padding、border）
计算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份将被隐藏*/


border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

在网页文件"index.html"中添加对该样式表的引用：

<link rel="stylesheet" type="text/css" href="MyStyle.css">

新建一个JS文件，并将该文件另存为“MoveEffect.js"。

在”MoveEffect.js“文件中输入如下所示代码：


var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {


var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //获得每个img容器的宽度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面


ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //数值越大越慢
ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度


var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};

然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。

<script type="text/javascript" src="MoveEffect.js"></script>

打开“index.html”网页文件，最终效果如果所示：

Ⅵ html如何设置图片滚动

你说的应该是轮播图吧，这需要配合JavaScript知识。给你具体代码：（图片自己更换）


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>heartmv.com</title>
<style>
* {
margin: 0;
padding: 0
}

html {
font-size: 15px;
}

.box {
width: 50rem;
height: 32rem;
border: 3px dashed red;
margin: 15px 0;
position: relative;
left: 50%;
top: 5%;
transform: translate(-50%, 0);
overflow: hidden;
}

.box>ul {
width: 500%;
height: 32rem;
position: absolute;
}

.box>ul>li {
width: 50rem;
height: 32rem;
list-style: none;
float: left;
}

.box li img {
width: 50rem;
height: 32rem;
}

.box>ol {
position: absolute;
left: 50%;
bottom: 15px;
transform: translate(-50%, 0);
}

.box>ol>li {
width: 1.5rem;
height: 1.5rem;
list-style: none;
margin-left: 15px;
float: left;
border-radius: 1.5rem;
background: rgba(191, 0, 3, 0.5);
cursor: pointer;
}

.box>ol>li.now {
width: 3rem;
}

.box span {
color: #00f;
display: none;
width: 6rem;
text-align: center;
height: 32rem;
line-height: 32rem;
font-size: 5rem;
position: absolute;
top: 0;
cursor: pointer;
}

.box span:hover {
background: rgba(110, 110, 110, 0.3);
}

.box>.spanL {
left: 0;
}

.box>.spanR {
right: 0;
}
</style>
</head>

<body>
<div class="box">
<ul>
<li>
<a href="javascript:;">
<img src="images/game_001.jpg" alt="轮播图">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_002.jpg" alt="轮播图">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_003.jpg" alt="轮播图">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/game_004.jpg" alt="轮播图">
</a>
</li>
</ul>

<!--轮播图指示图标-->
<ol>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
</ol>

<!--向左向右图标-->
<span class="spanL">‹</span>
<span class="spanR">›</span>
</div>

<script>
var box = document.querySelector('.box');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var spanL = document.querySelector('.spanL');
var spanR = document.querySelector('.spanR');
//鼠标移入时向左、向右图标显示
box.addEventListener('mouseenter', function() {
spanL.style.display = 'block';
spanR.style.display = 'block';
//停止定时器
clearInterval(timer);
})
//鼠标移出时向左、向右图标隐藏
box.addEventListener('mouseleave', function() {
spanL.style.display = 'none';
spanR.style.display = 'none';
//运行定时器
timer=setInterval(function(){
//调用向右运动事件
spanR.click();
},3000);
})
//动画函数
function run(obj, target, callback) { //obj指运动的对象，target指目标运动距离，callback指回调函数
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
//回调函数要等到定时器函数运行结束才能运行
if (callback) { //若存在回调函数就调用
callback();
};
} else {
//设置动画的步长值变量bc，使运行速度逐渐变小
var bc = (target - obj.offsetLeft) / 10 > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target -
obj.offsetLeft) / 10);
obj.style.left = obj.offsetLeft + bc + 'px';
};
}, 15);
}
//要实现无缝滚动，需要将第一张轮播图复制并添加到最后(注意：ul的宽度也要相应增加)
var imglast = ul.children[0].cloneNode(true);
ul.appendChild(imglast);
var num = 0; //代替轮播图的序号
var num2 = 0; //代替轮播图指示图标的序号
var lis = ol.children.length;
var flag = true; //此变量用于阻止快速点击时导致运动过快的情况
//点击向右图标，向右运动
spanR.addEventListener('click', function() {
if (flag) {
flag = false;
if (num === ul.children.length - 1) { //注意num的判断条件必须写在num++的前面
num = 0;
ul.style.left = 0;
}
num++;
//轮播图指示图标
for (var i = 0; i < lis; i++) {
ol.children[i].className = '';
}
num2++;
if (num2 === lis) {
num2 = 0;
}
ol.children[num2].className = 'now';
//调用运动函数
run(ul, -num * ul.children[0].offsetWidth, function() {
flag = true;
});
}
})
//点击向左图标，向左运动
spanL.addEventListener('click', function() {
if (flag) {
flag = false;
if (num === 0) {
num = ul.children.length - 1;
ul.style.left = -num * ul.children[0].offsetWidth + 'px';
}
num--;
//轮播图指示图标
for (var i = 0; i < lis; i++) {
ol.children[i].className = '';
}
num2--;
if (num2 < 0) {
num2 = lis-1;
}
ol.children[num2].className = 'now';
//调用运动函数
run(ul, -num * ul.children[0].offsetWidth, function() {
flag = true;
});
}
})
//点击指示图标定位图片
for(var i=0; i<lis; i++){
ol.children[i].index=i; //获取循环对象的下标号
ol.children[i].addEventListener('click', function(){
run(ul, -this.index*ul.children[0].offsetWidth);
for(var j=0; j<lis; j++){
ol.children[j].className='';
};
this.className='now';
num=num2=this.index;
})
}
//设置定时器
var timer=setInterval(function(){
//调用向右运动事件
spanR.click();
},3000);
</script>
</body>
</html>


效果图如下：

Ⅶ html怎么实现图片滚动效果

纯HTML脚本是不可以实现图片的滚动的，一般是配合JQuery脚本实现图片的轮转切换的。

Ⅷ html 如何让图片进行滚动

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 600px; HEIGHT: 190px; top:485px; left:252px;position: absolute;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id=demo1>

<!-- 要循环滚动的图片 -->
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td width="200" align="center" style="height: 151px">
<a href="WebDeSign.aspx">
<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>
</td>
<td width="200" align="center" style="height: 151px">
<a href="SoftWare.aspx">
<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>
</td>
<td align="center" style="height: 151px; width: 200px;">
<a href="VhostIndex.aspx">
<img src="images/indexpic3.gif" width="194" height="147" border="0" /></a>
</td>
</tr>
</table>

</td>
<TD id=demo2 width=1></TD>
</tr>
</table>
</DIV>

<SCRIPT>
var speed=30//速度数值越大速度越慢
var demo2 = document.getElementById("demo2");
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>

Ⅸ HTML滚动图片

var speed=30
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function() {clearInterval(MyMar3)}
butong_net_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
用多次会语法错误？检查下格式复制对没有，有时候少一个标点括号啥的，

Ⅹ 如何在HTML页面中实现图片循环滚动

marquee标记是不能实现衔接滚动的，头尾肯定是有空白。楼下的哥们儿用的是JS脚本实现的，没啥更好的方法了

阅读全文

与简单html图片滚动相关的资料

热点内容
简单画车图片大全图片大全 浏览：894
阮经天动漫简单图片 浏览：440
超简单的画图片 浏览：115
word水印怎么才能在图片之上 浏览：218
纹身小图案图片女生小清新 浏览：940
编发型图片的步骤 浏览：105
发微信说说怎么带图片 浏览：807
夏天灰色丝袜搭配什么衣服图片 浏览：958
如何制作美容店美美的广告图片 浏览：462
如何把pdf保存为jpg格式的图片 浏览：275
猫咪的动漫图片大全 浏览：127
套猴图片及价格 浏览：984
图片怎么把底色变透明 浏览：355
女明星长发发型图片 浏览：471
禁忌女孩红眼动漫图片 浏览：735
蝴蝶犬的可爱图片 浏览：404
word融合两张图片的背景融合 浏览：819
二次元动漫萌少女图片 浏览：352
品如发型图片 浏览：705
伤感的图片唯美动漫 浏览：608
  • shanghai
  • anning
  • anqing
  • anshan
  • anyang
  • baoshan
  • cangzhou
  • changde
  • chengdu
  • chenzhou
  • chuzhou
  • danyang
  • deyang
  • douyun
  • enshi
  • fuxin
  • guigang
  • haerbin
  • hengyang
  • huaihua
  • huainan
  • jiangdou
  • jiangmen
  • jiaonan
  • jiashan
  • jinan
  • jinghong
  • jingjiang
  • jingmen
  • jining
  • jintan
  • kaili
  • kaiyuan
  • kuerle
  • linyi
  • liupanshui
  • liuzhou
  • liyang
  • loudi
  • lvshun
  • meishan
  • meizhou
  • mianxian
  • nanchang
  • nanchong
  • nanning
  • nanyang
  • ningbo
  • ningde
  • penglai
  • pingliang
  • putian
  • qinhuangdao
  • qinzhou
  • qiqihaer
  • quzhou
  • sanming
  • shangqiu
  • shangyu
  • shaoyang
  • shihezi
  • shijiazhuang
  • shilin
  • shuozhou
  • taian
  • tangshan
  • weihai
  • wenzhou
  • wuhai
  • wuhu
  • xining
  • xinyu
  • xinzhou
  • xuancheng
  • yaan
  • yancheng
  • yibin
  • yichun
  • yichun1
  • yili
  • yinchuan
  • yingkou
  • yulin
  • zaozhuang
  • changhai
  • zhangqiu
  • zhaoqing
  • zhaotong
  • zhoushan
  • baotou
  • xiaoshan
  • xuanhua
  • ziyang
  • xinji
  • zoucheng
  • jiangyan
  • xiangyin
  • songjiang
  • fuling
  • gongzhuling