轮播图（二）

ゞ浴缸里的玫瑰 2021-11-24 00:28 144阅读 0赞

在上一个轮播图的基础上，做了一些改进，当点击下方的小标题时，上方的图片会跟着一起改变。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    		*{
    			margin: auto;
    			padding: 0;
    		}
    			#div1{
    				width: 500px;
    				height: 378px;
    				/*border: 1px solid red;*/
    				position:  relative;
    				top: 20px;
    				overflow: hidden;
    			}
    			#div1 img{
    				width: 500px;
    				height: 378px;
    			}
    			#ul1{
    				list-style: none;
    				width: 500px;
    				/*border: 1px solid red;*/
    				position: relative;
    				top: -17px;
    			}
    			#ul1 li{
    				text-align: center;
    				height: 378px;
    			}
    			.kk{
    				width: 500px;
    				height: 378px;
    			}
    				
    			
    			#div2{
    				height: 50px;
    				width: 500px;
    				position: relative;
    				top: 30px;
    				/*border: 1px solid red;*/
    			}
    			#ul2 {
    				
    				list-style: none;
    				/*float: left;*/
    				/*text-align: center;*/
    				margin-left:30px;
    			}
    			#ul2 li{
    				margin: 15px;
    				text-align: center;
    				float: left;
    			}
    			.tt{
    				color: #f3c258;
    				background-color: rgba(255,255,255,0.15);
    				border-bottom: 3px solid orange;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="div1">
    			<ul id="ul1">
    				<li class="kk"><img src="img/w1.jpg"/></li>
    				<li class="kk"><img src="img/w2.jpg"/></li>
    				<li class="kk"><img src="img/w3.jpg"/></li>
    				<li class="kk"><img src="img/w4.jpg"/></li>
    				<li class="kk"><img src="img/w5.jpg"/></li>
    			</ul>
    		</div>
    		<div id="div2">
    			<ul id="ul2">
    				<li class="tt" index="0">小狗1</li>
    				<li index="1">小狗2</li>
    				<li index="2">小狗3</li>
    				<li index="3">小狗4</li>
    				<li index="4">小狗5</li>
    			</ul>
    		</div>
    	</body>
    	<script>
    		//定时轮播图
    		//1写个定时器
    		var time=window.setInterval(show,1000);
    		//获取图片的标签
    		var img1=document.getElementsByClassName("kk")
    		var index=0;
    //		index++;
    		//2写函数，操作事件
    		function show(){
    			//获取图片的ul
    			var img =document.getElementById("ul1");
    			img.style.marginTop=(-378*index)+"px";
    			//判断是否循环到最后一张，如果是，则返回第一张，不是，就继续循环
    			if(index==img1.length-1){
    				index=0;
    			}else{
    				index++;
    			}
    		}
    		
    		//加个鼠标事件
    		var title=document.getElementById("ul2");
    		var title1=title.getElementsByTagName("li")
    		for(var i=0;i<title1.length;i++){
    			title1[i].onmouseover=function(){
    			for (var j=0;j<title1.length;j++) {
    				title1[j].className="";
    			}
    			this.className="tt";
    			var lbul=document.getElementById("ul1");
    			index=this.getAttribute("index");
    			lbul.style.marginTop=(-378*index)+"px";
    		}
    		}
    	</script>
    </html>