html图片滚动（html如何设置图片滚动）

本文目录

• html如何设置图片滚动
• html怎么实现图片滚动效果
• html图片循环滚动无缝隙
• 怎么能让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.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.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.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.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.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怎么实现图片滚动效果

《marquee direction=方向 loop=循环次数 behavior=滚动形式 dataformatas=文字类型 width=字符滚动窗口的宽度 height=字符滚动窗口的高度 scrolldelay=每次循环的间隔时间 scrollamount=每次移动的长度 bgcolor=滚动窗口的背景颜色 》

…………要滚动的文字…………

《/marquee》

html图片循环滚动无缝隙

html图片循环滚动无缝隙代码：
《!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=gb2312“ /》
《title》无标题文档《/title》
《style type=“text/css“》
/*gundongtupian*/
#demo0 {
width:712px;
height:134px;
overflow:hidden;
margin:auto;
}
#demo0 img {
float:left;
margin-left:10px;
border:3px #ffffff solid;
}
#indemo0 {
float: left;
width: 800%;
}
#demo10 {
float: left;
}
#demo20 {
float: left;
}
《/style》
《/head》《body》
《div id=“demo0“》
《div id=“indemo0“》
《div id=“demo10“》
《a href=“#“》《img src=“images/tu1.jpg“ width=“167“ height=“128“ border=“0“ /》《/a》
《a href=“#“》《img src=“images/tu1.jpg“ width=“168“ height=“128“ border=“0“ /》《/a》
《a href=“#“》《img src=“images/tu1.jpg“ width=“168“ height=“128“ border=“0“ /》《/a》
《a href=“#“》《img src=“images/tu1.jpg“ width=“168“ height=“128“ border=“0“ /》《/a》
《a href=“#“》《img src=“images/tu1.jpg“ width=“168“ height=“128“ border=“0“ /》《/a》
《/div》
《div id=“demo20“》《/div》
《/div》
《/div》
《script language=“javascript“》
《!--
var speed0=40; //数字越大速度越慢
var tabb=document.getElementById(“demo0“);
var tabb1=document.getElementById(“demo10“);
var tabb2=document.getElementById(“demo20“);
tabb2.innerHTML=tabb1.innerHTML+tabb1.innerHTML;
function Marquee2(){
if(tabb2.offsetWidth-tabb.scrollLeft《=0)
tabb.scrollLeft-=tabb1.offsetWidth;
else{
tabb.scrollLeft++;
}
}
var MyMar2=setInterval(Marquee2,speed0);
tabb.onmouseover=function(){clearInterval(MyMar2)};
tabb.onmouseout=function(){MyMar2=setInterval(Marquee2,speed0)};
--》
《/script》
《/body》
《/html》

怎么能让html网页图片滚动起来，而且居中

html网页图片滚动方法如下：
1把图片样式的position属性设置为static，
2然后指定固定的位置，就可以了。

tml网页图片居中方法如下：
第一种方法：
设置父元素内文字居中即可让图片居中。
element{ text-align:center; }
第二种方法：
设置图片为块级元素，设置左右margin为auto即可让图片居中。
img{ display:block;margin-left:auto;margin-right:auto; }