Html
    Css
    Js
/*首页焦点图*/
.wrap {
	width:1003px;
	position:relative;
	margin:0px auto;
}
.wrap1200 {
	width:1200px;
	position:relative;
	margin:0px auto;
}
.main {
	min-width:1003px;
	margin:0px auto;
	overflow:hidden;
	position:relative;
}
#banner {
	display:block;
	width:100%;
	height:500px;
	position:relative;
}
.piclink_box {
	width:1920px;
	height:500px;
	background:#000000;
	position:relative;
	margin-left:-450px;
	top:0;
	z-index:10;
}
.piclink_pic {
	position:relative;
}
.piclink_pic a {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	display:none;
}
.piclink_pic a img {
	width:100%;
}
.piclink_focus {
	position:absolute;
	z-index:2;
	text-align:right;
	width:100%;
	bottom:0px;
	left:0px;
	height:105px;
	background:url(fade.png);
	text-align:center;
}
.piclink_focus a {
	display:inline-block;
	width:130px;
	height:80px;
	margin-top:12px;
	margin:9px 3px 3px 3px;
}
.piclink_focus a img {
	width:130px;
	height:80px;
}
.piclink_focus a:hover,.piclink_focus a.active {
	width:130px;
	height:80px;
	border:3px solid white;
	margin:9px 0px 0px 0px;
}
.piclink_btn {
	position:absolute;
	z-index:10;
	width:100%;
}
.piclink_btn a {
	display:inline-block;
	width:47px;
	height:87px;
	background:blue url(zh_ban_jt.png) 0px 0px no-repeat;
	position:absolute;
	z-index:2;
}
.piclink_btn .piclink_prev_btn {
	display:inline-block;
	width:47px;
	height:87px;
	background:url(zh_ban_jt.png) 0px 0px no-repeat;
	position:absolute;
	z-index:2;
	left:1%;
	top:-420px;
}
.piclink_btn .piclink_next_btn {
	display:inline-block;
	width:47px;
	height:87px;
	background:url(zh_ban_jt.png) -90px 0px no-repeat;
	position:absolute;
	z-index:2;
	right:1%;
	top:-420px;
}
.piclink_btn a:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
}

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

全屏切换幻灯效果(原创)

全屏切换焦点图,简单实用

1
      灭霸媳妇0
      2019/3/21 10:51:16
      不错这个很好。 回复