原生JS实现幻灯片


Posted in Javascript onFebruary 22, 2017

效果如下:

原生JS实现幻灯片

代码如下:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <style type = "text/css">
 *{ padding: 0; margin: 0; }
 li { list-style: none; }
 .box {
 width: 800px;
 height: 450px;
 margin: 50px auto;
 position: relative;
  overflow:hidden;
 }
 .box span {
 width: 40px;
 height: 60px; 
 display: block;
 position: absolute;
 top: 225px;
 margin-top: -20px;
 cursor: pointer;
 z-index: 1;
 }
 .box #left {
 width: 76px;
 height: 112px;
 background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat left 0;
 left: 0;
  margin-top: -66px;
 display: none;
 }
 .box #right {
 width: 76px;
 height: 112px;
 background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat right 0;
 right: 0;
  margin-top: -66px;
 display: none;
 }
 .box #txt {
 width: 100%;
 height: 30px;
 background-color: #000;
 opacity: 0.4;
 position: absolute;
 bottom: 0;
 color: #fff;
 line-height: 30px;
 text-align: center;
 }
 #ad {
 width: 4000px;
 height: 450px;
 position: absolute;
 left: -1600px;
 }
 #ad li {
 float: left;
 }
  .box #left:hover {
 background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat left -112px;
 }
 .box #right:hover {
 background: url('http://www.w2bc.com/upload/201609/20/jiaoben4524/images/buttons.png') no-repeat right -112px;
 }
 </style>
 <script type = "text/javascript">
 window.onload = function(){
 function $(id){ return document.getElementById(id);}
 var aLi = $("ad").children;
 function animate(obj,target,arrt){
  //关闭上一个定时器
  clearInterval(obj.timer);
  $("txt").innerHTML = obj.children[0].children[0].alt;

  //管理定时器
  obj.timer = setInterval(function(){
 //移动步长
  var step = (target - obj.offsetLeft) / 10;
  //步长取整
  step = step > 0? Math.ceil(step):Math.floor(step);
  //移动盒子 : 盒子位置 + 步长
  obj.style.left = obj.offsetLeft + step+ "px";
  //关闭定时器
  if(obj.offsetLeft%800 ==0){
  clearInterval(obj.timer);
  //判断点击的方向
  if(arrt === "left"){
  var oLi = $("ad").children[aLi.length - 1].cloneNode(true);
  //添加到最前面
  obj.insertBefore(oLi,obj.children[0]);
  //删除最后一个盒子
  obj.removeChild(obj.children[aLi.length - 1]);
  //让ul恢复初始值
  obj.style.left = "-1600px";
 }else{
  //克隆第一个盒子
  var oLi = obj.children[0].cloneNode(true);
  //添加到最后面
  obj.appendChild(oLi);
  //删除第一个盒子
  obj.removeChild(obj.children[0]);
  //让ul恢复初始值
  obj.style.left = "-1600px";
 }
 }
  },20);
 }
 var timer = setInterval(autoplay,2000);
 function autoplay(){
  animate($("ad"),-2400,"right");
 }
 $("ad").parentNode.onmouseover = function(){
 clearInterval(timer);
 $("left").style.display = "block";
  $("right").style.display = "block";
 }
 $("ad").parentNode.onmouseout = function(){
  $("left").style.display = "none";
  $("right").style.display = "none";
  timer = setInterval(autoplay,2000);
 }
 $("left").onclick = function(){
  clearInterval(timer);
  animate($("ad"),-800,"left");
 }
 $("right").onclick = function(){
  clearInterval(timer);
  animate($("ad"),-2400,"right");
 }
 }
 </script>
 </head>
 <body>
 <div class="box"> 
 <ul id="ad">
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/4.jpg" alt="闲静似娇花照水,行动如弱柳扶风。"></li>
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/5.jpg" alt="心较比干多一窍,病如西子胜三分。"></li>
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/1.jpg" alt="两弯似蹙非蹙笼烟眉,一双似喜非喜含情目。"></li>
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/2.jpg" alt="态生两靥之愁,娇袭一身之病。"></li>
 <li><img src="http://www.w2bc.com/upload/201609/20/jiaoben4524/images/3.jpg" alt="泪光点点,娇喘微微。"></li>
 </ul>
 <p id="txt">泪光点点,娇喘微微</p>
 <span id="left"></span>
 <span id="right"></span>
 </div>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
javascript获取元素的计算样式
May 24 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
微信小程序 解析网页内容详解及实例
Feb 22 #Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 #Javascript
js中document.referrer实现移动端返回上一页
Feb 22 #Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 #Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 #Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 #Javascript
JavaScript实现256色转灰度图
Feb 22 #Javascript
You might like
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python条件和循环的使用方法
2013/11/01 Python
python中__slots__用法实例
2015/06/04 Python
python文件与目录操作实例详解
2016/02/22 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
python 线程的五个状态
2020/09/22 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
Android面试宝典
2013/08/06 面试题
七年级英语教学反思
2014/01/15 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
颁奖晚会主持词
2014/03/25 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
党建工作经验交流材料
2014/05/25 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
致运动员加油稿
2015/07/21 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Nginx的gzip相关介绍
2022/05/11 Servers