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模拟滚动条(横向竖向)
Feb 22 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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中STDCLASS用法实例分析
2016/11/11 PHP
javascript数组的使用
2013/03/28 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python导入oracle数据的方法
2015/07/10 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python 多进程、多线程效率对比
2020/11/19 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
经典c++面试题二
2015/08/14 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
小学毕业感言50字
2014/02/16 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
奥运会口号
2014/06/13 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
教师节大会主持词
2015/07/06 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android