无缝滚动轮播

先上效果图

在这里插入图片描述

HTML代码

<div id="divall">
		<div class="div01">
			<img src="images/1.jpg" alt="" />
			<img src="images/2.jpg" alt="" />
			<img src="images/3.jpg" alt="" />
			<img src="images/4.jpg" alt="" />
		</div>
</div>

CSS样式

*{
			margin : 0;
			padding : 0;
		}
		img{
			width: 512px;
			height: 256px;
			float: left;
		}
		.div01{
			width: 2048px;
			height: 256px;
			position: absolute;
		}
		#divall{
			width: 700px;
			height: 256px;
			border: 1px solid #000;
			position: relative;
			overflow: hidden;
		}

JavaScript代码

var divall = document.getElementById(“divall”);
var div01 = document.getElementsByClassName(“div01”)[0];

		var div02 = document.createElement("div");
		div02.innerHTML = div01.innerHTML;
		div02.className = "div01";
		
		divall.appendChild(div02)   	//追加子元素
		
		var left1 = 0;
		var left2 = 2048;
		function step(){
			left1 -= 5;
			left2 -= 5;
			div01.style.left = left1 + "px";
			div02.style.left = left2 + "px";
			
			if(left1 <= -2048){
				left1 = 2048
			}
			if(left2 <= -2048){
				left2 = 2048
			}
		}

		var timer = setInterval (step,1)	//setInterval 设置循环定时器
		

		divall.onmouseover  = function(){    // onmouseover  鼠标移入
			clearInterval(timer)			// clearInterval  清除定时器

		}

		divall.onmouseout = function(){		//	onmouseout  鼠标移出
			timer = setInterval(step,100)
		}

// scrollWidth: 获取对象的滚动宽度
// offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

// console.log(divall.offsetWidth)
// console.log(divall.offsetHeight)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值