小窗口间歇轮播
处理时候只需要复制第一个图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>间歇轮播</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 600px;
height: 40px;
line-height: 40px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
}
div ul{
position: absolute;
top: 0;
left: 0;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>通知：明天上课啊，后天也上课啊！</li>
<li>通知：熬过三天就休息了！</li>
<li>通知：哈哈哈哈哈哈哈哈哈哈！</li>
</ul>
</div>
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript">
//得到所有元素
var ul = document.getElementsByTagName("ul")[0];
var lis = document.getElementsByTagName("li");
var length = lis.length;
//复制第0个li，追加到后面，当做魔术元素，猫腻
ul.appendChild(lis[0].cloneNode(true));
//信号量
var idx = 0;
//模拟右按钮的业务
function move(){
idx++;
animate(ul,{"top":-40 * idx},800,function(){
if(idx > length - 1){
idx = 0;
this.style.top = "0px";
}
});
}
//调用动画函数的间隔时间，要远大于动画运行时间
//这时就给人感觉一个间歇的过程
setInterval(move, 1800);
</script>
</body>
</html>
大窗口间歇轮播
这个处理的时候全部内容复制一份。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>间歇轮播</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 600px;
height: 200px;
line-height: 40px;
border: 1px solid blue;
margin: 100px;
position: relative;
overflow: hidden;
}
div ul{
position: absolute;
top: 0;
left: 0;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>邱*健 北京*狐网络有线公司 16k</li>
<li>李*波 北京*东网络有线公司 26k</li>
<li>王* 北京*60网络有线公司 36k</li>
<li>赵* 北京*60网络有线公司 36k</li>
<li>马* 北京*60网络有线公司 36k</li>
<li>刘* 北京*60网络有线公司 36k</li>
<li>李* 北京*60网络有线公司 36k</li>
<li>李** 北京*60网络有线公司 36k</li>
</ul>
</div>
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript">
//得到所有元素
var ul = document.getElementsByTagName("ul")[0];
var lis = document.getElementsByTagName("li");
var length = lis.length;
//复制所有li，追加到ul里
ul.innerHTML += ul.innerHTML;
//信号量
var idx = 0;
//模拟右按钮的业务
function move(){
idx++;
animate(ul,{"top":-40 * idx},800,function(){
if(idx > length - 1){
idx = 0;
this.style.top = "0px";
}
});
}
//调用动画函数的间隔时间，要远大于动画运行时间
//这时就给人感觉一个间歇的过程
setInterval(move, 1800);
</script>
</body>
</html>
横图间歇轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>间歇轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.rolling{
width: 800px;
height: 130px;
border: 10px solid #ccc;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.rolling .m_unit{
/*这是运动的单位*/
/*这个宽度足以致命，为了让所有的li能够并排*/
/*这个宽度随便取，大一点*/
width: 5000px;
position: absolute;
top: 0;
left: 0;
}
.rolling ul{
list-style: none;
}
.rolling ul li{
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="rolling" id="rolling">
<div class="m_unit" id="m_unit">
<ul>
<li><a href=""><img src="images/shuzi/0.png" alt="" /></a></li>
<li><a href=""><img src="images/shuzi/1.png" alt="" /></a></li>
<li><a href=""><img src="images/shuzi/2.png" alt="" /></a></li>
<li><a href=""><img src="images/shuzi/3.png" alt="" /></a></li>
<li><a href=""><img src="images/shuzi/4.png" alt="" /></a></li>
<li><a href=""><img src="images/shuzi/5.png" alt="" /></a></li>
<li><a href=""><img src="images/shuzi/6.png" alt="" /></a></li>
<li><a href=""><img src="images/shuzi/7.png" alt="" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript">
//得到元素
var rolling = document.getElementById("rolling");
var m_unit = document.getElementById("m_unit");
var listul = m_unit.getElementsByTagName("ul")[0];
//得到图片的数量，计算折返点用的，折返点就是210 * 图片数量
var lislength = listul.getElementsByTagName("li").length;
//复制一倍的li
listul.innerHTML += listul.innerHTML;
//信号量
var idx = 0;
//模拟右按钮的业务
function move(){
idx++;
animate(m_unit,{"left":-210 * idx},800,function(){
if(idx > lislength - 1){
idx = 0;
this.style.left = "0px";
}
});
}
//调用动画函数的间隔时间，要远大于动画运行时间
//这时就给人感觉一个间歇的过程
var timer = setInterval(move, 2000);
rolling.onmouseover = function(){
clearInterval(timer);
}
rolling.onmouseout = function(){
timer = setInterval(move, 2000);
}
</script>
</body>
</html>
网友评论