杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/80177295  JavaScript案例之跑马灯左右无缝连接 效果图: 思路:     1.
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/80177295
 

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);
	}

};

图片素材分享:

          

分割线 
作者: 杨校

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

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

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


版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章