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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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
sony ICF-2010 拆解与改装
2021/03/02 无线电
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
php输出形式实例整理
2020/05/05 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
小程序实现日历左右滑动效果
2019/10/21 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
django允许外部访问的实例讲解
2018/05/14 Python
python实现简易内存监控
2018/06/21 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python的依赖管理的实现
2019/05/14 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
pandas参数设置的实用小技巧
2020/08/23 Python
优秀民警事迹材料
2014/01/29 职场文书
学校花圃的标语
2014/06/18 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
公司介绍信范文
2015/01/31 职场文书
食品药品安全责任书
2015/05/11 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书