原生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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
详解微信UnionID作用
May 15 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
详解JavaScript 作用域
Jul 14 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输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
关于js datetime的那点事
2011/11/15 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
js实现简单点赞操作
2020/03/17 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
final, finally, finalize的区别
2012/03/01 面试题
竞职演讲稿范文
2014/01/11 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
企业法人代表证明书
2014/09/27 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
中英文求职信范文
2015/03/19 职场文书
心得体会格式及范文
2016/01/25 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记