日期:2014-05-16  浏览次数:20472 次

麻烦改下,一个页面 多个焦点图 随机执行其中一个 一个执行 其他的停止
本帖最后由 showbo 于 2013-10-30 08:59:56 编辑
一个页面 多个焦点图 间隔固定时间循环随机播放其中一个  当一个执行时  其他的都停止


Xslider.js 代码(需引用jquery)

/**
 * @package Xslider - A slider plugin for jQuery
 * @version 0.5
 * @author xhowhy <http://x1989.com> 
 **/
;(function($){
$.fn.Xslider = function(options){var settings ={
boxname: '#slider',
affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
speed: 1200, //动画速度
space: 3000, //时间间隔
auto: false, //true 自动滚动
trigger: 'mouseover', //触发事件 注意用mouseover代替hover
conbox: '.conbox', //内容容器id或class
ctag: 'a', //内容标签 默认为<a>
switcher: '.switcher', //切换触发器id或class
stag: 'a', //切换器标签 默认为a
current:'cur', //当前切换器样式名称
rand:true  // false 是否随机指定默认幻灯图片
};
settings = $.extend({}, settings, options);
var index = 1;
var last_index = 0;
var $conbox = $(this).find(settings.conbox),$contents = $conbox.find(settings.ctag);
var $switcher = $(this).find(settings.switcher),$stag = $switcher.find(settings.stag);
if(settings.rand) {index = Math.floor(Math.random()*$contents.length);slide();}
if(settings.affect == 'fade'){$.each($contents,function(k, v){(k === 0) ? $(this).css({'position':'absolute','z-index':9}):$(this).css({'position':'absolute','z-index':1,'opacity':0});
});
}
function slide(){if (index >= $contents.length) index = 0;
$stag.removeClass(settings.current).eq(index).addClass(settings.current);
//alert(settings.boxname);
switch(settings.affect){
case 'scrollx':
$conbox.width($contents.length*$contents.width());
$conbox.stop().animate({left:-$contents.width()*index},settings.speed);
break;
case 'scrolly':
$contents.css({display:'block'});
$conbox.stop().animate({top:-$contents.height()*index+'px'},settings.speed);
break;
case 'fade':
$contents.eq(last_index).stop().animate({'opacity': 0}, settings.speed/2).css('z-index',1)
 .end()
 .eq(index).css('z-index',9).stop().animate({'opacity': 1}, settings.speed/2)
break;
case 'none':
$contents.hide().eq(index).show();
break;
}
last_index = index;
index++;
};
if(settings.auto) var Timer = setInterval(slide, settings.space);
//if(settings.auto){
// index = $(this).index();
// slide();
// };
$stag.bind(settings.trigger,function(){
 _pause();
index = $(this).index();
slide();
_continue();
});
//$conbox.hover(_pause,_continue);//鼠标经过容器时停止 注释掉此句 鼠标经过容器 继续播放
function _pause(){
clearInterval(Timer);
}
function _continue(){
if(settings.auto)Timer = setInterval(slide, settings.space);
}
}
})(jQuery);




<div id="demopage">

<h2>焦点图片淡隐淡现</h2>
<div id="slider3" class="slider">