JS实现图片自动播放

最新推荐文章于 2024-07-03 02:53:04 发布

tansci

最新推荐文章于 2024-07-03 02:53:04 发布

阅读量9.7k

点赞数 17

分类专栏： JS 文章标签： JS CSS

本文链接：https://blog.csdn.net/typ1805/article/details/93656013

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、JS实现图片自动播放

1、先看效果图

2、完整代码

<!DOCTYPE html>
<html>
<head>
	<style>
		/* 定义样式 */
		body{
			margin: 5% 30%;
		}
		.bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px  #142732;}
		.box{width:700px;height:400px;margin:0px auto;overflow: hidden;}
        /* box的宽度为img的个数乘以bannerimage的宽度*/
		.img-g{width:4900px;height:400px;position:relative;}
		.img-g img{float:left;width:700px;height:400px;}
		.button-g{position:relative;top:-35px;text-align:center;}
		.button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;}
	</style>

	<script type="text/javascript" src="js/jquery.js"></script>

	<script type="text/javascript">
	$(function () {
	    // 实现自动播放
		var p=document.getElementsByClassName('img-g')[0];
		var button=document.querySelectorAll('.button-g span')
		// 设置3秒播放
		window.timer=setInterval(move,3000);
		// 轮播设置
		function move(){
		    // bannerimage的宽度乘以图片的个数
			if(parseInt(p.style.left)>-4200){
			    // 和bannerimage的宽度保持一致即可：700
				p.style.left=parseInt(p.style.left)-700+'px'
				p.style.transition='left 1s';
				tog(-Math.round(parseInt(p.style.left)/700))
				if(parseInt(p.style.left)<=-4200){
					setTimeout(function(){
						tog(0)
						p.style.left='0px'
						p.style.transition='left 0s';
					},1000)
				}
			}else{
				p.style.left='0px'
				p.style.transition='left 0s';
			}
		}

		// 设置小圆点
		for(var i=0;i<button.length;i++){
			// button[i].style.backgroundColor='#eee';
			button[i].onclick=function(){
				p.style.left=-700*this.getAttribute('data-index')+'px'
				tog(this.getAttribute('data-index'))
				clearInterval(window.timer)
				window.timer=setInterval(move,3000);
			}
		}
		// 设置小圆点
		function tog(index){
			if(index>5){
				tog(0);
				return;
			}
			for(var i=0;i<button.length;i++){
				button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
			}
			button[index].style.backgroundColor='rgb(255, 255, 255)';
		}

		// 鼠标移上事件
		p.onmouseover=function(){
			clearInterval(window.timer)
		}
        // 鼠标移除事件
		p.onmouseout=function(){
			window.timer=setInterval(move,3000);
		}
	});
	</script>
</head>
<body>	
	<div class="bannerimage">
		<div class='box'>
			<div class='img-g' style='left:0px;transition:left 1s;'>
				<img src="images/img_1.jpg" alt="1">
				<img src="/images/img_2.jpg" alt="2">
				<img src="/images/img_3.jpg" alt="3">
				<img src="/images/img_4.jpg" alt="4">
				<img src="/images/img_5.jpg" alt="5">
				<img src="/images/img_6.jpg" alt="6">
				<img src="/images/img_1.jpg" alt="1">
			</div>
			<div class='button-g'>
				<span data-index='0' style="background-color: #eeeeee"></span>
				<span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span>
				<span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span>
				<span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span>
				<span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span>
				<span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span>
			</div>
		</div>
	</div>
</body>
</html>

3、关键代码讲解

3.1、css设置注意事项：img-g的宽度为：img的个数乘以bannerimage的宽度，如下：

.img-g{width:4900px;height:400px;position:relative;}

3.2、轮播常量及事件设置

常量1设置为：bannerimage的宽度乘以图片的个数，如下：

if(parseInt(p.style.left)>-4200){}

常量2设置为：bannerimage的宽度保持一致即可（700），如下：

p.style.left=parseInt(p.style.left)-700+'px'

小圆点显示设置：

// 设置小圆点
for(var i=0;i<button.length;i++){
	button[i].style.backgroundColor='#eee';
	button[i].onclick=function(){
	    p.style.left=-700*this.getAttribute('data-index')+'px'
	    tog(this.getAttribute('data-index'))
	    clearInterval(window.timer)
	    window.timer=setInterval(move,3000);
	}
}
// 设置小圆点点击事件
function tog(index){
    // 圆点的个数
	if(index>5){
		tog(0);
		return;
	}
	for(var i=0;i<button.length;i++){
        // 默认圆点的显示颜色
		button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
	}
    // 当前圆点的显示颜色
	button[index].style.backgroundColor='rgb(255, 255, 255)';
}

鼠标事件：鼠标移上停止播放，移除3秒后播放。

// 鼠标移上事件
p.onmouseover=function(){
	clearInterval(window.timer)
}
// 鼠标移除事件
p.onmouseout=function(){
	window.timer=setInterval(move,3000);
}

欢迎关注

tansci

关注

17
点赞
踩
92

收藏

觉得还不错? 一键收藏
9
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录