编程 Javascript

利用JS做网页特效_大图轮播(实例讲解)

Posted in Javascript onAugust 09, 2017

废话不多说，直接上代码：

<style>
      * {
        margin: 0px;
        padding: 0px;
      }
      
      .stage {
        width: 500px;
        height: 300px;
        border: 5px solid black;
        margin: 200px;
        position: relative;
        overflow: hidden;
      }
      
      .to-left,
      .to-right {
        position: absolute;
        top: 0px;
        width: 50px;
        height: 300px;
        background-color: black;
        color: white;
        font-size: 30px;
        text-align: center;
        line-height: 300px;
        opacity: 0.3;
      }
      
      .to-left {
        left: 0px;
      }
      
      .to-right {
        right: 0px;
      }
      
      .to-left:hover,
      .to-right:hover {
        cursor: pointer;
        opacity: 0.5;
      }
      
      .banner {
        width: 3000px;
        height: 300px;
      }
      
      .items {
        float: left;
        width: 500px;
        height: 300px;
        background-color: blanchedalmond;
        font-size: 100px;
        text-align: center;
        line-height: 300px;
      }
    </style>
  </head>
<!--大图轮播特效-->
  <body>
    <div class="stage">
      <div class="to-left">
        <</div>
          <div class="to-right">></div>
          <div class="banner">
            <div class="items">1</div>
            <div class="items" style="">2</div>
            <div class="items" style="">3</div>
            <div class="items" style="">4</div>
            <div class="items" style="">5</div>
            <div class="items">1</div>
          </div>
      </div>
  </body>

</html>
<script>
  var to_right = document.getElementsByClassName('to-right')[0];
  var to_left = document.getElementsByClassName('to-left')[0];
  var banner = document.getElementsByClassName('banner')[0];
  var arr = [];
  var count = 1;

  to_right.onclick = function() {
    toRight();
  }
  
  function toRight(){
    arr.push(window.setInterval("moveLeft()", 30));
  }
  
  to_left.onclick = function() {
    toLeft();
  }

  function toLeft(){
    arr.push(window.setInterval("moveRight()", 30));
  }
  
  function moveLeft() {
    if(count < 5) {
      if(banner.offsetLeft > count * (-500)) {
        banner.style.marginLeft = banner.offsetLeft - 20 + "px";
      } else {
        for(var x in arr) {
          window.clearInterval(arr[x]);
        }
        count++;
      }
//  连接点
    }else{
      if(banner.offsetLeft > count * (-500)) {
        banner.style.marginLeft = banner.offsetLeft - 20 + "px";
      } else {
        for(var x in arr) {
          window.clearInterval(arr[x]);
        }
        count = 1;
        banner.style.marginLeft = 0 + 'px';
      }
    }
  }
  
  function moveRight() {
    if(count-1 >0) {
      if(banner.offsetLeft < (count-2) * (-500)) {
        banner.style.marginLeft = banner.offsetLeft + 20 + "px";
      } else {
        for(var x in arr) {
          window.clearInterval(arr[x]);
        }
        count--;
      }
    }
  }
  window.setInterval("toRight()",1750);
  

</script>

以上这篇利用JS做网页特效_大图轮播(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript动态添加表格数据行(ASP后台数据库保存例子)

May 08 Javascript

JavaScript的事件绑定(方便不支持js的时候)

Oct 01 Javascript

JavaScript模块随意拖动示例代码

May 27 Javascript

js实现简洁的滑动门菜单(选项卡)效果代码

Sep 04 Javascript

JavaScript+html5 canvas制作的圆中圆效果实例

Jan 27 Javascript

Google 地图叠加层实例讲解

Aug 06 Javascript

vue基于mint-ui实现城市选择三级联动

Jun 30 Javascript

详解关于vue2.0工程发布上线操作步骤

Sep 27 Javascript

js 实现watch监听数据变化的代码

Oct 13 Javascript

Vue Object.defineProperty及ProxyVue实现双向数据绑定

Sep 02 Javascript

nuxt 自定义 auth 中间件实现令牌的持久化操作

Nov 05 Javascript

vue项目中js-cookie的使用存储token操作

Nov 13 Javascript

基于Vue实例对象的数据选项

Aug 09 #Javascript

react-native之ART绘图方法详解

Aug 08 #Javascript

jQuery Easyui Treegrid实现显示checkbox功能

Aug 08 #jQuery

jQuery EasyUI的TreeGrid查询功能实现方法

Aug 08 #jQuery

EasyUI的TreeGrid的过滤功能的解决思路

Aug 08 #Javascript

angular+ionic返回上一页并刷新页面

Aug 08 #Javascript

微信小程序movable view移动图片和双指缩放实例代码

Aug 08 #Javascript

You might like

现磨咖啡骗局！现磨咖啡=新鲜咖啡？现磨咖啡背后的猫腻你不懂！

2019/03/28 冲泡冲煮

深入解析PHP的引用计数机制

2013/06/14 PHP

zf框架的数据库追踪器使用示例

2014/03/13 PHP

使用纯php代码实现页面伪静态的方法

2015/07/25 PHP

PHP面向对象继承用法详解(优化与减少代码重复)

2016/12/02 PHP

php实现的redis缓存类定义与使用方法示例

2017/08/09 PHP

限制文本框输入N个字符的js代码

2010/05/13 Javascript

关于文本框默认值的操作js代码

2012/01/12 Javascript

JavaScript面向对象(极简主义法minimalist approach)

2012/07/17 Javascript

jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

2015/12/31 Javascript

深入浅析JavaScript中的Function类型

2016/07/09 Javascript

微信支付 JS API支付接口详解

2016/07/11 Javascript

jquery获取easyui日期控件的值实现方法

2016/11/09 Javascript

学习vue.js中class与style绑定

2016/12/03 Javascript

vue货币过滤器的实现方法

2017/04/01 Javascript

JS实现简单的浮动碰撞效果示例

2017/12/28 Javascript

Bootstrap实现可折叠分组侧边导航菜单

2018/03/07 Javascript

vue踩坑记-在项目中安装依赖模块npm install报错

2019/04/02 Javascript

详解如何搭建mpvue框架搭配vant组件库的小程序项目

2019/05/16 Javascript

JavaScript 防抖和节流遇见的奇怪问题及解决

2020/11/20 Javascript

Vue实现随机验证码功能

2020/12/29 Vue.js

[02:43]2014DOTA2国际邀请赛官方Alliance战队纪录片

2014/07/14 DOTA

Python聚类算法之凝聚层次聚类实例分析

2015/11/20 Python

Python中的默认参数实例分析

2018/01/29 Python

python DataFrame 修改列的顺序实例

2018/04/10 Python

Pycharm无法使用已经安装Selenium的解决方法

2018/10/13 Python

对Python发送带header的http请求方法详解

2019/01/02 Python

对python中的try、except、finally 执行顺序详解

2019/02/18 Python

Python闭包和装饰器用法实例详解

2019/05/22 Python

如何解决cmd运行python提示不是内部命令

2020/07/01 Python

2019史上最全Database工程师题库

2015/12/06 面试题

假日旅行社实习自我鉴定

2013/09/24 职场文书

幼儿园中班下学期评语

2014/04/18 职场文书

贷款委托书怎么写

2014/08/02 职场文书

2015年组织委员工作总结

2015/04/23 职场文书

简历上的自我评价，该怎么写呢？

2019/06/13 职场文书