jQuery文字上下滑动切换滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery文字上下滑动切换滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html >
<head>
<meta charset="gb2312">
<title>jQuery文字上下滑动切换代码</title>
<link rel="stylesheet" href="css/reset.css">
<style>
body {
background: rgb(191, 76, 76);
}

/* slider
----------------------*/
.slide-wrap {
  margin: 5% auto 0;
  width: 50%;
}
.slide-mask {
  position: relative;
  overflow: hidden;
  height: 130px;
}
.slide-group {
  position: absolute; 
  top: 0px; 
  left: 0;
  width: 100%;
}
.slide {
  height: 130px;
	font: 100 90px/135px "lato";
	font-size: 2em;
	color: #fff;
	text-align: center;
	text-transform: uppercase;  
}

/* nav
----------------------*/
.slide-nav {
  text-align: center;
}
.slide-nav ul {
	margin: 0;
	padding: 0;
}
.slide-nav li {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: rgb(175, 56, 56);
  cursor: pointer;
  margin-left: .5em;
}
.slide-nav li.current {
	background: rgb(144, 39, 39);
}

</style>
</head>
<body>
<div class="slide-wrap">
<div class="slide-mask">
<ul class="slide-group">
  <li class="slide">jQuery特效</li>      
  <li class="slide">CSS3特效</li>
  <li class="slide">HTML5特效</li>
  <li class="slide">站长之家</li>
</ul>
</div>
<div class="slide-nav">
<ul>
  <li class="bullet"></li>
  <li class="bullet"></li>
  <li class="bullet"></li>
  <li class="bullet"></li> 
  <li class="bullet"></li>       
</ul>
</div>
</div>
<script src='js/jquery-1.8.3.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

var $slide = $('.slide'),$slideGroup = $('.slide-group'),$bullet = $('.bullet');
	var slidesTotal = ($slide.length - 1),current = 0,isAutoSliding = true;
	$bullet.first().addClass('current');
	var clickSlide = function(){
	//stop auto sliding window.clearInterval(autoSlide);
	isAutoSliding = false;
	var slideIndex = $bullet.index($(this));
	updateIndex(slideIndex);
}
;
	var updateIndex = function(currentSlide){
	if(isAutoSliding){
	if(current === slidesTotal){
	current = 0;
}
else{
	current++;
}
}
else{
	current = currentSlide;
}
$bullet.removeClass('current');
	$bullet.eq(current).addClass('current');
	transition(current);
}
;
	var transition = function(slidePosition){
	$slideGroup.animate({
	'top':'-' + slidePosition + '00%'}
);
}
;
	$bullet.on( 'click',clickSlide);
	var autoSlide = window.setInterval(updateIndex,2000);

CSS代码(style.css):

body{background:rgb(191,76,76);}
/* slider----------------------*/
.slide-wrap{margin:5% auto 0;width:50%;}
.slide-mask{position:relative;overflow:hidden;height:130px;}
.slide-group{position:absolute;top:0px;left:0;width:100%;}
.slide{height:130px;font:100 90px/135px "lato";font-size:2em;color:#fff;text-align:center;text-transform:uppercase;}
/* nav----------------------*/
.slide-nav{text-align:center;}
.slide-nav ul{margin:0;padding:0;}
.slide-nav li{display:inline-block;width:10px;height:10px;background:rgb(175,56,56);cursor:pointer;margin-left:.5em;}
.slide-nav li.current{background:rgb(144,39,39);}

附件:下载该文件资源,减少时间成本(增值服务)