开发者社区> 杨校> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

杨校老师课堂之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)咨询。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python全栈 Web(JavaScript DOM树、DOM对象、BOM对象)
外部对象: BOM和DOM BOM: Browser Object Module 浏览器对象模型 将浏览器比喻成一个对象-window (网页初始化自动创建) 可以通过window对象操作浏览器 DOM: Document Object .
2086 0
+关注
杨校
我是一名培训讲师,在常年的开发工作中涉及到的领域有:javaEE、SSM、SSH、Oracle、Linux、Maven、SVN、JavaScript、Eexcl VBA等技术。简单来说我也算是一名全栈技术讲师,有着丰富的技术培训和技术讲座的经验。
75
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载