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 option location 页面跳转实现代码
Dec 27 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
vue各种事件监听实例(小结)
2020/06/24 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python类装饰器实现方法详解
2018/12/21 Python
python join方法使用详解
2019/07/30 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python 如何将office文件转换为PDF
2020/09/22 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
作风大整顿心得体会
2014/09/10 职场文书
2015年共青团工作总结
2015/05/15 职场文书
python中的装饰器该如何使用
2021/06/18 Python
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
总结Java对象被序列化的两种方法
2021/06/30 Java/Android