利用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 相关文章推荐
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
js数组的操作指南
Dec 28 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 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
几种显示数据的方法的比较
2006/10/09 PHP
php获取错误信息的方法
2015/07/17 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python实现计算器功能
2019/10/31 Python
Python文件操作方法详解
2020/02/09 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
高中英语演讲稿范文
2014/04/24 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android