经验分享程序开发文档资料数据资源其它资源

jQuery大气满屏焦点图轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery大气满屏焦点图轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery大气满屏焦点图轮播滚动切换特效代码

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=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>jQuery大气满屏焦点图</title>
<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/slides.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<link href="css/lrtk.css" rel="stylesheet" type="text/css">
</head>

<body style="text-align:center">
<div id="maincontent">
    <div class="element pict"><a href="#"><img src="image/0001.jpg"></a></div>
    <div class="element pict"><a href="#"><img src="image/zhaopin.jpg"></a></div>
    <div class="element pict main"><a href="#"><img src="image/002.jpg"></a></div>
    <div class="element pict"><a href="#"><img src="image/003.jpg"></a></div>
    <div class="element pict"><a href="#"><img src="image/0004.gif"></a></div>
    <div class="element pict"><a href="#"><img src="image/weibo.jpg"></a></div>
    
    <div class="element navi left"><img src="image/left.gif" alt="left"></div>
    <div class="element navi right"><img src="image/right.gif" alt="right"></div>
</div>
</body>
</html>

JS代码(slide.js):

var _imgArray = new Array();
	$(document).ready(function(){
	/*scroll*/
if($("#maincontent").size() > 0){
	var scrollDistance = 528;
}
else{
	var scrollDistance = 0;
}
$("#navcontainer").css("width","100%");
	$("#navcontainer").append($("#siteHeader").clone());
	$("#navcontainer").append($("#siteNavigation").clone());
	var IE6browser = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true:false;
	if(!IE6browser){
	var _visiflag;
	setInterval(function(){
	if(scrollDistance < ___getPageScroll()[1]){
	if(!_visiflag){
	_visiflag = true;
	$("#navcontainer").show();
}
}
else{
	if(_visiflag){
	_visiflag = false;
	$("#navcontainer").hide();
}
}
}
,33);
	if(scrollDistance < ___getPageScroll()[1]){
	_visiflag = true;
	$("#navcontainer").show();
}
else{
	_visiflag = false;
	$("#navcontainer").hide();
}
}
$(".left,.right").VogueRollOver();
	var _preNum = 0;
	$("#slide1").find(".slideinner").find("a").mouseover(function(){
	if(_preNum != ($("#slide1").find(".slideinner").find("a").index(this))){
	$("#special_mainimg").find("img").eq(_preNum).fadeOut();
	_preNum = ($("#slide1").find(".slideinner").find("a").index(this));
	$("#special_mainimg").find("img").eq(_preNum).fadeIn();
}
}
)if($("#maincontent").size()){
	funcmaincontent();
}
;
	funcbnr($("#bnrcontent1"));
	funcbnr($("#bnrcontent2"));
	funcbnr($("#bnrcontent3"));
	funcbnr($("#bnrcontent4"));
	funcslide($("#slide1"));
	funcslide($("#slide2"));
	funcslide($("#slide3"));
	funcslide($("#slide4"));
	funcslide($("#slide5"));
	$(".pict").hover(function(){
	$(this).addClass("jhover");
}
,function(){
	$(this).removeClass("jhover");
}
).css("cursor","pointer").click(function(){
	//if($(this).find("a").eq(0).attr("href")){
	//location.href = $(this).find("a").eq(0).attr("href");
	//}
if($(this).find("a").eq(0).attr("href")){
	if($(this).find("a").eq(0).attr("target") == "_blank"){
	window.open($(this).find("a").eq(0).attr("href"));
}
else{
	location.href = $(this).find("a").eq(0).attr("href");
}
}
return false;
}
)}
);
	/*---------------slide FUNCTION---------------*/
function funcslide(_slide){
	var _slideCount = 0;
	var _slideMax = Math.ceil(_slide.find(".slidecontent").find(".element").length/3);
	var _slideLength = _slide.find(".slidecontent").find(".element").length;
	var _slideHeight = 0;
	if(_slide.find(".element").length > 3){
	var _str = '<div class="slidenavigate"><a href="#" class="prev nouse">PREV</a>';
	for(var i = 0;
	i < _slideMax;
	i++){
	_str += '<a href="#" class="num">'+Number(i+1)+'</a>';
}
_str += '<a href="#" class="next">NEXT</a></div>'_slide.prepend(_str)}
else{
	_slide.find(".slidecontent").css("padding-top","20px");
}
_slide.find(".slidecontent").find(".element").css("width","165px").flatHeights();
	_slideHeight = (parseInt(_slide.find(".slidecontent").find(".element:first-child").outerHeight())+5)+"px";
	_slide.find(".slidecontent").css({
	height:_slideHeight,overflow:"hidden"}
)_slide.find(".slideinner").css({
	width:_slideLength*185}
)_slide.find(".slidenavigate").css({
	visibility:"visible"}
)_slide.find(".slideinner").css({
	position:"absolute",left:"0px"}
)_slide.find(".slidenavigate").find("a.prev").click(function(){
	if(_slideCount != 0){
	_slideCount--;
	var _left = -637*_slideCount;
	_slide.find(".slideinner").animate({
	left:_left + "px"}
)_slide.find(".slidenavigate").find(".current").removeClass("current");
	_slide.find(".slidenavigate").find("a.num").eq(_slideCount).addClass("current");
	_slide.find(".slidenavigate").find(".nouse").removeClass("nouse");
	if(_slideCount == 0)_slide.find(".slidenavigate").find("a.prev").addClass("nouse");
}
return false;
}
)_slide.find(".slidenavigate").find("a.next").click(function(){
	if(_slideCount != _slideMax-1){
	_slideCount++;
	var _left = -637*_slideCount;
	_slide.find(".slideinner").animate({
	left:_left + "px"}
)_slide.find(".slidenavigate").find(".current").removeClass("current");
	_slide.find(".slidenavigate").find("a.num").eq(_slideCount).addClass("current");
	_slide.find(".slidenavigate").find(".nouse").removeClass("nouse");
	if(_slideCount == _slideMax-1)_slide.find(".slidenavigate").find("a.next").addClass("nouse");
}
return false;
}
)for(i = 0;
	i < _slideMax;
	i++){
	_slide.find(".slidenavigate").find("a.num").eq(i).click(function(){
	if(_slideCount != $(this).index()-1){
	_slideCount = $(this).index()-1;
	var _left = -637*_slideCount;
	_slide.find(".slideinner").animate({
	left:_left + "px"}
)_slide.find(".slidenavigate").find(".current").removeClass("current");
	_slide.find(".slidenavigate").find("a.num").eq(_slideCount).addClass("current");
	_slide.find(".slidenavigate").find(".nouse").removeClass("nouse");
	if(_slideCount == 0)_slide.find(".slidenavigate").find("a.prev").addClass("nouse");
	if(_slideCount == _slideMax-1)_slide.find(".slidenavigate").find("a.next").addClass("nouse");
}
return false;
}
)}
_slide.find(".slidenavigate").find("a.num").eq(_slideCount).addClass("current");
}
/*--------------bnrFUNCTION--------------*/
function funcbnr(_bnrcontent){
	var _bnrCount = 0;
	var _bnrMax = _bnrcontent.find(".pict").length;
	var _bnrHeight = 0;
	if(_bnrMax > 1){
	_bnrcontent.find(".left,.right").css("display","block");
}
_bnrcontent.find(".pict").flatHeights();
	_bnrcontent.find(".pict");
	_bnrHeight = (parseInt(_bnrcontent.find(".pict:first-child").outerHeight())+5)+"px";
	_bnrcontent.css("height",_bnrHeight);
	_bnrcontent.find(".left").click(function(){
	if(_bnrCount != 0){
	_bnrcontent.find(".pict").eq(_bnrCount).fadeOut(400,"linear");
	_bnrCount--;
	if(_bnrCount == 0){
	var str = _bnrcontent.find(".left").find("img").attr("src");
	if(str.indexOf("_nouse")==-1){
	str = str.replace("_on.gif",".gif");
	str = str.replace("_on.jpg",".jpg");
	str = str.replace(".gif","_nouse.gif");
	str = str.replace(".jpg","_nouse.jpg");
	_bnrcontent.find(".left").find("img").attr("src",str);
}
}
var str = _bnrcontent.find(".right").find("img").attr("src");
	if(str.indexOf("_nouse")!=-1){
	str = str.replace("_nouse.gif",".gif");
	str = str.replace("_nouse.jpg",".jpg");
	_bnrcontent.find(".right").find("img").attr("src",str);
}
_bnrcontent.find(".pict").eq(_bnrCount).fadeIn(400,"linear");
}
}
)_bnrcontent.find(".right").click(function(){
	if(_bnrCount != _bnrMax-1){
	_bnrcontent.find(".pict").eq(_bnrCount).fadeOut(400,"linear");
	_bnrCount++;
	if(_bnrCount == _bnrMax-1){
	var str = _bnrcontent.find(".right").find("img").attr("src");
	if(str.indexOf("_nouse")==-1){
	str = str.replace("_on.gif",".gif");
	str = str.replace("_on.jpg",".jpg");
	str = str.replace(".gif","_nouse.gif");
	str = str.replace(".jpg","_nouse.jpg");
	_bnrcontent.find(".right").find("img").attr("src",str);
}
}
var str = _bnrcontent.find(".left").find("img").attr("src");
	if(str.indexOf("_nouse")!=-1){
	str = str.replace("_nouse.",".");
	_bnrcontent.find(".left").find("img").attr("src",str);
}
_bnrcontent.find(".pict").eq(_bnrCount).fadeIn(400,"linear");
}
}
)}
/*--------------mainFUNCTION--------------*/
function funcmaincontent(){
	$("#maincontent").find(".main").css({
	"position":"absolute"}
);
	for(var i = 0;
	i < $("#maincontent").find(".element").length;
	i++){
	if($("#maincontent").find(".element").eq(i).find("img").attr("src")){
	_imgArray.push($("#maincontent").find(".element").eq(i).find("img").attr("src"));
}
}
if(/*@cc_on!@*/
false){
	//IEsetTimeout(startslide,400);
}
else{
	//Non IEif(_imgArray.length){
	loopImageLoader(0);
}
else{
	setTimeout(startslide,400);
}
}
function loopImageLoader(i){
	var image1 = new Image();
	image1.src = _imgArray[i];
	image1.onload = function(){
	i++;
	if(_imgArray.length != i){
	loopImageLoader(i);
}
else{
	startslide();
}
}
}
var _maxpage = 0;
	var _currentpage = 0;
	function startslide(){
	$("#maincontent").find(".element").css("display","inline-block");
	$("#maincontent").find(".right").hide();
	$("#maincontent").find(".left").hide();
	$("#maincontent").find(".right").fadeIn(600);
	$("#maincontent").find(".left").fadeIn(600);
	$("#maincontent").find(".left,.right").VogueRollOver();
	/*if($("#maincontent").find(".pict").length == 1){
	$("#maincontent").prepend($("#maincontent").find(".pict").clone());
	$("#maincontent").prepend($("#maincontent").find(".pict").clone());
	$("#maincontent").prepend($("#maincontent").find(".pict").clone());
}
else if($("#maincontent").find(".pict").length < 4){
	$("#maincontent").prepend($("#maincontent").find(".pict").clone());
}
*/
_maxpage = $("#maincontent").find(".pict").length;
	for(var i = 0;
	i < _maxpage;
	i++){
	var _pos = Math.round(996*(i-_currentpage)+$(window).width()/2-498);
	var _opa = 0.5;
	if(i == _currentpage)_opa = 1;
	if(_pos > $(window).width()){
	_pos -= _maxpage*996}
else if(_pos < -996){
	_pos += _maxpage*996}
$("#maincontent").find(".pict").eq(i).css({
	left:_pos,opacity:0}
).animate({
	opacity:_opa}
,{
	duration:400,easing:'linear'}
)}
$("#maincontent").stop().find(".main").removeClass("main");
	$("#maincontent").stop().find(".pict").eq(_currentpage).addClass("main").css({
	"position":"absolute"}
);
	window.onresize = function(){
	for(var i = 0;
	i < _maxpage;
	i++){
	var _pos = Math.round(996*(i-_currentpage)+$(window).width()/2-498);
	var _opa = 0.5;
	if(i == _currentpage)_opa = 1;
	if(_pos > $(window).width()){
	_pos -= _maxpage*996}
$("#maincontent").stop().find(".pict").eq(i).css({
	left:_pos,opacity:_opa}
)}
}
$("#maincontent").find(".right").click(nextPage);
	$("#maincontent").find(".left").click(prevPage);
}
function nextPage(){
	_currentpage++;
	if(_currentpage > _maxpage-1)_currentpage = 0;
	$("#maincontent").stop().find(".main").removeClass("main");
	$("#maincontent").stop().find(".pict").eq(_currentpage).addClass("main").css({
	"position":"absolute"}
);
	;
	_pict = $("#maincontent").find(".pict");
	for(var i = 0;
	i < _maxpage;
	i++){
	var _pos = Math.round(996*(i-_currentpage)+$(window).width()/2-498);
	var _opa = 0.5;
	if(i == _currentpage)_opa = 1;
	if(_pos > $(window).width()){
	_pos -= _maxpage*996}
else if(_pos < -996*2){
	_pos += _maxpage*996}
_pict.eq(i).stop().css({
	left:_pos+996}
).animate({
	left:_pos,opacity:_opa}
,{
	duration:700,easing:'easeOutQuint'}
)}
}
function prevPage(){
	_currentpage--;
	if(_currentpage< 0)_currentpage = _maxpage -1;
	$("#maincontent").stop().find(".main").removeClass("main");
	$("#maincontent").stop().find(".pict").eq(_currentpage).addClass("main").css({
	"position":"absolute"}
);
	;
	for(var i = 0;
	i < _maxpage;
	i++){
	var _pos = Math.round(996*(i-_currentpage)+$(window).width()/2-498);
	var _opa = 0.5;
	if(i == _currentpage)_opa = 1;
	if(_pos < -996){
	_pos += _maxpage*996}
else if(_pos > $(window).width()+996){
	_pos -= _maxpage*996}
$("#maincontent").find(".pict").eq(i).stop().css({
	left:_pos-996}
).animate({
	left:_pos,opacity:_opa}
,{
	duration:700,easing:'easeOutQuint'}
)}
}
}
/*----------------ROLLOVER PLUG-IN----------------*/
(function($){
	$.fn.VogueRollOver = function(){
	var _imgArray = new Array();
	for(var i = 0;
	i < this.length;
	i++){
	var _str= this.eq(i).find("img").attr("src");
	_str = _str.replace("_nouse.gif",".gif");
	_str = _str.replace("_nouse.jpg",".jpg");
	_str= _str.replace(".gif","_on.gif");
	_str= _str.replace(".jpg","_on.jpg");
	_imgArray.push(_str);
}
loopImageLoader(0);
	function loopImageLoader(i){
	if(_imgArray[i]){
	var image1 = new Image();
	image1.src = _imgArray[i];
	image1.onload = function(){
	i++;
	if(_imgArray.length != i){
	loopImageLoader(i);
}
}
}
}
return this.hover(function(){
	var str = $(this).find("img").attr("src");
	if(str.indexOf("_on")==-1 && str.indexOf("_nouse")==-1){
	str = str.replace(".gif","_on.gif");
	str = str.replace(".jpg","_on.jpg");
	$(this).find("img").attr("src",str);
}
}
,function(){
	var str = $(this).find("img").attr("src");
	str = str.replace("_on.gif",".gif");
	str = str.replace("_on.jpg",".jpg");
	$(this).find("img").attr("src",str);
}
);
}
;
}
)($);
	jQuery.easing['jswing'] = jQuery.easing['swing'];
	/*-----EASING------*/
jQuery.extend( jQuery.easing,{
	def:'easeOutQuint',swing:function (x,t,b,c,d){
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeOutQuint:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
}
);
	document.write('<style type="text/css">div#maincontent div.main{
	display:none;
}
div#maincontent div.element{
	position:absolute !important;
}
</style>')/** / THIRD FUNCTION * getPageSize() by quirksmode.com * * @return Array Return an array with page width,height and window width,height */
function ___getPageSize(){
	var xScroll,yScroll;
	if (window.innerHeight && window.scrollMaxY){
	xScroll = window.innerWidth + window.scrollMaxX;
	yScroll = window.innerHeight + window.scrollMaxY;
}
else if (document.body.scrollHeight > document.body.offsetHeight){
	// all but Explorer MacxScroll = document.body.scrollWidth;
	yScroll = document.body.scrollHeight;
}
else{
	// Explorer Mac...would also work in Explorer 6 Strict,Mozilla and SafarixScroll = document.body.offsetWidth;
	yScroll = document.body.offsetHeight;
}
var windowWidth,windowHeight;
	if (self.innerHeight){
	// all except Explorerif(document.documentElement.clientWidth){
	windowWidth = document.documentElement.clientWidth;
}
else{
	windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight){
	// Explorer 6 Strict ModewindowWidth = document.documentElement.clientWidth;
	windowHeight = document.documentElement.clientHeight;
}
else if (document.body){
	// other ExplorerswindowWidth = document.body.clientWidth;
	windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewportif(yScroll < windowHeight){
	pageHeight = windowHeight;
}
else{
	pageHeight = yScroll;
}
// for small pages with total width less then width of the viewportif(xScroll < windowWidth){
	pageWidth = xScroll;
}
else{
	pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
	return arrayPageSize;
}
;
	/** / THIRD FUNCTION * getPageScroll() by quirksmode.com * * @return Array Return an array with x,y page scroll values. */
function ___getPageScroll(){
	var xScroll,yScroll;
	if (self.pageYOffset){
	yScroll = self.pageYOffset;
	xScroll = self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollTop){
	// Explorer 6 StrictyScroll = document.documentElement.scrollTop;
	xScroll = document.documentElement.scrollLeft;
}
else if (document.body){
	// all other ExplorersyScroll = document.body.scrollTop;
	xScroll = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScroll,yScroll);
	return arrayPageScroll;
}
;

JS代码(slides.js):

/* super slide1.0 -- Copyright ©2012 Dtop */
(function($){
	$.fn.slide=function(options){
	$.fn.slide.deflunt={
	effect:"fade",//效果 || fade：渐显； || top：上滚动；|| left：左滚动；|| topLoop：上循环滚动；|| leftLoop：左循环滚动；|| topMarquee：上无缝循环滚动；|| leftMarquee：左无缝循环滚动；autoPlay:false,//自动运行delayTime:500,//效果持续时间interTime:2500,//自动运行间隔。当effect为无缝滚动的时候，相当于运行速度。defaultIndex:0,//默认的当前位置索引。0是第一个titCell:".hd li",//导航元素mainCell:".bd",//内容元素的父层对象trigger:"mouseover",//触发方式 || mouseover：鼠标移过触发；|| click：鼠标点击触发；scroll:1,//每次滚动个数。vis:1,//visible，可视范围个数，当内容个数少于可视个数的时候，不执行效果。titOnClassName:"on",//当前位置自动增加的class名称prevCell:".prev",//前一个按钮元素。nextCell:".next"//后一个按钮元素。}
;
	return this.each(function(){
	var opts = $.extend({
}
,$.fn.slide.deflunt,options);
	var index=opts.defaultIndex;
	var prevBtn = $(opts.prevCell,$(this));
	var nextBtn = $(opts.nextCell,$(this));
	var navObj = $(opts.titCell,$(this));
	//导航子元素结合var navObjSize = navObj.size();
	var conBox = $(opts.mainCell,$(this));
	//内容元素父层对象var conBoxSize=conBox.children().size();
	var slideH=0;
	var slideW=0;
	var selfW=0;
	var selfH=0;
	var autoPlay = opts.autoPlay;
	var inter=null;
	//setInterval名称var oldIndex = index;
	if( navObjSize==0 )navObjSize=conBoxSize;
	if(conBoxSize<opts.vis) return;
	//当内容个数少于可视个数，不执行效果。conBox.children().each(function(){
	//取最大值if( $(this).width()>selfW ){
	selfW=$(this).width();
	slideW=$(this).outerWidth(true);
}
if( $(this).height()>selfH ){
	selfH=$(this).height();
	slideH=$(this).outerHeight(true);
}
}
);
	switch(opts.effect){
	case "top":conBox.wrap('<div class="tempWrap" style="overflow:hidden;
	position:relative;
	height:'+opts.vis*slideH+'px"></div>').css({
	"position":"relative","padding":"0","margin":"0"}
).children().css({
	"height":selfH}
);
	break;
	case "left":conBox.wrap('<div class="tempWrap" style="overflow:hidden;
	position:relative;
	width:'+opts.vis*slideW+'px"></div>').css({
	"width":conBoxSize*slideW,"position":"relative","overflow":"hidden","padding":"0","margin":"0"}
).children().css({
	"float":"left","width":selfW}
);
	break;
	case "leftLoop":case "leftMarquee":conBox.children().clone().appendTo(conBox).clone().prependTo(conBox);
	conBox.wrap('<div class="tempWrap" style="overflow:hidden;
	position:relative;
	width:'+opts.vis*slideW+'px"></div>').css({
	"width":conBoxSize*slideW*3,"position":"relative","overflow":"hidden","padding":"0","margin":"0","left":-conBoxSize*slideW}
).children().css({
	"float":"left","width":selfW}
);
	break;
	case "topLoop":case "topMarquee":conBox.children().clone().appendTo(conBox).clone().prependTo(conBox);
	conBox.wrap('<div class="tempWrap" style="overflow:hidden;
	position:relative;
	height:'+opts.vis*slideH+'px"></div>').css({
	"height":conBoxSize*slideH*3,"position":"relative","padding":"0","margin":"0","top":-conBoxSize*slideH}
).children().css({
	"height":selfH}
);
	break;
}
//效果函数var doPlay=function(){
	switch(opts.effect){
	case "fade":case "top":case "left":if ( index >= navObjSize){
	index = 0;
}
else if( index < 0){
	index = navObjSize-1;
}
break;
	case "leftMarquee":case "topMarquee":if ( index>= 2){
	index=1;
}
else if( index<0){
	index = 0;
}
break;
	case "leftLoop":case "topLoop":var tempNum = index - oldIndex;
	if( navObjSize>2 && tempNum==-(navObjSize-1) ) tempNum=1;
	if( navObjSize>2 && tempNum==(navObjSize-1) ) tempNum=-1;
	var scrollNum = Math.abs( tempNum*opts.scroll );
	if ( index >= navObjSize){
	index = 0;
}
else if( index < 0){
	index = navObjSize-1;
}
break;
}
switch (opts.effect){
	case "fade":conBox.children().stop(true,true).eq(index).fadeIn(opts.delayTime).siblings().hide();
	break;
	case "top":conBox.stop(true,true).animate({
	"top":-index*opts.scroll*slideH}
,opts.delayTime);
	break;
	case "left":conBox.stop(true,true).animate({
	"left":-index*opts.scroll*slideW}
,opts.delayTime);
	break;
	case "leftLoop":if(tempNum<0 ){
	conBox.stop(true,true).animate({
	"left":-(conBoxSize-scrollNum )*slideW}
,opts.delayTime,function(){
	for(var i=0;
	i<scrollNum;
	i++){
	conBox.children().last().prependTo(conBox);
}
conBox.css("left",-conBoxSize*slideW);
}
);
}
else{
	conBox.stop(true,true).animate({
	"left":-( conBoxSize + scrollNum)*slideW}
,opts.delayTime,function(){
	for(var i=0;
	i<scrollNum;
	i++){
	conBox.children().first().appendTo(conBox);
}
conBox.css("left",-conBoxSize*slideW);
}
);
}
break;
	// leftLoop endcase "topLoop":if(tempNum<0 ){
	conBox.stop(true,true).animate({
	"top":-(conBoxSize-scrollNum )*slideH}
,opts.delayTime,function(){
	for(var i=0;
	i<scrollNum;
	i++){
	conBox.children().last().prependTo(conBox);
}
conBox.css("top",-conBoxSize*slideH);
}
);
}
else{
	conBox.stop(true,true).animate({
	"top":-( conBoxSize + scrollNum)*slideH}
,opts.delayTime,function(){
	for(var i=0;
	i<scrollNum;
	i++){
	conBox.children().first().appendTo(conBox);
}
conBox.css("top",-conBoxSize*slideH);
}
);
}
break;
	//topLoop endcase "leftMarquee":var tempLeft = conBox.position().left;
	if(index==0 ){
	conBox.animate({
	"left":++tempLeft}
,0,function(){
	if( conBox.position().left>= 0){
	for(var i=0;
	i<conBoxSize;
	i++){
	conBox.children().last().prependTo(conBox);
}
conBox.css("left",-conBoxSize*slideW);
}
}
);
}
else{
	conBox.animate({
	"left":--tempLeft}
,0,function(){
	if( conBox.position().left<= -conBoxSize*slideW*2){
	for(var i=0;
	i<conBoxSize;
	i++){
	conBox.children().first().appendTo(conBox);
}
conBox.css("left",-conBoxSize*slideW);
}
}
);
}
break;
	// leftMarquee endcase "topMarquee":var tempTop = conBox.position().top;
	if(index==0 ){
	conBox.animate({
	"top":++tempTop}
,0,function(){
	if( conBox.position().top>= 0){
	for(var i=0;
	i<conBoxSize;
	i++){
	conBox.children().last().prependTo(conBox);
}
conBox.css("top",-conBoxSize*slideH);
}
}
);
}
else{
	conBox.animate({
	"top":--tempTop}
,0,function(){
	if( conBox.position().top<= -conBoxSize*slideH*2){
	for(var i=0;
	i<conBoxSize;
	i++){
	conBox.children().first().appendTo(conBox);
}
conBox.css("top",-conBoxSize*slideH);
}
}
);
}
break;
	// topMarquee end}
//switch endnavObj.eq(index).addClass(opts.titOnClassName).siblings().removeClass(opts.titOnClassName);
	oldIndex=index;
}
;
	//初始化执行doPlay();
	//自动播放if (autoPlay){
	if( opts.effect=="leftMarquee" || opts.effect=="topMarquee" ){
	index++;
	inter = setInterval(doPlay,opts.interTime);
	conBox.hover(function(){
	if(autoPlay){
	clearInterval(inter);
}
}
,function(){
	if(autoPlay){
	clearInterval(inter);
	inter = setInterval(doPlay,opts.interTime);
}
}
);
}
else{
	inter=setInterval(function(){
	index++;
	doPlay()}
,opts.interTime);
	$(this).hover(function(){
	if(autoPlay){
	clearInterval(inter);
}
}
,function(){
	if(autoPlay){
	clearInterval(inter);
	inter=setInterval(function(){
	index++;
	doPlay()}
,opts.interTime);
}
}
);
}
}
//鼠标事件var mst;
	if(opts.trigger=="mouseover"){
	navObj.hover(function(){
	clearTimeout(mst);
	index=navObj.index(this);
	mst = window.setTimeout(doPlay,200);
}
,function(){
	if(!mst)clearTimeout(mst);
}
);
}
else{
	navObj.click(function(){
	index=navObj.index(this);
	doPlay();
}
)}
nextBtn.click(function(){
	index++;
	doPlay();
}
);
	prevBtn.click(function(){
	index--;
	doPlay();
}
);
}
);
	//each End}
;
	//slide End}
)(jQuery);

CSS代码(lrtk.css):

@charset "utf-8";body{margin:0px;}
img{border:none;vertical-align:middle;}
img{-ms-interpolation-mode:bicubic;}
/* common-----------------------------------------------*/
/*__ maincontent _*/
#maincontent{background:#000;height:528px;overflow:hidden;position:relative;}
#maincontent div.pict{cursor:default !important;}
#maincontent div.main{position:static;text-align:center;display:block;cursor:pointer !important}
#maincontent .element{display:none;position:absolute !important;}
#maincontent .left{top:200px;left:0;cursor:pointer;}
#maincontent .right{top:200px;right:0;cursor:pointer;}
#maincontent .main .guardian{display:none;height:0;}
#maincontent .navi{z-index:9999999;}
div#maincontent div.main{display:none;}
div#maincontent div.element{position:absolute !important;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
748.52 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
748.52 KB
立即下载
俞珠娅莲
了解
打赏作者 鼓励作者
Html 焦点滚动特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章