JS实现的简单轮播图运动效果示例


Posted in Javascript onDecember 22, 2016

本文实例讲述了JS实现的简单轮播图运动效果。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" charset="utf-8" />
  <meta http-equiv="content-type" content="text/html" />
  <title>demo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
#list{height:250px;list-style-type:none;overflow:hidden;}
#luanpo{max-width:600px;height:200px;border:1px solid #CCC;margin:0 auto;position:relative;overflow:hidden;}
#imgs li{float:left;height:200px;width:600px;}
#imgs{height:200px;background:#ddd;position:absolute;}
.a{background:red;}
.b{background:yellow;}
#num{overflow:auto;position:absolute;right:0;bottom:0;}
#num li{float:left;height:30px;width:30px;text-align:center;line-height:30px;border:1px solid #CCC;margin-left:10px;cursor:pointer;z-index:2222;}
</style>
<body>
  <div id="luanpo">
    <ul id="imgs">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
    </ul>
    <ul id="num">
      <li class="a">1</li>
      <li class="b">2</li>
      <li class="b">3</li>
      <li class="b">4</li>
    </ul>
  </div>
<script type="text/javascript">
var imgs=document.getElementById('imgs').getElementsByTagName('li');
var nums=document.getElementById("num").getElementsByTagName("li");
var luanpo=document.getElementById("luanpo");
var oimg=document.getElementById('imgs');
var iNow=0;
var dt=null;
oimg.style.width=imgs.length*imgs[0].offsetWidth+"px";
function tab(){
for(var i=0;i<nums.length;i++){
  nums[i].index=i;
  nums[i].onclick=function(){
    clearInterval(dt);
    iNow=this.index;
    for(var i=0;i<nums.length;i++){
      nums[i].className="b";
    }
    this.className="a";
    oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";  //这边可以加上我前面所写的那个缓动框架
  }
  nums[i].onmouseout=function(){
      start();
  }
}
}
function start(){
clearInterval(dt);
  dt=setInterval(function(){
    if(iNow>nums.length-2){
    iNow=0;
    }else{
    iNow++;
    }
    for(var k=0;k<nums.length;k++){
      if(iNow==nums[k].index){nums[k].className='a';}else{nums[k].className='b';}
    }
    oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";  //这边可以加上我前面所写的那个缓动框架
  },3000);
  tab();
}
start();
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
JS搜狐面试题分析
Dec 16 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 #Javascript
详解js的事件代理(委托)
Dec 22 #Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 #Javascript
vue双向绑定的简单实现
Dec 22 #Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 #Javascript
深入理解jquery中extend的实现
Dec 22 #Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 #Javascript
You might like
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php实现简单的上传进度条
2015/11/17 PHP
php命令行写shell实例详解
2018/07/19 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
使用python实现knn算法
2017/12/20 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Python flask框架端口失效解决方案
2020/06/04 Python
python中的错误如何查看
2020/07/08 Python
python实现感知机模型的示例
2020/09/30 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
暑期社会实践方案
2014/02/05 职场文书
写给父母的感谢信
2015/01/22 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Mysql Show Profile
2021/04/05 MySQL