html如何做轮播图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3仿JS轮播图</title> <link rel="stylesheet" href="lbimage.css"/> </head> <body> <div id="photo"> <!--//1--> <input type="radio" name="btn" id="img1" checked/> <div> <div><img src="images/img1.jpg"/></div> <div> <label for="img6" class="up leftjianbian"><</label> <label for="img2" class="down rightjianbian">></label> </div> </div> <!--//2--> <input type="radio" name="btn" id="img2"/> <div> <div><img src="images/img2.jpg"/></div> <div> <label for="img1" class="up leftjianbian"><</label> <label for="img3" class="down rightjianbian">></label> </div> </div> <!--//3--> <input type="radio" name="btn" id="img3"/> <div> <div><img src="images/img3.jpg"/></div> <div> <label for="img2" class="up leftjianbian"><</label> <label for="img4" class="down rightjianbian">></label> </div> </div> <!--//4--> <input type="radio" name="btn" id="img4"/> <div> <div><img src="images/img4.jpg"/></div> <div> <label for="img3" class="up leftjianbian"><</label> <label for="img5" class="down rightjianbian">></label> </div> </div> <!--//5--> <input type="radio" name="btn" id="img5"/> <div> <div><img src="images/img5.jpg"/></div> <div> <label for="img4" class="up leftjianbian"><</label> <label for="img6" class="down rightjianbian">></label> </div> </div> <!--//6--> <input type="radio" name="btn" id="img6"/> <div> <div><img src="images/img6.jpg"/></div> <div> <label for="img5" class="up leftjianbian"><</label> <label for="img1" class="down rightjianbian">></label> </div> </div> <div> <label for="img1" id="dot1"></label> <label for="img2" id="dot2"></label> <label for="img3" id="dot3"></label> <label for="img4" id="dot4"></label> <label for="img5" id="dot5"></label> <label for="img6" id="dot6"></label> </div> </div> </body> </html>
css：部分
@charset "utf-8";
body{
background-image: url("images/bbbefb51f8198618b654e23e48ed2e738ad4e69a.jpg");
background-size: cover;
}
img{
width: 850px;
height: 500px;
}
.photo{
width: 900px;
height: 550px;
border: 1px solid #555555;
margin: auto auto;
position: relative;
background: #ffffff;
box-shadow: 0 10px 80px rgba(0,0,0,.6)
}
.photo input{
display: none;
}
.image{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 450px;
margin: 25px 25px;
transform: scale(0);
opacity: 0;
transition: all 0.7s;
}
.image img{
}
.nav label{
width: 150px;
height: 500px;
margin: 25px 25px;
position: absolute;
z-index: 10;
opacity: 0;
display: none;
cursor: pointer;
transition: opacity 0.2s;
color: #ffffff;
font-size: 50px;
line-height: 450px;
text-align: center;
text-shadow: 0 0 15px #555555);
}
.leftjianbian{
background: linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
background: -o-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
background: -ms-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
background: -moz-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
background: -webkit-linear-gradient(right , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
}
.rightjianbian{
background: linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
background: -o-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
background: -ms-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
background: -moz-linear-gradient(left , rgba(250, 242, 239,0) 1% , rgba(158, 148, 166,0.5) 100%);
background: -webkit-linear-gradient(left , rgba(250, 242, 239,0) 10% , rgba(158, 148, 166,0.5) 100%);
}
.image:hover + .nav label{
opacity: 0.5;
}
.nav label:hover{
opacity: 1;
}
.nav .down{
right: 0;
}
input:checked + .control .image{
opacity: 1;
transform: scale(1);
transition: all 1s;
}
input:checked + .control .nav label{
display: block;
}
.dots{
width:100%;
height: 20px;
position: absolute;
bottom: 30px;
text-align: center;
}
.dot{
width: 10px;
height: 10px;
margin: 0px 5px;
border-radius: 50%;
position: relative;
display: inline-block;
background: rgba(0,0,0,0.3);
}
input#img1:checked ~ .dots label#dot1,
input#img2:checked ~ .dots label#dot2,
input#img3:checked ~ .dots label#dot3,
input#img4:checked ~ .dots label#dot4,
input#img5:checked ~ .dots label#dot5,
input#img6:checked ~ .dots label#dot6{
background: rgba(0,0,0,0.7);
}
绛旓細浜屻鍥剧墖鑷姩鎾斁锛<div id="butong_net_left" style="overflow:hidden;width:1000px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="butong_net_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"...
绛旓細鎵撳紑Macromedia Dreamweaver 8锛堢綉椤鍒朵綔涓撲笟宸ュ叿锛夛紝鏂板缓涓涓綉椤点 1. 鍙屽嚮妗岄潰 Dreamweaver 8锛岀綉缁滀腑浜轰滑绠绉癉W锛屽崟鍑诲乏涓婅彍鍗曗滄枃浠垛濓紝鍗曞嚮鈥滄柊寤衡濓紝鍦ㄥ脊鍑虹殑鈥滄柊寤烘枃妗ｂ濅腑閫夋嫨鈥滅被鍒濅负鍩烘湰椤碉紝鍙宠竟閫夋嫨鈥HTML鈥濓紝鍐嶅崟鍑讳笅闈㈢殑鈥滃垱寤衡濓紝浣犲氨鏂板缓浜嗕竴涓綉椤典簡銆2.鍗曞嚮鎷嗗垎锛岃繖鏍锋棦鑳界湅鍒颁唬鐮...
绛旓細鍙互閫氳繃杈撳叆浠ｇ爜鏉ユ搷浣溿傝繖閲岀殑鍥剧墖杞挱鏂规硶鏄垜浠庣綉涓婂弬鑰冪殑鏂规硶锛屽彧鏄嚜宸卞仛浜嗕竴浜涙敼杩涳紝鍏堟潵璐翠竴鍙戜唬鐮侊細<!DOCTYPE HTML><html><head><link rel="stylesheet" type="text/css" href="./css/init2.css"><script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script><...
绛旓細鍙互浣跨敤marquee鏍囩鏉ュ疄鐜帮紝杩欎釜渚嬪瓙浣犵湅涓涓嬶細缃戦〉閾炬帴
绛旓細锛1锛<div id="butong_net_left" style="overflow:hidden;width:1000px銆傦紙2锛"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="butong_net_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> 涓...
绛旓細2016-12-17 HTML鍥剧墖杞挱浠ｇ爜鎬庝箞鍐 24 2012-04-03 html閲30寮犲鍥剧墖杞挱浠ｇ爜 13 2014-09-24 html鍥剧墖杞挱浠ｇ爜鐨勯棶棰 2015-07-07 姹備竴涓html杞挱鍥浠ｇ爜 8 2015-04-24 鍏充簬html涓 鐒︾偣鍥剧墖杞挱浠ｇ爜 position 2 2010-07-26 html浠ｇ爜鍋氬浘鐗囪疆鎾鏁堟灉闂 105 2019-01-16 html杞挱浠ｇ爜 12 鏇村绫讳技...
绛旓細缁欎綘涓涓渶绠鍗曠殑html+js杞挱渚嬪瓙锛歨tml浠ｇ爜锛<div class="side" id = "lunbo"> <ul"> <li><img src="../images/1.jpg"></li> <li><img src="../images/2.jpg"></li> <li><img src="../images/3.jpg"></li> </ul> </div>js浠ｇ爜锛歷ar li=document...
绛旓細<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css瀹炵幇杞挱鍥</title> <style> body { margin: 0;background: #dfe;} ul { margin...
绛旓細骞垮憡鏈哄彲杩涜HTML5浜や簰寮忓紑鍙戯紝鍒╃敤浜戠绠＄悊銆佸垎甯冦佸垎鍙戙佸彂甯冨箍鍛婃満鎶曟斁鍐呭锛屽叿鏈変互涓嬩紭鍔垮彲鎾斁鍔ㄦ佹捣鎶ャ佽棰戙鍥剧墖銆佹枃瀛椼佹暟鎹紝鏇村惛寮曚汉鍙繍钀ャ鍒朵綔鎶藉娲诲姩銆佹棤闇U鐩橈紝鎿嶄綔绠鍗曘佷笂鎵嬭交鏄擄紝鍦ㄧ嚎銆佹墜鏈虹洿鎺ョ鐞嗘搷浣滈珮璐ㄩ噺杈撳嚭銆佺敾闈佽棰戞棤鎹熷Html5鍒嗗眰妯℃澘鍛堢幇娴锋姤锛屽垎灞傚姩鎬佺獊鍑烘捣鎶ラ噸鐐癸紝鍚稿紩娉ㄦ剰...
绛旓細html閮ㄥ垎 <div id="container"> <div class="sections"> <div class="section" id="section0"><h3>this is the page1</h3></div> <div class="section" id="section1"><h3>this is the page2</h3></div> <div class="section" id="section2"><h3>this is the page...
