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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
JavaScipt基本教程之前言
Jan 16 Javascript
JS array 数组详解
Mar 22 Javascript
jquery uaMatch源代码
Feb 14 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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
php加密解密实用类分享
2014/01/07 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
vue实现分页组件
2020/06/16 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python中动态检测编码chardet的使用教程
2017/07/06 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python调用服务接口的实例
2019/01/03 Python
python实现趣味图片字符化
2019/04/30 Python
OpenCV 边缘检测
2019/07/10 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
pytorch中index_select()的用法详解
2021/01/06 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
大二自我鉴定
2014/01/31 职场文书
文化产业实施方案
2014/06/07 职场文书
入党申请书怎么写?
2019/06/21 职场文书
八年级作文之我的母亲
2019/12/10 职场文书