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>
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif "新宋体";}
/* slide */
.slide{width:790px;height:360px;margin:10px auto 0 auto;overflow:hidden;position:relative;background-color:#000;z-index:10;}
.slide ul{height:360px;}
.slide ul li{width:790px;height:360px;float:left;}
.slide .bg{width:790px;height:34px;position:absolute;background-color:#000;bottom:0;left:0;border-top:1px solid #fff;filter:alpha(opacity=30);opacity:.3;z-index:5;}
.slide .num{overflow:hidden;zoom:1;position:absolute;right:20px;bottom:11px;z-index:10;}
.slide .num span{display:inline-block;width:12px;height:12px;background:url(images/bg-slide.png) 0 -12px no-repeat;_background:url(images/ie6/bg-slide.png) 0 -12px no-repeat;cursor:pointer;overflow:hidden;}
.slide .num span.on{background-position:0 0;}
.slide .skip{display:none;_display:block;width:23px;height:47px;background:url(images/bg-slide.png) no-repeat;_background:url(images/ie6/bg-slide.png) no-repeat;position:absolute;top:50%;margin-top:-24px;text-indent:-1000em;cursor:pointer;}
.slide .prev{background-position:0 -172px;left:10px;}
.slide .prev:hover{background-position:0 -219px;}
.slide .next{background-position:-23px -172px;right:10px;}
.slide .next:hover{background-position:-23px -219px;}
.slide:hover .prev,.slide:hover .next{display:block;}
.slide .num{bottom:11px;}
</style>

<div class="slide" id="img-play">
	<ul>
		<li><a href="#"><img src="images/72601897-8cc1-4d6f-bba4-d21d5127295e.jpg" width="790" height="360" /></a></li>
		<li><a href="#"><img src="images/6ef55d77-fed1-4beb-bb0e-23794ff8778b.jpg" width="790" height="360" /></a></li>
		<li><a href="#"><img src="images/f5fb4f53-aac5-417f-ba79-996b01ee94bc.jpg" width="790" height="360" /></a></li>
		<li><a href="#"><img src="images/0627064f-75fa-4e4b-a778-67b316f8f284.jpg" width="790" height="360" /></a></li>
		<li><a href="#"><img src="images/b0b0dae8-60de-4eaa-aab9-b007a0e2bd50.jpg" width="790" height="360" /></a></li>
		<li><a href="#"><img src="images/61189605-96b3-40a9-8e0b-6ff4019961bf.gif" width="790" height="360" /></a></li>
	</ul>
	<div class="bg"></div>
	<div class="num"></div>
	<a class="skip prev" title="上一张">上一张</a>
	<a class="skip next" title="下一张">下一张</a>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
(function(a){a.fn.maiPlayer=function(c){var b={oPlay:null,speedSwitch:3000,speedAnimate:500,showPage:0,playerWidth:0,autoPlay:true,flipButton:true,pageButton:true,playerBg:true,numPage:false,imageTitle:false,imageContent:false,switchActionAuto:"roll",switchActionPage:"opacity",switchActionFlip:"roll",textDisplay:0,textSpeed:500};var c=a.extend(b,c);this.each(function(){var p=a(this);var n="";var h=0;var i=0;var j=null;var d=[];a(p).find("li img").parents("ul").addClass("ul-img").css("position","relative");h=a(p).find(".ul-img li").length;if(c.playerWidth){i=c.playerWidth;a(p).css("width",i+"px");a(p).find(".ul-img li").css("width",i+"px");a(p).find("img").css("width",i+"px");a(p).find(".bg:first").css("width",i+"px")}else{i=a(p).find(".ul-img li:first").width()}if(c.playerHeight){iHeight=c.playerHeight;a(p).css("height",iHeight+"px");a(p).find(".ul-img").css("height",iHeight+"px");a(p).find(".ul-img li").css("height",iHeight+"px");a(p).find("img").css("height",iHeight+"px")}a(p).find(".ul-img li").each(function(){var q=a(p).find(".ul-img li").index(this);d[q]=a(p).find(".ul-img img").eq(q).attr("title");a(p).find(".ul-img img").eq(q).removeAttr("title")});if(c.imageTitle||c.imageContent){var k=a('<ul class="ul-text"></ul>');a(k).insertAfter(a(p).find(".ul-img"));a(p).find(".ul-img li").each(function(){var s=a("<li></li>");var q=a(p).find(".ul-img li").index(this);if(c.imageTitle){var t=a("<h2></h2>");a(t).text(d[q]);a(s).append(t)}if(c.imageContent){var r=a("<p></p>");var u=a(p).find(".ul-img img").eq(q).attr("alt");a(r).text(u);a(s).append(r)}a(k).append(s)});a(p).find(".ul-text").width(i*h);a(p).find(".ul-text").height(a(p).find(".bg:first").height())}a(p).find(".ul-img").width(i*h);if(c.flipButton){a(p).find(".next:first").click(function(){if(c.switchActionFlip=="roll"){l(a(p).find(".ul-img"),1);if(c.imageTitle||c.imageContent){l(a(p).find(".ul-text"),0)}}else{if(c.switchActionFlip=="opacity"){if(c.showPage==h-1){c.showPage=0}else{c.showPage++}f(a(p).find(".ul-img"),c.showPage);f(a(p).find(".ul-text"),c.showPage);e(a(p).find(".num span").eq(c.showPage),"on")}}});a(p).find(".prev:first").click(function(){if(c.switchActionFlip=="roll"){l(a(p).find(".ul-img"),-1);if(c.imageTitle||c.imageContent){l(a(p).find(".ul-text"),0)}}else{if(c.switchActionFlip=="opacity"){if(c.showPage==0){c.showPage=h-1}else{c.showPage--}f(a(p).find(".ul-img"),c.showPage);f(a(p).find(".ul-text"),c.showPage);e(a(p).find(".num span").eq(c.showPage),"on")}}})}else{a(p).find(".next:first").css("display","none");a(p).find(".prev:first").css("display","none")}if(c.showPage){a(p).find(".ul-img").css("left",-i*c.showPage+"px");a(p).find(".ul-text").css("left",-i*c.showPage+"px")}if(c.pageButton){n="";a(p).find(".ul-img li").each(function(){n+="<span></span>"});a(p).find(".num:first").html(n);a(p).find(".num span:first").addClass("on");e(a(p).find(".num span").eq(c.showPage),"on");a(p).find(".num span").click(function(){var q=a(p).find(".num span").index(this);if(c.switchActionPage=="roll"){c.showPage=0;l(a(p).find(".ul-img"),q);l(a(p).find(".ul-text"),0)}else{if(c.switchActionPage=="opacity"){c.showPage=q;f(a(p).find(".ul-img"),c.showPage);f(a(p).find(".ul-text"),c.showPage);e(a(p).find(".num span").eq(c.showPage),"on")}}if(c.numPage){a(this).text(a(p).find(".num span").index(this)+1)}})}if(!c.playerBg){a(p).find(".bg:first").css("display","none")}function l(r,q){if(r.is(":animated")==false){c.showPage+=q;if(c.showPage!=-1&&c.showPage!=h){r.animate({left:-c.showPage*i+"px"},c.speedAnimate)}else{if(c.showPage==-1){c.showPage=h-1;r.css({left:-(i*(c.showPage-1))+"px"});r.animate({left:-(i*c.showPage)+"px"},c.speedAnimate)}else{if(c.showPage==c.showPage){c.showPage=0;r.css({left:-i+"px"});r.animate({left:0+"px"},c.speedAnimate)}}}e(a(p).find(".num span").eq(c.showPage),"on")}}function f(s,r){var q=(s.css("left")!=-r*i+"px");if(q){s.fadeOut(20,function(){s.css("left",-r*i+"px");s.fadeIn(500)})}}function m(){j=setInterval(function(){if(c.switchActionAuto=="roll"){l(a(p).find(".ul-img"),1)}else{if(c.switchActionAuto=="opacity"){c.showPage++;if(c.showPage==h){c.showPage=0}f(a(p).find(".ul-img"),c.showPage);e(a(p).find(".num span").eq(c.showPage),"on")}}if(c.imageTitle||c.imageContent){l(a(p).find(".ul-text"),0)}},c.speedSwitch)}function o(){if(j){clearInterval(j)}}a(p).hover(function(){o();if(c.textDisplay==1){a(p).find(".bg:first").slideUp(c.textSpeed);a(p).find(".ul-text:first").slideUp(c.textSpeed)}else{if(c.textDisplay==2){a(p).find(".bg:first").slideDown(c.textSpeed);a(p).find(".ul-text:first").slideDown(c.textSpeed)}}},function(){if(c.autoPlay){m()}if(c.textDisplay==1){a(p).find(".bg:first").slideDown(c.textSpeed);a(p).find(".ul-text:first").slideDown(c.textSpeed)}else{if(c.textDisplay==2){a(p).find(".bg:first").slideUp(c.textSpeed);a(p).find(".ul-text:first").slideUp(c.textSpeed)}}});if(c.autoPlay){m()}function g(q,r){}function e(r,q){r=a(r)?a(r):r;r.addClass(q).siblings().removeClass(q)}})}})(jQuery);

/*调用*/
$(document).ready(function (){
	$('#img-play').maiPlayer({speedSwitch: 5000, playerWidth: 790});
});
</script>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)