编程 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 相关文章推荐

CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法

Mar 29 Javascript

JS操作Cookies的小例子

Oct 15 Javascript

Javascript:为input设置readOnly属性(示例讲解)

Dec 25 Javascript

Javascript中With语句用法实例

May 14 Javascript

js实现横向伸展开的二级导航菜单代码

Aug 28 Javascript

轻松实现JavaScript图片切换

Jan 12 Javascript

js中string和number类型互转换技巧(分享)

Nov 28 Javascript

基于Bootstrap的网页设计实例

Mar 01 Javascript

详谈jQuery.load()和Jsp的include的区别

Apr 12 jQuery

解决vue.js 数据渲染成功仍报错的问题

Aug 25 Javascript

vue的for循环使用方法

Feb 12 Javascript

Object.keys() 和 Object.getOwnPropertyNames() 的区别详解

May 21 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

《星际争霸II》全新指挥官斯台特曼现已上线

2020/03/08 星际争霸

ThinkPHP中url隐藏入口文件后接收alipay传值的方法

2014/12/09 PHP

PHP PDOStatement::fetchColumn讲解

2019/01/31 PHP

javascript 拷贝节点cloneNode()使用介绍

2014/04/03 Javascript

jquery用offset()方法获得元素的xy坐标

2014/09/06 Javascript

jQuery聚合函数实例

2015/05/21 Javascript

jQuery实现美观的多级动画效果菜单代码

2015/09/06 Javascript

javascript每日必学之多态

2016/02/23 Javascript

AngularJS 基础ng-class-even指令用法

2016/08/01 Javascript

用vue和node写的简易购物车实现

2017/04/25 Javascript

JavaScript 中Date对象的格式化代码方法汇总

2017/09/06 Javascript

关于redux-saga中take使用方法详解

2018/02/27 Javascript

Node.js console控制台简单用法分析

2019/01/04 Javascript

微信小程序实现的一键复制功能示例

2019/04/24 Javascript

详解ES6数组方法find()、findIndex()的总结

2020/05/12 Javascript

浅谈vue 二级路由嵌套和二级路由高亮问题

2020/08/06 Javascript

JS typeof fn === 'function' && fn()详解

2020/08/22 Javascript

[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场

2018/08/19 DOTA

python抓取并保存html页面时乱码问题的解决方法

2016/07/01 Python

Django实现自定义404，500页面教程

2017/03/26 Python

Sanic框架路由用法实例分析

2018/07/16 Python

这可能是最好玩的python GUI入门实例(推荐)

2019/07/19 Python

Python使用type关键字创建类步骤详解

2019/07/23 Python

python实现屏保程序（适用于背单词）

2019/07/30 Python

PyQt+socket实现远程操作服务器的方法示例

2019/08/22 Python

Python替换NumPy数组中大于某个值的所有元素实例

2020/06/08 Python

python实现图片素描效果

2020/09/26 Python

德国运动营养和健身网上商店：Myprotein.de

2018/07/18 全球购物

运动会开幕式解说词

2014/02/05 职场文书

五一口号

2014/06/19 职场文书

学习党章的体会

2014/11/07 职场文书

合理化建议书

2015/02/04 职场文书

2015年学生会纪检部工作总结

2015/03/31 职场文书

大学生受助感言

2015/08/01 职场文书

手把手教你导入Go语言第三方库

2021/08/04 Golang

Redis实现订单过期删除的方法步骤

2022/06/05 Redis