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

这个例子重点在于：

  • 运动框架的复习，要灵活运动回调函数
  • 始终以全局变量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版的更多相关文章

  1. 少写代码帮你模块化方法 & 运动框架 & 简化轮播图

    模块化就是通过每一个js里封装一个方法:用exports将他输出, 在下一个js用require的方法加载js时就会将方法输出.然后在主页面引入require.js; 模块化基本写法: define( ...

  2. JS原生带小白点轮播图

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...

  3. 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）

    轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...

  4. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  5. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  6. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  8. 超级简单的jquery轮播图demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue music-抓取歌单列表数据（渲染轮播图）

    下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...

随机推荐

  1. GridView获取CheckBox的值及所在列的ID

    //根据GridView的列数进行循环 ; i < GridView1.Rows.Count; i++) { //检查是否有ID为CheckBox1的CheckBox控件,如果有就赋值给Chec ...

  2. softwareTesting_work2_question2

    work2类 package com.Phantom; import java.util.Scanner; import javax.print.DocFlavor.INPUT_STREAM; pub ...

  3. 《制造杀人犯／Making A Murder》中的疑点和感想

         快马加鞭,一天之内看完了完整的10集,很震撼,在案件还存在诸多疑点的情况下.在还有如此多的细节无法确定的情况下,最后由12人组成的陪审团一致通过S.A的谋杀罪成立,尽管初次投票时有7票反对. ...

  4. MySQL知识树-查询语句

    在日常的web应用开发过程中,一般会涉及到数据库方面的操作,其中查询又是占绝大部分的.我们不仅要会写查询,最好能系统的学习下与查询相关的知识点,这篇随笔我们就来一起看看MySQL查询知识相关的树是什么 ...

  5. Maven学习笔记(1)之安装Maven

    此笔记是学习Maven时自己摸索+各种百度而来,并非全部原创,望与各位一同学习,勿拍~勿拍~ 安装步骤 1.下载Maven的最新版本,地址:http://maven.apache.org/downlo ...

  6. JSTL String时间转成 date

    两个标签配合使用 <fmt:parseDate value="${integralRecord.startDate}" var="date1"/> ...

  7. caffe 安装资料整理

    最近在安装caffe,因为过程繁琐,而且不同的作者给出了不同的安装教程,鱼龙混杂,所以做了个简单的整理. 基本安装方法在下面博客上面都有详细介绍,不过不同版本的硬件适配不同版本的软件,所以安装的时候一 ...

  8. matlab小段代码学习

    matlab读hdf文件到txt filename='E:\data\H1BDLD10110607231863921.L2B.HDF'; h=hdftool(filename); Latitude = ...

  9. html+css基础知识总结

    1.HTML书写的基本规范      img标签必须得写alt=""      标签名和属性名字必须小写      引号必须用双引号      双标签必须有闭合标签      单标 ...

  10. 在AndroidStudio不能找到so文件问题：couldn't find libweibosdkcore.so

    解决步骤已经写到我的公众号,二维码在下面. 欢迎观看我的CSDN学院课程,地址:http://edu.csdn.net/course/detail/2877 本人联系方式: 更多精彩分享,可关注我的微 ...