Javascript轮播效果-阿里云开发者社区

js轮播效果对于我们来说并不陌生，但是以前是用Jquery框架写的但是用框架并不是非常可靠！因为有的公司限制了框架所以来说用javascript来封装函数和方法是最可靠的也正是其中之一使我更加想学习javascript原理其二我以前到很多大型公司面试时候都会问你会js吗我说会用jquery 他们又问你研究过jquery源代码吗？我回答说肯定没有研究过啊所以这样也会降低面试率！因为我曾经打过看但是都是用原审js封装看不太懂也就没有兴趣看！第三我也考虑过框架很多但是最重要不是说怎么样用框架而是我们更要知道他们是怎么封装的怎么写的！更要我们学会封装方法封装库！最近有的同事也在旁边笑下我 kissy代码你知道什么意思吗我说不知道我只知道这样用下他们就在旁边笑我那我就让他们笑吧！说真的一般情况下我都会用jquery框架但是淘宝有时限制用jquery框架只能用原审js和kissy kissy说真的我没有用过及认真看过！最主要不是我不看是因为最近很忙工作时间忙于工作下班后又更多想了解javascript原理所以也是经常看javascript书所以就这样 kissy先暂时放下！他们想怎么取笑我就让他们笑吧！恩废话就不多说现在时间也不早了现在来分享下今天学习的写的javascript轮播效果！当然今天的轮播没有把他们封装起来恩大概元旦左右我想用javascript面向对象的方式来把他们封装起来！现在来谈谈我这个轮播！这个轮播就是和淘宝首页一样的效果！

一：我这个轮播是不断的向上滚动！那么现在我们首先要明白的事件该怎么写结构及样式！我这边用的是ul li 然后里面有1 2 3 数字！然后img怎么写结构呢！我这里先定了两个div套住img 那么里面的div让他宽度就和这个图片的宽度一样那么高度就是这三张图片的总和！那么外层也有一个div 那么外层宽度和高度就是和一张图片的宽度和高度一样然后用overflow:hidden 这样就是页面显示的一样！然后我们可以通过不断的改变内层的div的top值就可以实现滚动！那么要改变top值我们首先要给该div的一个绝对定位或者相对定位！为什么要给个绝对定位或者相对定位！因为我们都知道我想让这个图片滚动起来那么这个图片肯定不能在该文档中如果不用定位在文档中怎么样能滚动起来？因为我们也知道用了定位方式就是脱离了文档流也就是不受当前的文档控制这个现在不用多说，我相信你们都懂得！

二我这里用了上篇文章中获取类名方法也搞了过来！用了一个动画函数封装动画然后把引用过来就ok了这个动画函数有两个方法一个是匀速运动的方法还有一个简单的线性运动方法当然网上还有很多变速运动的方法有兴趣的可以到网上研究下！当然和数学和物理有关！js写起来也是蛮简单的！可能就是那个动画函数不是非常能理解其他的函数应该是没有什么的我相信你们都懂！说真的这个动画函数我也是一知半解网上有很多这样的函数方法有兴趣可以研究下稍后我也会研究下这个原理的！

下面是页面代码：

<!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>
ul,li{ list-style:none;}
.scrollImg{ width:400px; height:900px; position:absolute; top:0; left:0;}
.scrollImg a{ width:400px; height:300px; overflow:hidden; display:block;}
.scrollImg img{ border:none;}
.ScrollWrap{ width:400px; height:300px; overflow:hidden;margin:50px auto 0; position:relative;}
.lists{ height:20px; position:absolute; top:255px; right:10px; z-index:100;*top:270px;}
.lists li{ width:20px; height:20px; border:1px solid orange; background:#fff; float:left; margin-right:4px; display:inline; text-align:center; line-height:20px; color:orange; cursor:pointer; font-weight:700;}
.lists li.current{ height:24px; line-height:24px; background:orange; color:#fff; width:24px; margin-top:-2px;}
</style>
<script src="base.js" type="text/javascript"></script>
</head>
<body>
<div class="ScrollWrap">
<div class="scrollImg">
<a href="#"><img src="image/01.jpg" width="400" height="300"/></a>
<a href="#"><img src="image/02.jpg" width="400" height="300"/></a>
<a href="#"><img src="image/03.jpg" width="400" height="300"/></a>
</div>
<ul class="lists">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script type="text/javascript">
var UL = getElementsByClassName("lists")[0],
LI = UL.getElementsByTagName("li");
var cur = LI[0];//保存当前的li 默认情况下是从第一个开始
var scrollImg = getElementsByClassName("scrollImg")[0],t;
for(var i=0;i<LI.length;i++){
(function(i){
LI[i].onmouseover = function(){
clearInterval(t);
//scrollImg.style.top = (-i*300) + "px";
var top = parseInt(scrollImg.style.top) || 0;
animate(scrollImg,{top:top},{top:(-i*300)-top},400,Quad);
for(var j=0;j<LI.length;j++){
LI[j].className = "";
}
this.className = "current";
cur = this; //保存当前移动的LI[i] 第几个
}
LI[i].index = i; // 保存当前的索引
LI[i].onmouseout = function(){
t = setInterval(fn,3000);
}
})(i)
}
scrollImg.onmouseover = function(){
clearInterval(t);
}
scrollImg.onmouseout = function(){
t = setInterval(fn,3000);
}
LI[0].
t = setInterval(fn,3000);
function fn(){
var nextIndex = cur.index+1;
if(nextIndex>=LI.length){
nextIndex=0;
}
LI[nextIndex].
t = setInterval(fn,3000);
}
</script>
</body>
</html>