Html
    Css
    Js

    
                        
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
	margin:0;
	padding:0
}
img {
	display:block;
}
ul {
	list-style-type:none;
}
#slider {
	width:100%;
	height:380px;
	overflow:hidden;
	position:relative;
}
#slider ul {
	width:1000%;
	height:380px;
	position:absolute;
	left:0px;
	top:0;
}
#slider li {
	width:10%;
	height:380px;
	float:left;
	position:relative;
	overflow:hidden;
}
#slider li img {
	position:absolute;
	top:0;
}
#slider span {
	width:100px;
	height:100px;
	line-height:100px;
	text-align:center;
	color:white;
	font-size:100px;
	font-weight:bold;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-50px;
	cursor:pointer;
	display:none;
}
#slider .left-btn {
	margin-left:-550px;
}
#slider .right-btn {
	margin-left:450px;
}

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

jQuery全屏焦点图

图片看不见,自己把自己的图片替换上去就可以了

0