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 相关文章推荐
不懂JavaScript应该怎样学
Apr 16 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
小程序实现列表删除功能
Oct 30 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 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
网络资源
2006/10/09 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python中的默认参数实例分析
2018/01/29 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python3开发环境搭建详细教程
2020/06/18 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
小学国庆节活动方案
2014/02/11 职场文书
爽歪歪广告词
2014/03/20 职场文书
给学校的建议书范文
2014/05/15 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
中考学习决心书
2015/02/04 职场文书
狂人日记读书笔记
2015/06/30 职场文书
队名及霸气口号大全
2015/12/25 职场文书
导游词之无锡梅园
2019/11/28 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python