原生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 相关文章推荐
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
javascript中json基础知识详解
Jan 19 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
vue常用高阶函数及综合实例
Feb 25 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
杏林同学录(四)
2006/10/09 PHP
php常用hash加密函数
2014/11/22 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
sort命令的作用和用法
2013/08/25 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
2015年体育部工作总结
2015/04/02 职场文书
收入证明申请书
2015/06/12 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书