杨校老师课堂之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)//-5
		if(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);
	}

};

图片素材分享:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python疯子

Swift - Button,Label

14420
来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

12320
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件

要实现轮播图,必须在首尾添加图片,如果直接在 html 代码直接添加图片的话,由于图片的数量是不固定的,那么每次图片的数量发生改变的话,不仅需要设置 html ...

19310
来自专栏7号代码

Android应用界面开发——布局

线性布局可以控制各组件横向排列(通过设置属性android:orientation属性控制),也可控制各组件纵向排列。

22420
来自专栏欧阳大哥的轮子

iOS下的界面布局利器-MyLayout布局框架

MyLayout是一套iOS界面视图布局框架。其内核是基于对UIView的layoutSubviews方法的重载以及对子视图的bounds和center属性的设...

15730
来自专栏IMWeb前端团队

Canvas实现progress效果

据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件   Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用j...

26970
来自专栏杂七杂八

盒子模型

盒模型(box model)是CSS中的一个重要概念,它是元素大小的呈现方式。需要记住的是:"every element in web design is a ...

30490
来自专栏娱乐心理测试

小程序的拖拽、缩放和旋转手势

16540
来自专栏谈补锅

CSS笔记

@import url(xx.css): 在一个css中,添加对其他css文件的引用

17540
来自专栏程序员互动联盟

【专业技术】CSS知识点总结

1、CSS指层叠样式表(Cascading Style Sheets) 2、使用CSS样式常见的三种方式: 1)<link href=".............

363100

扫码关注云+社区

领取腾讯云代金券