html如何设置图片滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html如何设置图片滚动相关的知识，希望对你有一定的参考价值。
参考技术A你说的应该是轮播图吧，这需要配合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>
效果图如下：
图片宽度超过视口宽度时如何禁用水平滚动？
【中文标题】图片宽度超过视口宽度时如何禁用水平滚动？【英文标题】：How to disable horizontal scrolling when picture width exceeds viewport width? 【发布时间】：2021-11-09 17:04:41 【问题描述】：这是我的带有样式的 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
body
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
@media (orientation:landscape)
body
height:70vw;
width:70vw;
</style>
<body></body>
</html>我想要一个在左右两侧（移动设备）和上下（对于桌面设备）略微切割的圆圈，所以我认为这是最好的方法，但我观察到页面也以额外的宽度结束在移动设备和桌面设备上的额外高度，我不希望这种情况发生。
有什么办法可以解决这个问题，让圆圈保持切割状态并消除滚动？
【问题讨论】：
【参考方案1】：在您的html 标签上使用heigth: 100% 和width: 100% 和overflow: hidden。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
html
height: 100%;
width: 100%;
overflow: hidden;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
body
position: absolute;
height: 70vh;
width: 70vh;
background-color: deeppink;
border-radius: 50%;
@media (orientation:landscape)
body
height:70vw;
width:70vw;
</style>
<body></body>
</html>【讨论】：
我在chrome的响应模式下测试sn-p，它不滚动！您的设备尺寸是多少？这也是你的完整例子吗？ @Enceladus Android 设备，720x1440，我会发布图片，但我没有足够的代表 我加了你的宽高的图片。 @Enceladus以上是关于html如何设置图片滚动的主要内容，如果未能解决你的问题，请参考以下文章