利用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做网页特效_大图轮播(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 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
php at(@)符号的用法简介
2009/07/11 PHP
PHP查询网站的PR值
2013/10/30 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
js 金额文本框实现代码
2012/02/14 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python绘制3D图形
2018/05/03 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
服装机修工岗位职责
2013/12/26 职场文书
高中军训感言200字
2014/02/23 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2015最新民情日记范文
2015/06/26 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
Vue操作Storage本地化存储
2022/04/29 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js