js-小效果-无缝滚动

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
#box{
width:1102px;
position:relative;
height:152px;
overflow: hidden;
border:1px solid #000;
margin: 50px auto;
}
#ul{
position: absolute;
left:0;
top:0;
}
#ul li{
width:200px;
height:150px;
float:left;
padding:0 10px;}
#ul li img{
width:200px;
height:150px;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var oUl=document.getElementById(‘ul‘);
var aLi=oUl.children;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+‘px‘;
setInterval(function(){
var l=oUl.offsetLeft-5;
if(l<=-oUl.offsetWidth/2){
l=0;
}
oUl.style.left=l+‘px‘;
},30)
}
</script>
</head>
<body>
<div id="box">
<ul id="ul">
<li><img src="img/banner1.jpg" /></li>
<li><img src="img/banner2.jpg" /></li>
<li><img src="img/banner3.jpg" /></li>
<li><img src="img/banner4.jpg" /></li>
<li><img src="img/banner5.jpg" /></li>
</ul>
</div>
</body>
</html>

时间： 2024-12-21 20:48:54

js-小效果-无缝滚动的相关文章

JS 阶段小练习~ 无缝滚动

结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图片暂停移动(setInterval,clearInterval) 4.鼠标移到图片上,高亮(a:hover) 5.点击小图, 下面的大图会改变 6.文字区域随着图片的变化而变化(未成功) -----------------------------------------------------JS

【JS学习】无缝滚动

一.无缝滚动--基础 效果演示 物体运动基础 让Div移动起来 offsetLeft的作用,可以想到有offsetLeft就会有offsetRight,还会有offsetWight/offsetHeight 用定时器让物体连续移动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

js实现图片无缝滚动

html部分,css样式自己脑补一下画面吧,效果如下,无缝滚动 <div class="box" id="box"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li>

js文字的无缝滚动（上下）

使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container"> <ul id="con1"> <li>javascript1</li> <li>javascript2</li> <li>javascript3</li> <li>javas

js动画之无缝滚动

效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> body,ul{ margin:0; padding:0; } .list_con{ width:1000px; he

JS 在 HTML 无缝滚动

marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth: 获取对象的滚动宽度offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetL

js实现表格无缝滚动效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>table表格无缝向上滚动</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .tablebox { heigh

JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。

一:html部分 <body> <input id="btn1" type="button" value="向左"> <input id="btn2" type="button" value="向右"> <div id="div1">/*外框,显示区域*/ <ul id="ul1">/*循

js小效果：返回顶部

返回顶部: <div id="gotop" onclick="javascript:scroll(0,0);"><img src="images/top33x33.png"></div> <style type="text/css"> #gotop{display:none;position:fixed;right:5px;bottom:4rem;width:33px;heigh

js小效果-轮播图

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } #wrap{ width:500px; height:260px; margin:50px auto; position:r