原生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使用prototype定义对象类型
Feb 07 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
微信小程序 解析网页内容详解及实例
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无法访问远程mysql的问题分析及解决
2013/05/16 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
python中使用序列的方法
2015/08/03 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
django中related_name的用法说明
2020/05/20 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
市政施工员自我鉴定
2014/01/15 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
大学生毕业求职信
2014/06/12 职场文书
国际贸易实训报告
2014/11/05 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
校长师德表现自我评价
2015/03/05 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书