JS+HTML+CSS实现轮播效果


Posted in Javascript onNovember 28, 2017

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

1.lunbo.html代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>大轮播</title> 
  <link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/> 
  <script src="JS/lunbo.js" type="text/javascript"></script> 
</head> 
 
<body> 
<div id="container"> 
  <div id="list" style="left: -1350px;"> 
    <img src="image/banner_3.jpg"/> 
    <img src="image/banner_1.jpg"/> 
    <img src="image/banner_2.jpg"/> 
    <img src="image/banner_3.jpg"> 
    <img src="image/banner_1.jpg"/></div> 
  <div id="buttons"> 
    <span index="1"></span> 
    <span index="2"></span> 
    <span index="3"></span> 
  </div> 
  <a href="javascript:;" id="prev" class="arrow" style="font-size:100px; text-align:center;"><</a> 
  <a href="javascript:;" id="next" class="arrow" style="font-size:100px; text-align:center;">></a></div> 
</body> 
 
</html>

2.CSS/lunbo.css代码:

body { 
  margin: 0px; 
  padding: 0px; 
  width: 1350px; 
  height: 618px; 
} 
 
a { 
  text-decoration: none; 
} 
 
#container { 
  width: 1350px; 
  height: 618px; 
  overflow: hidden; 
  position: relative; 
  border-top: 1px solid #ac6a0a; 
} 
 
#list { 
  width: 6750px; 
  height: 618px; 
  position: absolute; 
  z-index: 1; 
} 
 
#list img { 
  float: left; 
  width: 1350px; 
  height: 618px; 
} 
 
#buttons { 
  position: absolute; 
  height: 20px; 
  width: 60px; 
  z-index: 2; 
  bottom: 20px; 
  left: 50%; 
} 
 
#buttons span { 
  cursor: pointer; 
  float: left; 
  border: 1px solid #ad6a0a; 
  width: 10px; 
  height: 10px; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%; 
  margin-right: 5px; 
} 
 
#buttons .on { 
  background: orangered; 
} 
 
.arrow { 
  cursor: pointer; 
  display: none; 
  line-height: 100px; 
  text-align: center; 
  width: 40px; 
  height: 40px; 
  position: absolute; 
  z-index: 2; 
  top: 180px; 
  background-color: RGBA(0, 0, 0, 0); 
  color: #fff; 
} 
 
.arrow:hover { 
  background-color: RGBA(0, 0, 0, 0); 
} 
 
#container:hover .arrow { 
  display: block; 
} 
 
#prev { 
  left: 10px; 
  color: #ffffff; 
} 
 
#next { 
  right: 10px; 
  color: #ffffff; 
}

3.JS/lunbo.js代码:

window.onload = function () { 
  var container = document.getElementById('container'); 
  var list = document.getElementById('list'); 
  var buttons = document.getElementById('buttons').getElementsByTagName('span'); 
  var prev = document.getElementById('prev'); 
  var next = document.getElementById('next'); 
  var index = 1; 
  var len = 3; 
  var animated = false; 
  var interval = 3000; 
  var timer; 
  var size = 1350; 
 
  function animate(offset) { 
    if (offset == 0) { 
      return; 
    } 
    animated = true; 
    var time = 300; 
    var inteval = 10; 
    var speed = offset / (time / inteval); 
    console.log("speed:" + speed); 
    var left = parseInt(list.style.left) + offset; 
 
    var go = function () { 
      if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { 
        list.style.left = parseInt(list.style.left) + speed + 'px'; 
        console.log(list.style.left); 
        setTimeout(go, inteval); 
      } else { 
        list.style.left = left + 'px'; 
        if (left > -200) { 
          list.style.left = -size * len + 'px'; 
        } 
        if (left < ( -size * len)) { 
          list.style.left = '-' + size + 'px'; 
        } 
        animated = false; 
        console.log("left:" + list.style.left); 
      } 
    } 
    go(); 
  } 
 
  function showButton() { 
    for (var i = 0; i < buttons.length; i++) { 
      if (buttons[i].className == 'on') { 
        buttons[i].className = ''; 
        break; 
      } 
    } 
    buttons[index - 1].className = 'on'; 
  } 
 
  function play() { 
    timer = setTimeout(function () { 
        next.onclick(); 
        play(); 
      }, 
      interval); 
  } 
 
  function stop() { 
    clearTimeout(timer); 
  } 
 
  next.onclick = function () { 
    if (animated) { 
      return; 
    } 
    if (index == len) { 
      index = 1; 
    } else { 
      index += 1; 
    } 
    animate(-size); 
    showButton(); 
  } 
  prev.onclick = function () { 
    if (animated) { 
      return; 
    } 
    if (index == 1) { 
      index = len; 
    } else { 
      index -= 1; 
    } 
    animate(size); 
    showButton(); 
  } 
  for (var i = 0; i < buttons.length; i++) { 
    buttons[i].onclick = function () { 
      if (animated) { 
        return; 
      } 
      if (this.className == 'on') { 
        return; 
      } 
      var myIndex = parseInt(this.getAttribute('index')); 
      var offset = -size * (myIndex - index); 
 
      animate(offset); 
      index = myIndex; 
      showButton(); 
    } 
  } 
  container.onmouseover = stop; 
  container.onmouseout = play; 
  play(); 
};

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

Javascript 相关文章推荐
js捕获鼠标滚轮事件代码
Dec 16 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 #Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 #Javascript
vue-music关于Player播放器组件详解
Nov 28 #Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 #Javascript
JS实现的找零张数最小问题示例
Nov 28 #Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 #Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 #Javascript
You might like
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
node跨域请求方法小结
2017/08/25 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python实现批量修改文件名代码
2017/09/10 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
python集合的新增元素方法整理
2020/12/07 Python
python 装饰器的基本使用
2021/01/13 Python
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
先进事迹报告会感言
2014/01/24 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
计算机求职信
2014/07/02 职场文书
小学班主任评语
2014/12/29 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
python四种出行路线规划的实现
2021/06/23 Python
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android