4.3 大图轮播

轮播图切换效果实现

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/syx1997/p/8709489.html

文章标签：

#javascript #ViewUI

<style type="text/css">
       #tupian
	   {
		   width:700px;
		   height:400px;
		   float:left;
	   }
	   .xiang{
		   display:none;		   
		   }
		#yuandian{
			width:500px;
			height:20px;
			margin-top:330px;
			margin-left:-200px;
			float:left;
						}   
		 .dian{
			 width:20px;
			 height:20px;
			 border:5px solid red;
			 border-radius:50%;
			 float:left;
			 margin-left:10px;}  
 </style>
</head>
<body>
   <div id="tupian">   图片
       <img class="xiang" style="display:block" src="新建文件夹 (3)/001aa0c3d9071769f5371d.jpg" width="700px" height="400px" />
       <img class="xiang" src="新建文件夹 (3)/242.jpg" width="700px" height="400px" />
       <img class="xiang" src="新建文件夹 (3)/6263bfb9076c0445b228e&690.jfif" width="400px" height="400px" />
       <img class="xiang" src="新建文件夹 (3)/7845c42ed0ca167ef6824e.jpg" width="700px" height="400px" />
       <img class="xiang" src="新建文件夹 (3)/2012313134701.jpg"  width="700px" height="400px"/>
   </div>
   <div id="yuandian">    加圆点
       <div sy="0" class="dian" style="border-color:blue" onclick="Xuan('0')"></div>
       <div sy="1"class="dian"  onclick="Xuan('1')"></div>
       <div sy="2"class="dian"  onclick="Xuan('2')"></div>
       <div sy="3"class="dian"  onclick="Xuan('3')"></div>
       <div sy="4"class="dian"  onclick="Xuan('4')"></div>
   </div>
</body>
<script type="text/javascript">
window.setInterval("Huan()",2000);
var sy = 0
function Huan()
{
	var xiang=document.getElementsByClassName("xiang");
	sy++
	if(sy>=xiang.length)          限制条件：走到最后一张，跳到第一张继续
	{
	    sy = 0;
	}
	for(var i=0;i<xiang.length;i++)         让其他图片隐藏
	{
	    xiang[i].style.display="none"	
	}
    xiang[sy].style.display="block";      下一张图片显示
	
	
  var d = document.getElementsByClassName("dian");   圆点
	for(var j=0;j<d.length;j++)                                    
		{  if(d[j].getAttribute("sy")==sy)            判断属性值和索引是不是相等的
		    {
			    d[j].style.borderColor = "blue";
			}
		   else
		   {
			   d[j].style.borderColor = "red";
		   }
	    }
}
function Xuan(a)
{     sy = a;
    var xiang = document.getElementsByClassName("xiang");
	for(var i =0;i<xiang.length;i++)
	{
	   xiang[i].style.display="none";	
	}	  
        xiang[a].style.display="block";
	 var d = document.getElementsByClassName("dian");
	 for(var j=0;j<d.length;j++)
	 {
	       d[j].style.borderColor="red";	 
	 }
	 d[a].style.borderColor="blue";
}
</script>
</html>

转载于:https://www.cnblogs.com/syx1997/p/8709489.html