专栏首页Java技术分享圈杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

杨校老师课堂之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 条评论
登录 后参与评论

相关文章

  • 杨老师课堂之JavaScript定时器案例的红绿灯设计

    杨校
  • 杨老师课堂之JavaScript定时器限时抢购秒杀商品案例

    定时器 setInterval(函数,毫秒):在指定的毫秒数后调用函数或执行一段代码

    杨校
  • 杨老师课堂之JavaScript右下角广告弹框

    杨校
  • 用CSS3绘制iPhone手机

    本博客所有文章如无特别注明均为原创。作者:阿珏 ,复制或转载请以超链接形式注明转自 阿珏博客 。 原文地址《用CSS3绘制iPhone手机》

    阿珏
  • CSS构造模型与动态布局

    版权声明:本文为博主原创文章,转载请注明出处。 ...

    魏晓蕾
  • 微信小程序--粘性小球

    海轰Pro
  • EDI 报文结构

    EDI标准的规则准确定义了信息在文档中的位置,以及查找信息的方式。因此,在创建EDI文档时(如,采购订单),必须严格按照EDI标准(ANSI/EDIFACT)的...

    知行软件EDI
  • Etcd 监控

    Running a Prometheus monitoring service is the easiest way to ingest and record ...

    用户5760343
  • 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第七节)

    剽悍一小兔
  • 从项目中学习HTML+CSS

    最近由于工作原因以及自己的懈怠,已经很久都没有更新过博客了。通过这段时间,我发现坚持一件事情是真的很难,都说万事开头难,但是在放弃这件事上好像开头了后面就顺理成...

    Masimaro

扫码关注云+社区

领取腾讯云代金券