杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

JavaScript案例之跑马灯左右无缝连接

效果图：

思路：

1.先做界面

1.1 制作一个大盒子，进行存放整个图片及按钮区域

1.2 制作两个按钮和中间区域盒子

1.3 中间区域盒子中使用无序列表进行排放图片，并且每个图片可以作为一个链接进行点击

2..CSS

2.1 清除全局的外边距和内边距

2.2 去除无序列表的黑点

2.3 去除存放图片区域的边界线

2.4 确定大盒子的宽高和位置【宽、高、上下空出50像素，水平居中、绝对定位】

2.5 左、按钮的样式【块级显示、宽、高、背景图片及平铺位置、绝对定位、上、左】

2.6 左按钮悬浮后样式【背景图片及平铺位置】

2.7 右、按钮的样式【块级显示、宽、高、背景图片及平铺位置、绝对定位、上、左】

2.8 右按钮悬浮后样式【背景图片及平铺位置】

2.9 中间盒子定位

2.10 中间盒子悬浮效果

3..JavaScript

3.1根据不同的标签名称去获取不同的元素

...{尚未写完，稍后补上}

参考代码：

Html代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript案例之跑马灯左右无缝连接</title>
</head>
<body>
<div class="roll" id="roll"><a href="javascript:void(0);" class="btn_left"></a><a href="javascript:void(0);" class="btn_right"></a><div class="wrap"><ul><li><a href="http://teach.javabs.cn/"><img src="img/1.jpg" alt="杨校老师在线课堂开课了" /></a></li><li><a href="http://teach.javabs.cn/"><img src="img/2.jpg" alt="杨校老师在线课堂开课了"/></a></li><li><a href="http://teach.javabs.cn/"><img src="img/3.jpg" alt="杨校老师在线课堂开课了"/></a></li><li><a href="http://teach.javabs.cn/"><img src="img/4.jpg" alt="杨校老师在线课堂开课了"/></a></li></ul></div>
</div>
</body>
</html>

CSS代码

* {padding: 0;margin: 0;
}li {list-style: none;
}img {border: 0;
}.roll {width: 880px;height: 108px;margin: 50px auto 0;position: relative;
}.btn_left {display: block;width: 68px;height: 68px;background: url(img/btn.jpg) no-repeat -70px -69px;position: absolute;top: 20px;left: 1px;z-index: 1;
}.btn_left:hover {background: url(img/btn.jpg) no-repeat -70px 0;
}.btn_right {display: block;width: 68px;height: 68px;background: url(img/btn.jpg) no-repeat 1px -69px;position: absolute;top: 20px;right: 0;z-index: 1;
}.btn_right:hover {background: url(img/btn.jpg) no-repeat 1px 0;
}.roll .wrap {width: 728px;height: 108px;margin: 0 auto;position: relative;overflow: hidden;
}.roll ul {position: absolute;top: 0;left: 0;
}.roll li {float: left;width: 182px;height: 108px;text-align: center;
}.roll li a:hover {position: relative;top: 2px;
}.control {border-bottom: 1px solid #ccc;background: #eee;text-align: center;padding: 20px 0;
}

JavaScript代码

window.onload = function() {var oDiv = document.getElementById('roll');var oUl = oDiv.getElementsByTagName('ul')[0];var aLi = oUl.getElementsByTagName('li');var oBtn = oDiv.getElementsByTagName('a'); //获取按钮oUl.innerHTML += oUl.innerHTML;oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';var speed = -5;var time = null;time = setInterval(function() {oUl.style.left = oUl.offsetLeft + speed + 'px';//alert(oUl.offsetWidth)//-728//alert(oUl.offsetLeft)//-5if(oUl.offsetLeft < -oUl.offsetWidth / 2) {oUl.style.left = 0 + 'px';} else if(oUl.offsetLeft > 0) {oUl.style.left = -oUl.offsetWidth / 2 + 'px';}}, 30);oBtn[0].onmouseover = function() {speed = -5;};oBtn[1].onmouseover = function() {speed = 5;};oUl.onmouseover = function() {clearInterval(time);}oUl.onmouseout = function() {time = setInterval(function() {oUl.style.left = oUl.offsetLeft + speed + 'px';if(oUl.offsetLeft < -oUl.offsetWidth / 2) {oUl.style.left = 0 + 'px';} else if(oUl.offsetLeft > 0) {oUl.style.left = -oUl.offsetWidth / 2 + 'px';};}, 30);}};

图片素材分享：

作者：杨校

出处： http://blog.csdn.net/kese7952

分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题，可邮件（397583050@qq.com）咨询。

杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播相关推荐

杨校老师课堂之JavaScript右下角广告弹框教程
案例制作思路: 1.先制作界面添加一个盒子包含一个按钮,使盒子绝对定位在右上角添加一个大盒子,同理,将盒子居于左下角:其中内部包含一个顶端盒子和底部盒子顶端盒子因为是属于大盒子内部的存在,所以宽 ...
杨校老师课堂之CSDN博客查找博文汇总-目录
目录 1.面试 2.JavaWeb文件[图片]上传功能: 3.BaseServlet设计教程 4.富文本编辑器使用教程 5.下载Jar包教程 6.页面原型下载 7.Java连接数据库 ...
杨校老师课堂之WEB前端HTML
目录 1. 概念: 2. 快速入门: 2.1 语法: 2.2 代码: 3. 认识标签: 3.1 文件标签:构成html最基本的标签 3.2 文本标签:和文本有关的标签 3.3 图片标签: 3.4 列表 ...
杨校老师课堂之Java类与对象、封装、构造方法
杨校老师课堂之Java类与对象.封装.构造方法本篇文章内容如下: 面向对象类与对象三大特征--封装构造方法教学目标能够理解面向对象的思想能够明确类与对象关系能够掌握类的定义格式能够掌 ...
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
JQuery案例想使用Jquery ,必须要导入Jquery的库文件jquery-1.7.2.min.js: 下载地址: https://blog-static.cnblogs.com/files/ ...
杨校老师课堂之Spring框架面试题【开发工程师面试前必看】
1.spring 中都用到了哪些设计模式? 2.spring 中有哪些核心模块? 3.说一下你理解的 IOC 是什么? 4.spring 中的 IOC 容器有哪些?有什么区别? 5.那 BeanFac ...
杨校老师课堂之Maven下载与配置阿里云镜像
1. 下载下载地址: https://archive.apache.org/dist/maven/maven-3/ 建议: 不要存放在C盘内: 不要存放在桌面不要存放在有中文路径中或存放在带有特殊 ...
杨校老师课堂之DeDeCMS织梦后台目录介绍篇
织梦后台目录认识基本的目录结构 ../a 默认生成文件存放目录../data 系统缓存或其他可写入数据存放目录../dede 默认后台登录管理(可任意改名)../images 系统默认的部分系统需要 ...
杨校老师课堂之集群内SSH免密登录功能配置
SSH免密登录功能配置 1. 在主节点虚拟机内进行如下操作: [root@hadoop1 tmp]# ssh-keygen -t rsaGenerating public/private rsa ke ...

杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播相关推荐

最新文章

热门文章