原生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 13 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
机械设计专业应届生求职信
2013/11/21 职场文书
军训感想500字
2014/02/20 职场文书
大气污染防治方案
2014/05/19 职场文书
同学聚会策划方案
2014/06/06 职场文书
学习十八大的心得体会
2014/09/12 职场文书