如果让图片从左向右滚动

「已注销」 2019-06-19 10:58:11

在一个界面上，排一列图片，然后如何让图片自动从左向右滚动？求大神指点！

...全文

259 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

風灬雲 2019-06-28

打赏
举报

你怕是个假程序员

qq_40262972 2019-06-26

打赏
举报

轮播图吗，这里有个从右到左的


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#div1{
			width: 500px;
			height: 100px;
			margin:50px auto;
			border:1px solid grey;
			position: relative;
			overflow: hidden;
		}
		#div1 #ul1{
			height: 100px;
			position: relative;
		}
		#div1 #ul1 li{
			width:80px;
			height: 80px;
			border:3px double black;
			float: left;
			margin:7px;
			list-style: none;
		}
		#div1 #ul1 li img{
			width:100%;
			height: 100%;
		}
	</style>
	<!-- <script src='../../tools.js'></script> -->
	<script>
		function $(id){
			return document.getElementById(id);
		}
		function startMove(node,jsonObj, complete){//完美运动框架
			clearInterval(node.timer);
			node.timer = setInterval(function(){
				var isEnd = true;
				for(var attr in jsonObj){
					var iTarget = jsonObj[attr];
					var iCur = null;
					if(attr == "opacity"){
						iCur = parseInt(parseFloat(getStyle(node, attr)) * 100);
					}else{
						iCur = parseInt(getStyle(node, attr));
					}
					var speed = (iTarget - iCur) / 8;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);					
					if(attr == "opacity"){
						iCur += speed;
						node.style.opacity = iCur / 100;
						node.style[attr] = `alpha(opacity=$(iCur))`;
					}else{
						node.style[attr] = iCur + speed + 'px';
					}	
					if(iCur != iTarget){
							isEnd = false;
					}
				}
				if(isEnd){
					clearInterval(node.timer);
					if(complete){
						complete.call(node);
					}
				}
			},30)
		}
		function getStyle(node, cssStyle){//兼容获取class中的样式
			if(node.currentStyle){
				return node.currentStyle[cssStyle];
			}else{
				return getComputedStyle(node)[cssStyle];
			}
		}
		window.onload = function(){
			var lis = $("ul1").getElementsByTagName('li');
			for(var i = 0; i < lis.length; i++){
				var oImg = document.createElement('img');
				oImg.src = `../images/${i + 1}.jpg`;
				lis[i].appendChild(oImg);
			}
			$("ul1").innerHTML += $("ul1").innerHTML;
			$("ul1").style.width = $("ul1").offsetWidth * 2 + 'px';

			/*setInterval(function(){
				if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
					$("ul1").style.left = 0;
				}
				var speed = 5;
				$("ul1").style.left = $("ul1").offsetLeft - speed + 'px';
			},30)*/
			/*setInterval(function(){
				if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
					$("ul1").style.left = 0;
				}
				var speed = $("ul1").getElementsByTagName('li')[0].offsetWidth + 14;
				$("ul1").style.left = $("ul1").offsetLeft - speed + 'px';
			},2000)*/
			setInterval(function(){
				startMove($("ul1"), {
					left: $("ul1").offsetLeft - $("ul1").getElementsByTagName('li')[0].offsetWidth - 14
				},function(){
					if($("ul1").offsetLeft <= - $("ul1").offsetWidth / 2){
					$("ul1").style.left = 0;
				}
				})
			},2000)

		}
	</script>
</head>
<body>
	<div id="div1">
		<ul id="ul1">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>