左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 600px; 30%; background-color: #2F4F4F; float: left; } .title{ line-height: 50px; color: #ddd; } .title:hover{ cursor: pointer; color: lightcyan; font-size: 18px; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick="Show(this);">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title" onclick="Show(this);">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title" onclick="Show(this);">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> function Show(self) { $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); } </script> </body> </html>
轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .out{ 730px; height: 454px; margin: 50px auto; position: relative; } .out .img li{ position: absolute; left: 0; top: 0; } .out .num{ position: absolute; left:0; bottom: 20px; text-align: center; font-size: 0; 100%; } .out .btn{ position: absolute; top:50%; margin-top: -30px; 30px; height: 60px; background-color: aliceblue; color: black; text-align: center; line-height: 60px; font-size: 40px; display: none; } .out .num li{ 20px; height: 20px; background-color: black; color: #fff; text-align: center; line-height: 20px; border-radius: 60%; display: inline; font-size: 18px; margin: 0 10px; cursor: pointer; } .out .num li.active{ background-color: red; } .out .left{ left: 0; } .out .right{ right: 0; } .out:hover .btn{ display: block; color: white; font-weight: 900; background-color: black; opacity: 0.8; cursor: pointer; } .out img { height: 100%; 100%; } </style> </head> <body> <div class="out"> <ul class="img"> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> <li><a href="#"><img src="images/4.jpg" alt=""></a></li> <li><a href="#"><img src="images/5.jpg" alt=""></a></li> </ul> <ul class="num"> <!--<li class="active">1</li>--> <!--<li>2</li>--> <!--<li>3</li>--> <!--<li>4</li>--> <!--<li>5</li>--> </ul> <div class="left btn"><</div> <div class="right btn">></div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function(){ var size=$(".img li").size(); for (var i= 1;i<=size;i++){ var li="<li>"+i+"</li>"; $(".num").append(li); } $(".num li").eq(0).addClass("active"); $(".num li").mouseover(function(){ $(this).addClass("active").siblings().removeClass("active"); var index=$(this).index(); i=index; $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); }); i=0; var t=setInterval(move,1500); function move(){ i++; if(i==size){ i=0; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } function moveL(){ i--; if(i==-1){ i=size-1; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } $(".out").hover(function(){ clearInterval(t); },function(){ t=setInterval(move,1500); }); $(".out .right").click(function(){ move() }); $(".out .left").click(function(){ moveL() }) }); </script> </body> </html>