关于用js写一个轮播图的页面

是是是小z吗

已于 2023-03-04 22:44:08 修改

阅读量162

点赞数

分类专栏：前端设计文章标签： javascript 前端 html

于 2020-12-13 22:00:49 首次发布

本文链接：https://blog.csdn.net/Zhair/article/details/111146321

版权

前端设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于用js写一个轮播图的页面

任务要求：
1、图片每1秒钟切换1次。
2、当鼠标停留在整个页面上时，图片不进行轮播。
3、当点击切换页的选项上时，出现该选项的对应图片，而且切换页选项的背景颜色发生相应的变化。
4、当图片发生轮播切换时，在不点击选项卡的前提下，相应的选项卡背景颜色也自动发生变化。

代码：

<!DOCTYPE html>
<html>
<head>
	<title>HW11</title>
	<meta charset="utf-8">
	<style type="text/css">
        .allimg{ display: none; }
        .allword{
        	width: 300px;
        	text-align: center;
        	vertical-align: center;
        	 white-space: nowrap;  /*强制span不换行*/
     		 display: inline-block;  /*将span当做块级元素对待*/
     		 color: red;
     		 background-color:grey;
     		 margin:-3px        /*使inlineblock产生的空隙消除*/
        }
        .a1{
        	overflow: hidden;
        }
	</style>
</head>


<body>
	<div class="a1">
		<div class="navi">
			<span class="allword word1" onclick="changebyclick(0)" >python强化</span>
			<span class="allword word2" onclick="changebyclick(1)" >全栈开发</span>
			<span class="allword word3" onclick="changebyclick(2)" >html5开发</span>
			<span class="allword word4" onclick="changebyclick(3)" >前后端</span>
		</div>
		<div class="img1">
			<img class="allimg img1" src="img/1.jpg" alt="1" onmouseover="stop(0)" onmouseout="clearTimeout(move1);move1=setInterval(ChangeImg,1400);">
            <img class="allimg img2" src="img/2.jpg" alt="2" onmouseover="stop(1)" onmouseout="clearTimeout(move1);move1=setInterval(ChangeImg,1400);">
            <img class="allimg img3" src="img/3.jpg" alt="3" onmouseover="stop(2)" onmouseout="clearTimeout(move1);move1=setInterval(ChangeImg,1400);">
            <img class="allimg img4" src="img/4.jpg" alt="4" onmouseover="stop(3)" onmouseout="clearTimeout(move1);move1=setInterval(ChangeImg,1400);">
		</div>
	</div>
</body>


<script type="text/javascript">
    var index=0;
    //改变图片
    var a=document.getElementsByClassName("allimg");
    var b=document.getElementsByClassName("allword");
    a[0].style.display='block';
    b[0].style.background="pink";
   
    function ChangeImg()					 //图片变换函数
    {
        index++;
        
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
            a[i].style.display='none';
            b[i].style.background="grey";
        }
        a[index].style.display='block';
        b[index].style.background="pink";
    }

    var move1=setInterval(ChangeImg,1000);	 //设置定时器，每隔x秒切换一张图片


     function changebyclick(data){			 //点击变化函数
        if(index>=a.length) index=0;
         for(var j=0;j<a.length;j++){
   		        a[j].style.display='none';
   		        b[j].style.background="grey";
        }

         a[data].style.display='block';
         b[data].style.background="pink";
         index=data;
     }


     function stop(data){					 //移到图片上停止的函数
    	clearInterval(move1);
     	a[data].style.display='block';
        b[data].style.background="pink";
     }
   
	
</script>
</html>

是是是小z吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于用js写一个轮播图的页面

3、当点击切换页的选项上时，出现该选项的对应图片，而且切换页选项的背景颜色发生相应的变化。4、当图片发生轮播切换时，在不点击选项卡的前提下，相应的选项卡背景颜色也自动发生变化。2、当鼠标停留在整个页面上时，图片不进行轮播。/*使inlineblock产生的空隙消除*///设置定时器，每隔x秒切换一张图片。/*将span当做块级元素对待*/1、图片每1秒钟切换1次。/*强制span不换行*///移到图片上停止的函数。
复制链接

扫一扫