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

浏览：748次- 评论：0次- 发布时间：2018-09-09

Html

Css

* {
	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

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：有随着滚动屏幕滚动导航变颜色以及点击到某个位置还有点击左右按钮无限轮播还有右下角的点击到顶部

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

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取