利用JavaScript的offset属性做一个简单的无缝滚动

利用JavaScript的offset属性做一个简单的无缝滚动

实现思路

• 通过无序列表ul li 储存图片，外层加个div
• 给予div，ul，li相对的样式：width、height、 list-style-type等
• 利用JavaSceipt的offset属性让其向左或向右滚动即可
• 判断你素材图片的宽高，使其等于最外层的div的宽度

CSS3部分

   #div1{
   	width:720px;
   	height:160px;
   	margin:100px auto;
   	position:relative;
   	overflow:hidden;
   }
   #div1 ul li{
   	list-style-type:none;
   	float:left;
   	width:240px;
   	height:160px;
   }
   #div1 ul{
   	position:absolute;
   	left:0px;
   	top:0px;
   }

JavaScript部分

H5主体部分

*注：对我自己来说，有时候会混淆oUl.style.width和oUl.offsetWidth 。我分析了一下
前者是相对div下的6个图片的总体宽度，而后者是整个oUl在移动过程中相对div的移动距离！*其次对为何div加相对定位和Ul加决定定位有些迷，希望懂的小伙伴可以指点一下！