Question

HTML图片轮播代码怎么写

Answer 1

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 page3</h3></div>    
		<div class="section" id="section3"><h3>this is the page4</h3></div>    
	</div>    
</div>

css部分

*{    
		padding: 0;    
		margin: 0;    
	}    
	html,body{    
		height: 100%;    
	}    
	#container {    
			width: 100%;    
			height: 500px;    
			overflow: hidden;    
	}    
	.sections,.section {    
		height:100%;    
	}    
	#container,.sections {    
		position: relative;    
	}    
	.section {    
		background-color: #000;    
		background-size: cover;    
		background-position: 50% 50%;    
		text-align: center;    
		color: white;    
	}    
	#section0 {    
		background-image: url('images/1.jpg');    
	}    
	#section1 {    
		background-image: url('images/2.jpg');    
	}    
	#section2 {    
		background-image: url('images/3.jpg');    
	}    
	#section3 {    
		background-image: url('images/4.jpg');    
	}  
	.pages li{list-style-type:none;width:10px;height:10px;border-radius:10px;background-color:white}.pages li:hover{box-shadow:0 0 5px 2px white}.pages li.active{background-color:orange;box-shadow:0 0 5px 2px orange}.pages{position:absolute;z-index:999}.pages.horizontal{left:50%;transform:translateX(-50%);bottom:5px}.pages.horizontal li{display:inline-block;margin-right:10px}.pages.horizontal li:last-child{margin-right:0}.pages.vertical{right:5px;top:50%;transform:translateY(-50%)}.pages.vertical li{margin-bottom:10px}.pages.vertical li:last-child{margin-bottom:0}

JS部分

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
//引入pageSwitch.min.js
<script>    
	$("#container").PageSwitch({    
		direction:'horizontal',    
		easing:'ease-in',    
		duration:1000,    
		autoPlay:true,    
		loop:'false'    
	});    
</script>

如图

Answer 2

（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">

一、数字键控制代码：

（1） <div style="position:relative; top:-50px。（2）left:240px;"> <a href="javascript:show(1)"><span id="I1" style="width:18px; text-align:left。（3）background:gray">1</span></a> <a href="javascript:show(2)"><span id="I2" style="width:18px。

（4）text-align:left;background-color:gray">2</span></a> <a href="javascript:show(3)"><span id="I3" style="width:18px;text-align:left。

（5）background-color:gray">3</span></a>