实现轮播图效果

最新推荐文章于 2024-07-25 15:07:09 发布

2241431065

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量980

点赞数

分类专栏： Java Web 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_40748967/article/details/119918085

版权

Java Web 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html> 
<html>
<head>
	<meta charset="UTF-8">
	<title>滑动效果</title>
	<link href="slide.css" rel="stylesheet" type="text/css" />
	
	    <style>
		     .pic_scroll{
			     width: 566px
			 }
		    
		     .pic_scroll ul{
			     list-style: none;
                 float: right;
				 padding-left:5px;
				
				 }
			 .pic_scroll ul li{
			     border: 1px solid silver;
				 width:30px;
				 height:25px;
				 margin-top:10px;
				 text-align:center;
				 padding-top:5px;
			 }
			 .scroll_number_over{
			     color:red;
			 }
			 .scroll_number_out{
			     color:black;
			 }
		</style>
		
</head>
	
<body>

	<div class="pic_scroll">
		<img src="img/11.jpg" id="scroll_img" /></img>
			<ul>
				<li id="scroll_number1" onmouseover="loopShow(1)" 
				class="scroll_number_over">1</li>
				<li id="scroll_number2" onmouseover="loopShow(2)">2</li>
				<li id="scroll_number3" onmouseover="loopShow(3)">3</li>
				<li id="scroll_number4" onmouseover="loopShow(4)">4</li>
			</ul>
	</div>

</body>

<script>
	var scroll_img=new Array();
	for(i=0;i<4;i++)
	{
		scroll_img[i]="img/1"+(i+1)+".jpg";
	}
	var nowPic=2;
	function loopShow(d1){
		nowPic=d1;
		document.getElementById("scroll_img").src=scroll_img[nowPic-1];
		for(var i=1;i<5;i++)
		{
			if(nowPic==i)
			{
				document.getElementById("scroll_number"+i).className="scroll_number_over";
			}else{
				document.getElementById("scroll_number"+i).className="scroll_number_out";
				}
		}
		if(nowPic>=4){
			nowPic=1;
		}else
			nowPic++;
		}
	setInterval("loopShow(nowPic)",2000);		
	
</script>

</html>

图片效果：

2241431065

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
实现轮播图效果

<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>滑动效果</title> <link href="slide.css" rel="stylesheet" type="text/css" /> <style> .pic_scroll{ width: 566px } .
复制链接

扫一扫

专栏目录