前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

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

作者头像
杨校
发布2018-12-06 10:43:18
1.1K0
发布2018-12-06 10:43:18
举报
文章被收录于专栏:Java技术分享圈

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代码

代码语言:javascript
复制
<!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代码

代码语言:javascript
复制
* {
	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代码

代码语言: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);
	}

};

图片素材分享:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年05月03日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档