JavaScript轮播图简单制作方法


Posted in Javascript onFebruary 20, 2017

本文实例为大家分享了JavaScript制作轮播图的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.js"></script>
  <style>
    .container{
      position: absolute;
      left: 0;
      top:0;
      width: 100%;
      overflow: hidden;
      border:1px solid #c3c3c3;
      border-radius: 4px;
    }
    .block1{
      margin:0;
      padding: 0;
      display: inline-block;
      height: 400px;
      background-color: #008800;
    }
    .block2{
      margin:0;
      padding: 0;
      display: inline-block;
      height: 400px;
      background-color: #ffff00;
    }
    .block3{
      margin:0;
      padding: 0;
      display: inline-block;
      height: 400px;
      background-color: #FF9900;
    }
  </style>
</head>
<body>
<div class="container" style="position: absolute;left: 0;top:0; width: 100%;height: 400px;">
  <div class="block1" style="position: absolute;left: 0;top:0;"></div>
  <div class="block2" style="position: absolute;left:0;top:0;"></div>
  <div class="block3" style="position: absolute; left:0;top:0;"></div>
</div>
</body>
<script>
  var wt=window.innerWidth;
  $(".block1").css({width:wt});
  $(".block2").css({width:wt,left:wt});
  $(".block3").css({width:wt,left:wt*2});
  var aa=setInterval(function(){
    $(".block1").css({left:parseFloat($(".block1")[0].style.left)-1});
    $(".block2").css({left:parseFloat($(".block2")[0].style.left)-1});
    $(".block3").css({left:parseFloat($(".block3")[0].style.left)-1});
    if($(".block3")[0].style.left=="0px"){
//      clearInterval(aa);
//      清除循环滚动
      $(".block1").css({left:0})
      $(".block2").css({left:wt})
      $(".block3").css({left:wt*2})
    }
  },2)
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
浅谈javascript的闭包
Jan 23 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
详解JS函数防抖
Jun 05 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 #Javascript
原生js实现放大镜
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 #Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 #Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 #Javascript
原生node.js案例--前后台交互
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 #Javascript
You might like
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 实现堆排序算法代码
2012/06/05 Python
Python写的服务监控程序实例
2015/01/31 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
介绍一下JMS编程步骤
2015/09/22 面试题
大学生实习自我鉴定
2013/12/11 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
2019销售早会主持词
2019/06/27 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android