Html
    Css
    Js

    
                        
#content {
	width:400px;
	height:400px;
	border:10px solid #ccc;
	text-align:center;
	margin:40px auto 0;
	position:relative;
	background:#f1f1f1;
}
#content a {
	width:40px;
	height:40px;
	background:#000;
	border:5px solid #fff;
	color:#fff;
	position:absolute;
	top:175px;
	text-decoration:none;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	line-height:30px;
	opacity:0.6
}
#content a:hover {
	opacity:0.9;
	cursor:pointer;
}
#prev {
	left:10px;
}
#next {
	right:10px;
}
#text {
	position:absolute;
	bottom:0;
	left:0;
	margin:0
}
#span1 {
	position:absolute;
	top:0;
}
#text,#span1 {
	width:400px;
	height:30px;
	color:#fff;
	background:#000;
	opacity:0.6;
	line-height:30px;
}
#img1 {
	width:400px;
	height:400px;
}
.container {
	text-align:center;
	width:450px;
	height:600px;
	border:1px solid #ddd;
	margin:40px auto 0;
	padding-top:20px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

点击箭头进行图片之间的切换(原创)

利用原生js写图片之间的切换

0