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

jquery.lazyload 实现图片延迟加载jquery插件

Feb 06 Javascript

jquery下利用jsonp跨域访问实现方法

Jul 29 Javascript

js控制页面控件隐藏显示的两种方法介绍

Oct 09 Javascript

jQuery中first()方法用法实例

Jan 06 Javascript

JavaScript 事件绑定及深入

Apr 13 Javascript

jQuery的文档处理程序详解

May 10 Javascript

Bootstrop实现多级下拉菜单功能

Nov 24 Javascript

jQuery实现立体式数字动态增加（animate方法）

Dec 21 Javascript

jquery滚动条插件slimScroll使用方法

Feb 09 Javascript

AngularJS中controller控制器继承的使用方法

Nov 03 Javascript

JavaScript内存泄漏的处理方式

Nov 20 Javascript

node.js使用express框架进行文件上传详解

Mar 03 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中file_exists使用中遇到的问题小结

2016/04/05 PHP

yii2实现分页，带搜索的分页功能示例

2017/01/07 PHP

常用js字符串判断方法整理

2013/10/18 Javascript

jquery得到iframe src属性值的方法

2014/09/25 Javascript

基于NodeJS的前后端分离的思考与实践（四）安全问题解决方案

2014/09/26 NodeJs

JavaScript输出当前时间Unix时间戳的方法

2015/04/06 Javascript

js同源策略详解

2015/05/21 Javascript

第五章之BootStrap 栅格系统

2016/04/25 Javascript

关于JS中setTimeout()无法调用带参函数问题的解决方法

2016/06/21 Javascript

15个非常实用的JavaScript代码片段

2016/12/18 Javascript

js 判断数据类型的几种方法

2017/01/13 Javascript

纯js的右下角弹窗实例

2017/03/12 Javascript

使用angular帮你实现拖拽的示例

2017/07/05 Javascript

Nodejs实现爬虫抓取数据实例解析

2018/07/05 NodeJs

对angularJs中ng-style动态改变样式的实例讲解

2018/09/30 Javascript

小程序实现自定义导航栏适配完美版

2019/04/02 Javascript

JavaScript使用面向对象实现的拖拽功能详解

2019/06/12 Javascript

Vue 刷新当前路由的实现代码

2019/09/26 Javascript

java遇到微信小程序 "支付验证签名失败" 问题解决

2019/12/22 Javascript

Python unittest单元测试框架总结

2018/09/08 Python

pandas对dataFrame中某一个列的数据进行处理的方法

2019/07/08 Python

python字符串切割:str.split()与re.split()的对比分析

2019/07/16 Python

Keras自定义IOU方式

2020/06/10 Python

Python获取excel内容及相关操作代码实例

2020/08/10 Python

Pytorch 扩展Tensor维度、压缩Tensor维度的方法

2020/09/09 Python

解决CSS3的opacity属性带来的层叠顺序问题

2016/05/09 HTML / CSS

美国电视购物HSN官网：HSN

2016/09/07 全球购物

俄罗斯隐形眼镜和眼镜在线商店：Cronos

2020/06/02 全球购物

英国领先的在线鱼贩：The Fish Society

2020/08/12 全球购物

技能竞赛活动方案

2014/02/21 职场文书

分公司负责人任命书

2014/06/04 职场文书

先进工作者事迹材料

2014/12/23 职场文书

叶问观后感

2015/06/15 职场文书

Python如何识别银行卡卡号?

2021/06/10 Python

Python实现日志实时监测的示例详解

2022/04/06 Python

vue 数字翻牌器动态加载数据

2022/04/20 Vue.js