新东方网站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>新东方网站jQuery满屏焦点图</title>
<link rel="stylesheet" type="text/css" href="css/slide.css">
<script src="js/jquery.js"></script>
<script src="js/slide.js"></script> 
</head>
<body>
  <div>
    <div id="show" rel="autoPlay">
      <div class="img">
          <span>
              <a href="#" ><img src="images/1.jpg" /></a>
              <a href="#" ><img src="images/2.jpg" /></a>
              <a href="#" ><img src="images/3.jpg" /></a>
              <a href="#" ><img src="images/4.jpg" /></a>
              <a href="#" ><img src="images/5.jpg" /></a>
          </span>
        <div class="masks mk1"></div>
        <div class="masks mk2"></div>
      </div>
    </div>
  </div>
 <br>
</body>
</html>

JS代码(slide.js):

/* 焦点图 */
$(function(){
	var $root = $('#show'),root_w = $root.width();
	var p = $root.find('> div.img > span'),n = p.children().length;
	p.children().eq(0).clone().appendTo(p);
	function onoff(on,off){
	(on !== -1) && btns.eq(on).addClass('on');
	(off !== -1) && btns.eq(off).removeClass('on');
}
function dgo(n,comp){
	var idx = n > max ? 0:n;
	onoff(idx,cur);
	cur = idx;
	p.stop().animate({
	left:-1 * root_w * n}
,{
	duration:dur,complete:comp}
);
	if(idx == 0 ){
	p.children().eq(n-1).clone().appendTo('.mk1');
}
else{
	$('.mk1').empty()}
;
}
// slast -> 如果播放完最后1张，要如何处理 // true 平滑切换到第1张 var cur = 0,max = n - 1,pt = 0,stay = 5 * 1000,/* ms */
 dur = .6 * 1000,/* ms */
 btns;
	function go(dir,slast){
	pt = +new Date();
	if (dir === 0){
	onoff(cur,-1);
	p.css({
	left:-1 * root_w * cur}
);
	return;
}
var t;
	if (dir > 0){
	t = cur + 1;
	if (t > max && !slast){
	t = 0;
}
if (t <= max){
	return dgo(t);
}
return dgo(t,function(){
	p.css({
	left:0}
);
}
);
}
else{
	t = cur - 1;
	if (t < 0){
	t = max;
	p.css({
	left:-1 * root_w * (max + 1)}
);
	return dgo(t);
}
else{
	return dgo(t);
}
}
}
btns = $((new Array(n + 1)).join('<i></i>')) .each(function(idx,el){
	$(el).data({
	idx:idx}
);
}
);
	var pn_btn = $('<s class="prev"><i></i></s><s class="next"><i></i></s>');
	$('<div class="btns"/ >') .append( $('<b/>') .append(btns) .delegate('i','click',function(ev){
	dgo($(this).data('idx'));
}
) .css({
	width:n * 20,marginLeft:-10 * n}
) ) .delegate('s','click',function(ev){
	go($(this).is('.prev') ? -1:1,true);
}
) .append(pn_btn) .appendTo($root);
	go(1);
	// 自动播放 var ie6 = $.browser.msie && $.browser.version < '7.0';
	$root.hover(function(ev){
	// $root[(ev.type == 'mouseenter' ? 'add':'remove') + 'Class']('show-hover');
	if (ie6){
	pn_btn[ev.type == 'mouseenter' ? 'show':'hide']();
}
else{
	pn_btn.stop()['fade' + (ev.type == 'mouseenter' ? 'In':'Out')]('fast');
}
}
);
	if ($root.attr('rel') == 'autoPlay'){
	var si = setInterval(function(){
	var now = +new Date();
	if (now - pt < stay){
	return;
}
go(1,true);
}
,5000);
	p.mouseover(function(){
	clearInterval(si);
}
) p.mouseout(function(){
	si = setInterval(function(){
	var now = +new Date();
	if (now - pt < stay){
	return;
}
go(1,true);
}
,5000);
}
)}
var wid = $(document.body).width();
	var swid = (wid-960)/2;
	var bwid = root_w * n;
	$('#show').css('width',wid);
	$('#show .img').css('width',wid);
	$('#show .btns').css('left',swid)$('.masks').css('width',swid);
	$('.mk2').css('right',0);
	$('#show .img span').css(({
	paddingLeft:swid}
))}
)();

CSS代码(slide.css):

*{padding:0;margin:0;list-style:none;border:0;}
/* 焦点图 */
#show{position:relative;height:320px;width:960px;margin:0 auto;}
#show a{float:left;display:inline;}
#show .img{position:absolute;width:960px;height:320px;overflow:hidden}
#show .img SPAN{position:absolute;width:19999px;display:block}
#show .btns{z-index:10;position:absolute;width:960px}
#show .btns B{position:absolute;width:100px;display:block;height:14px;overflow:hidden;top:295px;left:50%}
#show .btns B I{width:10px;background:#414140;float:left;height:10px;font-size:0px;overflow:hidden;cursor:pointer;margin-right:6px;border:#414140 2px solid;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}
#show .btns B I:hover{background:#a7a7a6}
#show .btns B I.on{background:#3cd2f1;cursor:default}
#show .btns B I.on:hover{background:#3cd2f1;cursor:default}
#show .btns S{position:absolute;WIDTH:60px;display:none;height:80px;overflow:hidden;top:130px;cursor:pointer}
#show .btns S I{position:absolute;width:60px;background:url(../images/btn_show.png);height:160px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="../images/btn_show.png");_background:none;}
#show .btns S.prev{left:0px}
#show .btns S.prev I{top:-80px}
#show .btns S.next{right:0px}
.show-hover#show .btns S{display:block}
.masks{opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;height:320px;position:absolute;background:#000;overflow:hidden}

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