原生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 相关文章推荐
文字幻灯片
Jun 26 Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
DOM 事件流详解
Jan 20 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
nodejs教程之入门
2014/11/21 NodeJs
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
Python实现代码块儿折叠
2020/04/15 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python xlwt模块使用代码实例
2020/06/10 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
企业治理工作自我评价
2013/09/26 职场文书
高考励志标语
2014/06/05 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
二手房购房意向书
2015/05/09 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python