Html
    Css
    Js
/*reset css*/
* {
	margin:0;
	pn:0;
	padding:0;
	list-style:none;
	border:0;
}
/*demo css*/
.i_box {
	position:relative;
	overflow:hidden;
	width:100%;
	height:350px;
	margin:0px auto 0 auto;
}
.i_imglist {
	width:100%;
	height:350px;
	z-index:0
}
.i_imglist li img {
	width:100%;
	height:350px;
	display:block
}
.i_nav {
	position:absolute;
	right:116px;
	bottom:0;
	overflow:hidden;
	width:220px;
	height:300px;
	z-index:2;
}
.i_nav ul li {
	float:left;
	background-color:#fff;
	background-color:rgba(255,255,255,.9);
	width:220px;
	height:35px;
	margin:0 1px;
	opacity:0.9;
	filter:alpha(opacity=50);
	text-align:center;
	line-height:30px;
	cursor:pointer;
}
.i_nav ul li.hover {
	background-color:#ff6428;
	opacity:0.8;
	filter:alpha(opacity=80)
}
.i_nav ul li a {
	color:#000;
	text-decoration:none
}
.i_nav ul li.hover a {
	color:#fff
}
.i_prev a,.i_next a {
	position:absolute;
	overflow:hidden;
	width:19px;
	height:30px;
	background-color:#000;
	color:#fff;
	text-align:center;
	font-weight:bold;
	opacity:0.9;
	filter:alpha(opacity=90);
	text-decoration:none;
	line-height:30px
}
.i_prev a {
	left:0;
	bottom:0
}
.i_next a {
	right:0;
	bottom:0
}
.i_prev a:hover,.i_next a:hover {
	background-color:#fff;
	opacity:0.8;
	filter:alpha(opacity=80);
	color:#000
}

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

仿腾讯视频轮播pc版首页(原创)

鼠标经过切换轮播图,不用点击,高端首页视频轮播插件

需要几张图片就加多少个代码

<li><a href="/"><img src="http://www.jq22.com/img/cs/500x300-1.png" alt="" title="" /></a></li>
<li><a href="/">往事</a></li>

简单不?

0