运动版的轮播图，有左右按钮和单独分页

这个例子重点在于：

运动框架的复习，要灵活运动回调函数
始终以全局变量iNum来控制oUl的移动目的地，每次有任何动作，都是先判断iNum并改变iNum后去调用运动函数
刚才在复查代码的时候发现个奇怪的现象，在ie11和cent browser打开的时候居然不会滚动，iNum倒是在变化，突然想到之前在看妙味课堂的时候有老师提到一句，给要运动的元素，在加上position:absolute后，如果不加上left:0;top:0会有兼容问题，所以，我给oUl加上了left:0;top:0;就解决了问题。


<style>
ul,h2,p{
    padding: ;margin: ;list-style: none;
}
#wrap{
    width: 600px;
    height: 450px;
    border: 1px solid black;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
img{
    width: 600px;height: 450px;
}
ul{
    overflow: hidden;
    position: absolute;
}
#list{
    width: 3600px;
    left: ;top: ;
}
li{
 float: left;
}
span{
    position: absolute; 
    width: 40px;height: 40px;
    font-weight: bold;
    font-size: 34px;
    line-height: 40px;
    opacity: 0.6;
    text-align: center;
    top: %;
    margin-top: -20px;
    background: white;
    z-index: ;
}
#left{
    left: ;
}
#right{
    right: ;
}
span:hover{
    cursor: pointer;
    background: orangered;
}
#btns{
    bottom: 10px;right: 10px;
}
#btns li{
    width: 15px;height: 15px;
    background: orange;
    margin: 4px;
    cursor: pointer;
}
#btns li.active{
    background: orangered;
}
</style>
<script type="text/javascript">
window.onload = function(){
 var oUl = document.getElementById('list');
 var aLi = oUl.getElementsByTagName('li');
 var aSpan = document.getElementsByTagName('span');
 var oBtn = document.getElementById('btns');
 var aBtn = oBtn.getElementsByTagName('li');
 var aImg = document.getElementsByTagName('img');
 var timerAuto = null;
 var iNum = ;
 var newTarget = ;
 var w = aImg[].offsetWidth;
 
 function getStyle(obj,attr){
 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
 }
 
 function doMove(obj,attr,dir,target,endFn){
        dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
 var speed=parseInt(getStyle(obj,attr))+dir;
 if(speed>target&&dir> || speed<target&&dir<){
                speed=target;
 }
            obj.style[attr]=speed+'px';
 if(speed==target){
                clearInterval(obj.timer);
                endFn&&endFn();
 }
 },);
 }
 
 function changeColor(index){
 for (var i=; i<aBtn.length; i++) {
            aBtn[i].className = '';
 }
        aBtn[index].className = 'active';
 }
 
 function moveAuto(){
        clearInterval(timerAuto);
        timerAuto = setInterval(function(){
 if(iNum!=aLi.length-){
                iNum++;
                doMove(oUl,'left',,-iNum*w);
 }else{
                iNum = ;
                clearInterval(timerAuto);
                doMove(oUl,'left',,-iNum*w,moveAuto);
 }
            changeColor(iNum);
 },);
 }
 
    moveAuto();
 
 for (var i=; i<aSpan.length; i++) {
        aSpan[i].index = i;
        aSpan[i].onclick = function(){
            clearInterval(timerAuto);
 if(this.index == ){
 if(iNum == aLi.length - ){
                    iNum = ;
 
                    doMove(oUl,'left',,-(w*iNum),moveAuto);
 }else{
                    iNum++;
                    doMove(oUl,'left',,-(w*iNum),moveAuto);
 } 
 }else{
 if(iNum == ){
                    iNum = aLi.length - ;
                    doMove(oUl,'left',,-(w*iNum),moveAuto);
 }else{
                    iNum--;
                    doMove(oUl,'left',,-(w*iNum),moveAuto);
 } 
 }
            changeColor(iNum);
 };
 }
 
 for (var i=; i<aBtn.length; i++) {
        aBtn[i].index = i;
        aBtn[i].onmouseover = function(){
            changeColor(this.index);
            clearInterval(timerAuto);
            iNum = this.index;
            doMove(oUl,'left',,-(w*iNum));
 };
        aBtn[i].onmouseout = function(){
            moveAuto();
 };
 }
};
</script>
</head>
<body>
 <div id="wrap">
 <span id="left"><</span>
 <span id="right">></span>
 <ul id="list">
 <li><img src="img/1.jpg"></li>
 <li><img src="img/2.jpg"></li>
 <li><img src="img/3.jpg"></li>
 <li><img src="img/4.jpg"></li>
 <li><img src="img/5.jpg"></li>
 <li><img src="img/6.jpg"></li>
 </ul>
 <ul id="btns">
 <li class="active"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
</body>

【原】运动版的轮播图，有左右按钮和单独分页，原生JS版的更多相关文章

少写代码帮你模块化方法 & 运动框架 & 简化轮播图
模块化就是通过每一个js里封装一个方法:用exports将他输出, 在下一个js用require的方法加载js时就会将方法输出.然后在主页面引入require.js; 模块化基本写法: define( ...
JS原生带小白点轮播图
咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...
【jQuery】全功能轮播图的实现（本文结尾也有javascript版）
轮播图图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头点击左键切换到上一张图片,但图片为第一张时 ...
用原生js封装轮播图
原生js封装轮播图对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
超级简单的jquery轮播图demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
vue music-抓取歌单列表数据（渲染轮播图）
下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...

随机推荐

OD19
这个程序关掉之后会出现一个NAG窗口甚是讨厌于是我们要想办法干掉他,先查壳发现没有壳 VC写的加载进一个工具reshecker试试,发现一个我们要找的对话框, 那我们记住这个位置 1 ...
sphinx 注意点
强制更新索引indexer --all --rotate合并索引indexer --merge index1 index2 --rotate No fields in schema - will no ...
PowerDesigner自增列问题
easyui datebox 扩展清空按钮及日期判断
<input id="EndHavDate" class="easyui-datebox" data-options="prompt:'请选择结 ...
Android手机刷机失败的自救方法
刷机对于一些android手机的高级用户来说已经是家常便饭了,很多新手也都跟着教程轻松了学会刷机.升级系统,也都开始经常在网上搜罗一些自制的系统进行刷机,体验新系统带来的新感觉.但是有句古话叫常在河边 ...
iOS－－时间类date详解
NSDate定义时间的类 NSDate是一个时间类,在编写程序时,我们很少遇到.今天我突然碰到,感觉很生疏. 给大家发个博客,让大家也都温习一下,哈哈! 兄弟用的时候突然发现竟然有一些bug,大家用时 ...
在Unity中创建可远程加载的.unity3d包
在一个Unity项目中,发布包本身不一定要包括所有的Asset(译为资产或组件),其它的部分可以单独发布为.unity3d,再由程序从本地/远程加载执行,这部分不在本文讨论范围.虽然Unity并没有直 ...
MINIX3
这个系列minix3是好早看的源码现在都忘记的差不多了觉得就此扔掉可惜了今天把他全部放在博客上 1 是想和大家一起讨论下 2 是没事看看能够加强对一个稳定性系统的理解加厚
js用户修改密码功能模块
;(function(){ var ajaxSub = false, showError = function(msg){ if(msg){ $('#er_txt').html(msg).show() ...
dede channel 增加limit(属性)功能
dede channel 标签添加 limit(属性)功能在用dede建站的时候,往往会需要用到一些需要自定义的普通需求,今天在这里介绍channel的limit功能,有时候我们需要调用中间部分数据 ...

【原】运动版的轮播图，有左右按钮和单独分页，原生JS版

运动版的轮播图，有左右按钮和单独分页

【原】运动版的轮播图，有左右按钮和单独分页，原生JS版的更多相关文章

随机推荐

热门专题