JS（js）图片轮播

最新推荐文章于 2023-09-21 22:55:09 发布

laity01

最新推荐文章于 2023-09-21 22:55:09 发布

阅读量72

点赞数

分类专栏：练习文章标签： js css javascript html

本文链接：https://blog.csdn.net/m0_57675124/article/details/117820228

版权

练习专栏收录该内容

39 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#max{
				width: 1300px;
				overflow: hidden;
				position: relative;
				margin: 0 auto;
			}
			.firli{
				width: 1300px;
				height: 310px;
				float: left;
				list-style: none;
			}
			.firul{
				width: 5200px;
				height: 310px;
				padding: 0px;
				margin: 0px;
				transition: all 2s;
			}
			.firspans{
				z-index: 9999;
				position: absolute;
				padding-top: 103px;
				width: 1300px;
			}
			.firspans span{
				font-size: 3em;
				color: seashell;
			}
			.firspans span:hover{
				/* 鼠标变手 */
				cursor: pointer;
				background-color: rgba(192,192,192,0.29);
			}
			.firols{
				width: 250px;
				height: 25px;
				z-index: 9999;
				position: absolute;
				right: 50px;
				bottom: 20px;
			}
			.firol{
				float: left;
				border-radius: 100px;
				background-color: aquamarine;
				width: 25px;
				height: 25px;
				margin-left: 10px;
				/* 设置透明 */
				opacity: 0.3;
			}
			.firol:hover{
				background-color: antiquewhite;
			}
		</style>
 	</head>
 	<body>
		<div id="max">
		        <div class="firspans">
		            <span title="1" class="firspan"><</span>
					<span title="0" class="firspan" style="float: right;">></span>
		        </div>
				<ul class="firul">
		                <li class="firli"><img src="img/pic_01.jpg" alt=""/></li>
		                <li class="firli"><img src="img/pic_02.jpg" alt=""/></li>
		                <li class="firli"><img src="img/pic_03.jpg" alt=""/></li>
		                <li class="firli"><img src="img/pic_04.jpg" alt=""/></li>
		            </ul>
                <div class="firols">
					<div class="firol"></div>
					<div class="firol"></div>
					<div class="firol"></div>
					<div class="firol"></div>
				</div>     
		    </div>
			<script>
				//跑动的次数
				var count=0;
				//动画的执行方向
				var isgo=false;
				//定义计时器对象
				var timer;
				window.onload=function(){
					//获取ul元素
					var firul=document.getElementsByClassName('firul')[0];
					//获取所有的li图片元素
					var firli=document.getElementsByClassName('firli');
					//获取控制方向的箭头元素
					var firspan=document.getElementsByClassName('firspan');
					//获取所有按钮元素
					var firol=document.getElementsByClassName('firol');
					firol[0].style.backgroundColor='antiquewhite';
					//定义计时器，控制图片移动
					showtime();
					function showtime(){
						timer=setInterval(function(){
							if(isgo==false){
								count++;
								firul.style.transform='translate('+-1300*count+'px)';
								if(count>=firli.length-1){
									count=firli.length-1;
									isgo=true;
								}
							}else{
								count--;
								firul.style.transform='translate('+-1300*count+'px)';
								if(count<=0){
									count=0;
									isgo=false;
								}
							}
							for(var i=0;i<firol.length;i++){
								firol[i].style.backgroundColor='aquamarine';
							}
							firol[count].style.backgroundColor='antiquewhite';
						},3000)
					}
					//鼠标进入左右方向键操作
					for(var i=0;i<firspan.length;i++){
						//鼠标悬停时
						firspan[i].onmouseover=function(){
							//停止定时器
							clearInterval(timer);
						}
						//鼠标离开时
						firspan[i].onmouseout=function(){
							//添加定时器
							showtime();
						}
						firspan[i].onclick=function(){
							//区分左右
							if(this.title==0){
								count++;
								if(count>3){
									count=0;
								}
							}else{
								count--;
								if(count<0){
									count=3;
								}
							}
							firul.style.transform='translate('+-1300*count+'px)';
							
							for(var i=0;i<firol.length;i++){
								firol[i].style.backgroundColor='aquamarine';
							}
							firol[count].style.backgroundColor='antiquewhite';
						}
					}
					//鼠标悬停在底部按钮的操作
					for(var b=0;b<firol.length;b++){
						firol[b].index=b;
						firol[b].onmouseover=function(){
							clearInterval(timer);
							for(var a=0;a<firol.length;a++){
								firol[a].style.backgroundColor='aquamarine';
							}
							firol[this.index].style.backgroundColor='antiquewhite';
							//让count值对应
							//为了控制方向
							if(this.index==3){
								isgo=true;
							}
							if(this.index==0){
								isgo=false;
							}
							count=this.index;
							firul.style.transform='translate('+-1300*this.index+'px)';
						}
						firol[b].onmouseout=function(){
							//添加定时器
							showtime();
						}
					}
				}
				
			</script>

 	</body>
 </html>

laity01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS（js）图片轮播

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } #max{ width: 1300px; overflow: hidden; position: relative; margi.
复制链接

扫一扫