原生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 相关文章推荐
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
js对象的复制继承实例
Jan 10 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
JavaScript代码实现简单计算器
Dec 27 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实现文件编码批量转换
2014/03/10 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
javascript 回调函数详解
2014/11/11 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
js实现右键菜单功能
2016/11/28 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
python定向爬取淘宝商品价格
2018/02/27 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
初一体育教学反思
2014/01/29 职场文书
企业管理标语
2014/06/10 职场文书
小学庆六一主持词
2015/06/30 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python