利用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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
基于jquery编写分页插件
Mar 07 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 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实现邮件群发的源码
2013/06/18 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php格式化json函数示例代码
2016/05/12 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python读取YAML文件过程详解
2019/12/30 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
华为c/c++笔试题
2016/01/25 面试题
中学生打架检讨书
2014/02/10 职场文书
租房协议书怎么写
2014/04/10 职场文书
办理房产证委托书
2014/09/18 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android