JavaScript实现大图轮播效果


Posted in Javascript onJanuary 11, 2017

本文实例为大家分享了js图片轮播效果的具体代码,供大家参考,具体内容如下

<head>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>大图轮播</title>
  <style type="text/css">
   * {
    margin: 0px;
    padding: 0px;
   }
   
   #container {
    width: 500px;
    height: 300px;
    /*border: 1px solid black;*/
    position: relative;
    overflow: hidden;
   }
   
   .btn {
    height: 100%;
    width: 30px;
    /*border: 1px solid red;*/
    position: absolute;
    text-align: center;
    line-height: 300px;
    font-size: 40px;
    font-weight: 900;
    color: black;
    opacity: 0.3;
    transition: 0.6s;
    z-index: 999;
    background-color: white;
   }
   
   .btn:hover {
    cursor: pointer;
    opacity: 0.8;
   }
   
   #left-btn {
    left: 0px;
    top: 0px;
   }
   
   #right-btn {
    right: 0px;
    top: 0px;
   }
   
   #ad-container {
    width: 2500px;
    height: 300px;
    /*border: 1px solid blue;*/
    position: relative;
   }
   
   .ad {
    width: 500px;
    height: 300px;
    float: left;
    text-align: center;
    line-height: 300px;
    font-size: 100px;
    font-family: "微软雅黑";
   }
  </style>
 </head>

 <body>
  <div id="container">
   <div id="left-btn" class="btn">
    <</div>
     <div id="right-btn" class="btn">></div>
     <div id="ad-container">
      <div class="ad" style="background-color: mediumpurple;">1</div>
      <div class="ad" style="background-color: yellowgreen;">2</div>
      <div class="ad" style="background-color: rosybrown;">3</div>
      <div class="ad" style="background-color: salmon;">4</div>
      <div class="ad" style="background-color: cyan;">5</div>
     </div>
   </div>
 </body>

</html>
<script type="text/javascript">
 var rightBtn = document.getElementById("right-btn");
 var leftBtn = document.getElementById("left-btn");
 var n = 1;
/* var count = 1*/;
 var arr = new Array();
/* var m=1;
*/ rightBtn.onclick = function() {
  var x = window.setInterval("to_right()", 20);
  arr.push(x);
 }

 function clear() {
  for(var i in arr) {
   window.clearInterval(arr[i]);
  }
 }

 function to_right() {

  var adContainer = document.getElementById("ad-container");
  if(n == 5) {
   clear();
  } else if(adContainer.offsetLeft != n * (-500)) {
   adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px";
  } else {
   n++;
   clear();
  }
 }
 var arr1 = new Array();

 leftBtn.onclick = function() {
  var y = window.setInterval("to_left()", 20);
  arr1.push(y);
 }

 function clear2() {
  for(var y in arr1) {
   window.clearInterval(arr1[y]);
  }
 }

 function to_left() {

  var adContainer = document.getElementById("ad-container");
  if(n == 1) {
   clear2();
  } else if(adContainer.offsetLeft != (n-2) * (-500)) {
   adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px";
  } else {
   n--;
   clear2();
  }
 }

 
</script>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
js post提交调用方法
Feb 12 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JS验证字符串功能
Feb 22 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
前端面试知识点目录一览
Apr 15 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 #Javascript
canvas 弹幕效果(实例分享)
Jan 11 #Javascript
JQuery实现动态操作表格
Jan 11 #Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 #Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 #Javascript
Vue数据驱动模拟实现2
Jan 11 #Javascript
jQuery实现对象转为url参数的方法
Jan 11 #Javascript
You might like
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
JS操作Cookies的小例子
2013/10/15 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
python中异常捕获方法详解
2017/03/03 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
django 简单实现登录验证给你
2019/11/06 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
大学三年的自我评价
2013/12/25 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
设备售后服务承诺书
2014/05/30 职场文书
大学活动总结模板
2014/07/10 职场文书
公司行政管理制度范本
2015/08/05 职场文书
倡议书怎么写?
2019/04/11 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS