Html
    Css
    Js

    
                        
.image08 {
	width:1200px;
	margin:0 auto;
}
.image08::after,.image08Box::after {
	content:'';
	display:block;
	clear:both;
}
.image08_list {
	width:260px;
	float:left;
}
.image08_list li {
	width:100%;
	height:75px;
	background:url(images/telephone.png) no-repeat 10px center #f3f3f3;
	margin-bottom:5px;
	color:#fff;
	background-size:40px;
	-webkit-transition:.3s all;
	transition:.3s all;
}
.image08_list li:last-child {
	margin-bottom:0px;
}
.image08_list li a {
	display:block;
	line-height:75px;
	padding-left:70px;
}
.image08_content {
	width:900px;
	height:475px;
	position:relative;
	float:right;
	overflow:hidden;
}
.image08_content_box {
	position:absolute;
	top:0;
	left:0;
	height:99999px;
}
.image08_content .image08Box {
	width:860px;
	height:435px;
}
.image08Box {
	background:#f3f3f3;
	padding:20px;
}
.image08Box .image08_img {
	width:560px;
	height:435px;
	float:left;
	overflow:hidden;
}
.image08Box .image08_img img {
	display:block;
	width:100%;
	height:100%;
	-webkit-transition:.3s all;
	transition:.3s all;
}
.image08Box .image08_text {
	float:right;
	width:280px;
}
.image08Box .image08_text h3 {
	font-size:22px;
	padding-bottom:22px;
	margin-top:20px;
	position:relative;
	margin-bottom:20px;
}
.image08Box .image08_text h3::after {
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:80px;
	height:2px;
	background:#999;
}
.image08Box .image08_text p {
	line-height:30px;
}
.image08Box .image08_text a {
	display:block;
	text-align:center;
	width:120px;
	line-height:34px;
	border:1px solid #dedede;
	border-radius:17px;
	color:#666;
	font-size:14px;
	margin-top:40px;
	-webkit-transition:.3s all;
	transition:.3s all;
}
.image08_list li:hover,.image08_active {
	background-color:#0ff !important;
}
.image08Box:hover img {
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
}
.image08Box .image08_text a:hover {
	background-color:#0ff;
	border-color:#0ff;
}

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

点击上下滑动切换对应内容代码

更新时间:2021-09-18 10:26:01

调用方式

switch({
    navs: * 栏目标题直接父元素,
    contents: * 切换容器元素的直接父元素,
    navcss: 栏目切换元素跟随css样式名,
    pattern: 切换方式,有两种:hover(鼠标经过切换)、click(鼠标点击切换),
    mode: {name: "", direction:""}切换容器布局方式,有两种:position(定位布局),display(隐藏布局),其中定位需设置方向direction:"left" or "top"
    time: 切换效果时间
})
0