演示地址:http://www.corange.cn/demo/3785/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动图片</title>
<style type="text/css">
body, h2, p {
margin:0px;
padding:0px;
}
ul, li {
margin:0px;
padding:0px;
list-style-type:none;
}
body {
font-size:12px;
}
.box {
width:960px;
height:114px;
margin:10px auto;
}
.left {
width:19px;
height:67px;
float:left;
display:inline;
cursor:pointer;
margin:23px 0 0 0;
background:url(http://zf4uc1.chinaw3.com/js/marquee/images/sj.jpg) no-repeat 0 0;
}
.left.hove {
background:url(http://zf4uc1.chinaw3.com/js/marquee/images/sj.jpg) no-repeat -19px 0;
}
.right {
width:19px;
height:67px;
float:left;
display:inline;
cursor:pointer;
margin:23px 0 0 0;
background:url(http://zf4uc1.chinaw3.com/js/marquee/images/sj.jpg) no-repeat 0 -67px;
}
.right.hove {
background:url(http://zf4uc1.chinaw3.com/js/marquee/images/sj.jpg) no-repeat -19px -67px;
}
.content {
width:915px;
height:114px;
float:left;
position:relative;
display:inline;
margin:0 0 0 4px;
overflow:hidden;
}
.content ul {
top:0px;
left:0px;
position:absolute;
}
.content ul li {
width:217px;
height:110px;
float:left;
padding:1px;
display:inline;
margin:0 9px 0 0;
border:1px solid #dfdfdf;
}
</style>
<script src="marquee.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
new Marquee("box", "left", "right", "content", {
marquee : 'once'
}, 'hove');
new Marquee("box1", "left", "right", "content");
};
</script>
</head>
<body>
<h1 align="center"><a href="../../archives/2011/09/05.html">滚动图片,2种效果,一种有首尾,一种没有</a></h1>
<div class="box" id="box">
<div class="left"></div>
<div class="content">
<ul style="width:100px;">
<li><img src="../demo1.jpg" /></li>
<li><img src="../demo2.jpg" /></li>
<li><img src="../demo3.jpg" /></li>
<li><img src="../demo4.jpg" /></li>
<li><img src="../demo5.jpg" /></li>
<li><img src="../demo6.jpg" /></li>
<li><img src="../demo7.jpg" /></li>
<li><img src="../demo8.jpg" /></li>
</ul>
</div>
<div class="right"></div>
</div>
<div class="box" id="box1">
<div class="left"></div>
<div class="content">
<ul style="width:100px;">
<li><img src="../demo1.jpg" /></li>
<li><img src="../demo2.jpg" /></li>
<li><img src="../demo3.jpg" /></li>
<li><img src="../demo4.jpg" /></li>
<li><img src="../demo5.jpg" /></li>
<li><img src="../demo6.jpg" /></li>
<li><img src="../demo7.jpg" /></li>
<li><img src="../demo8.jpg" /></li>
</ul>
</div>
<div class="right"></div>
</div>
</body>
</html>
- 浏览: 61018 次
相关推荐
绝对好用 部分代码如下: <script> var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-
可以使文字之间首尾连接,进行向上滚动,用了都说好啊,那么多的事啊
js原生图片上下无缝滚动 页面经常用到的效果
marquee一款非常NB的插件可以实现无缝滚动上下左右都可以。使用简单操作容易
大致内容: 1、默认向左滚动展示; 2、点击左右箭头改变展示方向; 3、点击左右箭头改变展示速度; 4、鼠标移至div滚动停止; 5、首尾循环无缝滚动展示。 修改内容: 1、ie杂项打开;2、下图片不滚动
ScrolView首尾连接显示图片 ScrolView首尾连接显示图片
UIScrollview 图片无缝连续自动滚动 图片每隔2秒自动滚动一次
JSmarquee滚动效果,marquee标签不推荐使用
主要介绍了javascript实现状态栏文字首尾相接循环滚动的方法,实例分析了javascript定时函数及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
repeater动态首尾相接显示图片,repeater读取数据库内容,绑定显示图片和标题,点击可跳转到详细页
MARQUEE属性与用法,能实现无缝循环滚动文字,上下,左右都可以
行业分类-设备装置-一种首尾浮箱式造船平台
javascript实现的略缩图首尾相连滚动效果
行业分类-设备装置-一种首尾浮箱式船舶修造平台
实现listview自动循环滚动
DRScrollerView:无限滚动轮播图--首尾相接方式
TrimInterceptor是一个非常有用的拦截器,可以在Struts2框架中过滤请求数据的首尾空格。通过重写intercept方法,TrimInterceptor可以实现对参数值的trim操作,以确保参数值的正确性。在实际应用中,TrimInterceptor...
以下为大致内容: 1、默认向左滚动展示; 2、点击左右箭头改变展示方向; 3、点击左右箭头改变展示速度; 4、鼠标移至div滚动停止; 5、首尾循环无缝滚动展示。 Ps.做的不怎么专业,还请多多指教。
demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) ...
部分代码如下: <script type="text/javascript"> ... delta = 0,//当前滚动的位置 critical = slide.offsetHeight;//临界点 slide.innerHTML += slide.innerHTML; var rolling = function(){