Html
    Css
    Js

    
                        
 * {
	margin:0;
	padding:0;
}
#nav {
	position:fixed;
	left:30px;
	top:10px;
}
#nav li {
	width:50px;
	height:30px;
	font:bold 20px/30px simhei;
	text-align:center;
	list-style-type:none;
	background:#333;
	color:#fff;
	margin:10px 0;
	cursor:pointer;
}
#list {
	width:470px;
	overflow:hidden;
	margin-left:200px;
}
#list li {
	width:470px;
	height:300px;
	text-align:center;
	font:bold 100px/300px simhei;
	list-style-type:none;
	background:yellow;
	color:blue;
	/* margin:50px 200px;
	*/
            margin-bottom:50px;
}
.blue {
	background-color:blue !important;
	color:#fff !important;
}
.undfand {
	background-color:#fff !important;
}
.top {
	position:fixed;
	right:0;
	bottom:0;
	width:50px;
	height:50px;
	background-color:pink;
	cursor:pointer;
}
#list #go1 {
	position:relative;
	height:300px;
}
#go1 div {
	float:left;
	width:470px;
	height:100%;
	background-color:orange;
	margin-right:10px;
}
.btn {
	position:absolute;
	width:546px;
	height:50px;
	top:130px;
	left:160px;
}
.btn button {
	width:30px;
	height:40px;
}
.fl {
	float:left;
}
.fr {
	float:right;
}

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

jQuery轮播图+滚动导航楼层效果+点击返回顶部

更新时间:2019-08-13 23:13:35

需要jq的2.2.0以上的版本才可以运行 页面刚进去轮播图父盒子的宽度就已经计算出来了 所以宽度是动态的 因为咱们在日常工作总轮播图是后台数据遍历出来的 所以宽度是动态算出来的  左导航方法比较笨不过很容易看懂  代码都很简单新手看四五分钟就懂了

0