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 相关文章推荐
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
基于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
模仿OSO的论坛(五)
2006/10/09 PHP
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
keep-alive保持组件状态的方法
2020/12/02 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python数据库小程序源代码
2019/09/15 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
简历的自我评价
2014/02/03 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2014年采购部工作总结
2014/11/20 职场文书
患者身份识别制度
2015/08/06 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书