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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 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中的extract的作用分析
2008/04/09 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
javascript String 对象
2008/04/25 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
用python实现的线程池实例代码
2018/01/06 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
高三高考决心书
2014/03/11 职场文书
材料员岗位职责
2014/03/13 职场文书
护士求职信范文
2014/05/24 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
婚姻出轨保证书
2015/05/08 职场文书
肖申克救赎观后感
2015/06/02 职场文书
国情备忘录观后感
2015/06/04 职场文书