简单html图片滚动_html如何设置图片滚动

Ⅰ 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"文件。

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

新建一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"中添加对该样式表的引用：

新建一个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”文件的引用。

打开“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图片滚动

简单html图片滚动

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