jQuery仿百度百家首页焦点图轮播滚动切换特效代码

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

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

以下是 jQuery仿百度百家首页焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿百度百家片切换效果</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function (){
			
	var slid = $('ul.slide_box li'),controls = $('ul.bx-controls a');
	slid.addClass('none');
	slid.eq(0).removeClass('none');

	var slideindex = 0;
	function switchi() {
		if(slideindex == slid.length - 1){
			slideindex = 0;
		}else {
			slideindex = slideindex + 1;
		}
		slid.addClass('none');
		slid.eq(slideindex).removeClass('none');
		controls.removeClass('actives');
		controls.eq(slideindex).addClass('actives');
	}
	
	var timer = setInterval(switchi, 3000);

	function options(indexs) {
		slid.addClass('none');
		slid.eq(indexs).removeClass('none');
		controls.removeClass('actives');
		controls.eq(indexs).addClass('actives');
	}

	$('a.options').click(function(){
		var drec = $(this).data('drec');
		if(drec == 'pre') {
			if(slideindex == 0) {
				slideindex = 3;
			}else {
				slideindex = slideindex - 1;
			}
		}else {
			if(slideindex == 3) {
				slideindex = 0;
			}else {
				slideindex = slideindex + 1;
			}
		}
		clearInterval(timer);
		options(slideindex);
		timer = setInterval(switchi, 3000);
	});

	$('ul.bx-controls li').hover(function(){
		slideindex = $(this).index();
		clearInterval(timer);
		options(slideindex);
	},function(){
		timer = setInterval(switchi, 3000);
	});
	
})
</script>

</head>
<body>

<div class="top_slide_wrap">
	<div class="bx-wrapper">
		<ul class="slide_box">
			<li><a href="#"><img src="images/s1.jpg" alt=""><p>周杰伦</p></a></li>
			<li><a href="#"><img src="images/s2.jpg" alt=""><p>周杰伦</p></a></li>
			<li><a href="#"><img src="images/s3.jpg" alt=""><p>周杰伦</p></a></li>
			<li><a href="#"><img src="images/s4.jpg" alt=""><p>周杰伦</p></a></li>
		</ul>
		<ul class="bx-controls">
			<li>
				<a class="actives" href="#">
					<img src="images/ss1.jpg" alt="">
					<span></span>
					<p>周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/ss2.jpg" alt="">
					<span></span>
					<p>周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/ss3.jpg" alt="">
					<span></span>
					<p>周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/ss4.jpg" alt="">
					<span></span>
					<p>周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周</p>
				</a>
			</li>
		</ul>
	</div>
	<a class="options pre" href="javascript:;" data-drec="pre"><i class="pre"></i></a>
	<a class="options next" href="javascript:;" data-drex="next"><i class="next"></i></a>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";body{font:normal 14px/1.5 Arial,STHeiti,Microsoft YaHei,simsun,Helvetica,sans-serif;color:#343434;background-color:#f6f6f6}
.none{display:none}
/* top_slide_wrap */
.top_slide_wrap{width:690px;height:460px;margin:0 auto;position:relative}
.top_slide_wrap .bx-wrapper{overflow:hidden}
.top_slide_wrap .bx-wrapper ul.slide_box{height:460px;position:relative;overflow:hidden;z-index:4}
.top_slide_wrap .bx-wrapper ul.slide_box li{position:absolute;width:690px;height:460px;left:0;top:0;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}
.top_slide_wrap .bx-wrapper ul.slide_box li a{color:#fff;display:block;cursor:pointer}
.top_slide_wrap .bx-wrapper ul.slide_box li a img{width:690px;height:460px}
.top_slide_wrap .bx-wrapper ul.slide_box li a:hover{text-decoration:none}
.top_slide_wrap .bx-wrapper ul.slide_box li p{height:55px;line-height:55px;margin-top:-173px;padding:0 20px;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;word-wrap:normal;width:650px;color:#fff;font-size:24px}
.top_slide_wrap .bx-wrapper ul.bx-controls{margin-top:-117px;background-color:#000;padding:2px 0 2px 2px;overflow:hidden;*zoom:1;position:relative;z-index:5}
.top_slide_wrap .bx-wrapper ul.bx-controls li{float:left;position:relative;width:170px;height:113px;margin-right:2px}
.top_slide_wrap .bx-wrapper ul.bx-controls li a.actives span,.top_slide_wrap .bx-wrapper ul.bx-controls li a:hover span{top:115px}
.top_slide_wrap .bx-wrapper ul.bx-controls li a.actives p,.top_slide_wrap .bx-wrapper ul.bx-controls li a:hover p{top:115px}
.top_slide_wrap .bx-wrapper ul.bx-controls li img{width:170px;height:113px}
.top_slide_wrap .bx-wrapper ul.bx-controls li span{position:absolute;left:0;top:0;z-index:6;width:170px;height:113px;background-color:#7cb228;opacity:.9;-webkit-transition:top .5s ease-out;-moz-transition:top .5s ease-out;-ms-transition:top .5s ease-out;-o-transition:top .5s ease-out;transition:top .5s ease-out}
.top_slide_wrap .bx-wrapper ul.bx-controls li p{position:absolute;left:0;top:0;z-index:7;width:150px;height:73px;padding:20px 10px;color:#fff;transition:top .3s ease-out}
.top_slide_wrap a.options{position:absolute;top:136px;width:46px;height:56px;padding:14px 0 0 24px;background-color:#000;opacity:.5;z-index:5}
.top_slide_wrap a.options i{display:block;font-size:0;line-height:0;width:20px;height:40px}
.top_slide_wrap a.options i.pre{background:url(../images/icons.png) no-repeat 0 0}
.top_slide_wrap a.options i.next{background:url(../images/icons.png) no-repeat -25px 0}
.top_slide_wrap a.options.pre{left:0}
.top_slide_wrap a.options.next{right:0}

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