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

浅析webapp框架AngularUI的demo

Dec 21 Javascript

js跨域请求数据的3种常用的方法

Dec 01 Javascript

jQuery对checkbox 复选框的全选全不选反选的操作

Aug 09 Javascript

flag和jq on 的绑定多个对象和方法(必看)

Feb 27 Javascript

xmlplus组件设计系列之路由（ViewStack)（7）

May 02 Javascript

详解react-redux插件入门

Apr 19 Javascript

vue项目动态设置页面title及是否缓存页面的问题

Nov 08 Javascript

微信小程序下拉加载和上拉刷新两种实现方法详解

Sep 05 Javascript

javascript利用键盘控制小方块的移动

Apr 20 Javascript

es6数组之扩展运算符操作实例分析

Apr 25 Javascript

Element实现动态表格的示例代码

Aug 02 Javascript

vue el-table实现递归嵌套的示例代码

Aug 14 Vue.js

基于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

mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法

2007/03/15 PHP

请php正则走开

2008/03/15 PHP

js实现图片放大缩小功能后进行复杂排序的方法

2012/11/08 Javascript

Javascript核心读书有感之语言核心

2015/02/01 Javascript

详解JavaScript中jQuery和Ajax以及JSONP的联合使用

2015/08/13 Javascript

跟我学习javascript的call(),apply(),bind()与回调

2015/11/16 Javascript

jQuery+json实现的简易Ajax调用实例

2015/12/14 Javascript

Bootstrap显示与隐藏简单实现代码

2017/03/06 Javascript

jQuery动态移除和添加背景图片的方法详解

2017/03/07 Javascript

Bootstrap fileinput文件上传预览插件使用详解

2017/05/16 Javascript

微信小程序通过保存图片分享到朋友圈功能

2018/05/24 Javascript

Vue CLI 2.x搭建vue(目录最全分析)

2019/02/27 Javascript

Element-UI中关于table表格的那些骚操作(小结)

2019/08/15 Javascript

Vue学习之axios的使用方法实例分析

2020/01/06 Javascript

el-form 多层级表单的实现示例

2020/09/10 Javascript

vue+element实现动态加载表单

2020/12/13 Vue.js

使用相同的Apache实例来运行Django和Media文件

2015/07/22 Python

Python3.4 splinter(模拟填写表单)使用方法

2018/10/13 Python

Python递归函数实例讲解

2019/02/27 Python

python获取点击的坐标画图形的方法

2019/07/09 Python

tensorboard实现同时显示训练曲线和测试曲线

2020/01/21 Python

python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例

2020/03/01 Python

浅谈在django中使用filter()(即对QuerySet操作)时踩的坑

2020/03/31 Python

CSS3弹性布局内容对齐（justify-content）属性使用详解

2017/07/31 HTML / CSS

推荐一些比较有用的css3新属性

2014/11/11 HTML / CSS

HTML5 微格式和相关的属性名称

2010/02/10 HTML / CSS

StubHub新加坡：购买和出售全球活动门票

2017/03/10 全球购物

伦敦香水公司：The London Perfume Company

2019/11/13 全球购物

应届生的求职推荐信范文

2013/11/30 职场文书

2014信息公开实施方案

2014/02/22 职场文书

法律专业自荐信

2014/06/03 职场文书

司法局群众路线教育实践活动整改措施思想汇报

2014/10/13 职场文书

检察院起诉书

2015/05/20 职场文书

编写python程序的90条建议

2021/04/14 Python

Ajax 的初步实现(使用vscode+node.js+express框架)

2021/06/18 Javascript

windows11选中自动复制怎么开启? Win11自动复制所选内容的方法

2022/07/23 数码科技