麻烦改下,一个页面 多个焦点图 随机执行其中一个 一个执行 其他的停止

wangqingyu0088 2013-10-29 07:35:47
一个页面 多个焦点图 间隔固定时间循环随机播放其中一个 当一个执行时 其他的都停止


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">
<div class="conbox">
<div style="position: absolute; z-index: 1; opacity: 0;"><a href="http://www.17sucai.com/" title="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示"><img alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="demo_files/4ffecc68cb780d1801f19db52d38cabd.jpg" width="620" height="340"></a></div>
<div style="position: absolute; z-index: 1; opacity: 0;"><a href="http://www.17sucai.com/" title="常见问题解答部分动态读取数据 web / jQuery的,雅虎及谷歌文件"><img alt="常见问题解答部分动态读取数据 web / jQuery的,雅虎及谷歌文件" src="demo_files/9fae30738c94fb8e47dd2ba3e6003290.jpg" width="620" height="340"></a></div>
<div style="position: absolute; z-index: 9; opacity: 1;"><a href="http://www.17sucai.com/" title="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的"><img alt="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的" src="demo_files/44b91d75de385dc1a70fe56600f41e52.jpg" width="620" height="340"></a></div>
<div style="position: absolute; z-index: 1; opacity: 0;"><a href="http://www.17sucai.com/" title="jquery 幻灯片效果制作防苹果风格的开机画面"><img alt="jquery 幻灯片效果制作防苹果风格的开机画面" src="demo_files/85dc407af2b2f7bfbbcb025a0ee0d66e.jpg" width="620" height="340"></a></div>
<div style="position: absolute; z-index: 1; opacity: 0;"><a href="http://www.17sucai.com/" title="jquery制作创建动画404页面"><img alt="jquery制作创建动画404页面" src="demo_files/323ce4b13f72648e096bd1a86cba762a.jpg" width="620" height="340"></a></div>
</div>
<div class="switcher">
<a href="#" class="">1</a>
<a class="" href="#">2</a>
<a class="cur" href="#">3</a>
<a class="" href="#">4</a>
<a class="" href="#">5</a>
</div>
</div><!--slider end-->

<h2>焦点图片水平滚动</h2>
<div id="slider1" class="slider">
<div style="width: 3100px; left: -620px;" class="conbox">
<div><a href="http://www.17sucai.com/" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示"><img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/c9cfb68c13cbe925d3c9a03912f3b1de.jpg" width="620" height="340"></a></div>
<div><a href="hhttp://www.17sucai.com/" title="jquery 分类搜索框防谷歌网站搜索页面"><img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/310772035582a551c3afd8f6cc071409.jpg" width="620" height="340"></a></div>
<div><a href="http://www.17sucai.com/" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件"><img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/f4fe9dd611bd459c0244159163109bc4.jpg" width="620" height="340"></a></div>
<div><a href="http://www.17sucai.com/" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示"><img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/323ce4b13f72648e096bd1a86cba762a.jpg" width="620" height="340"></a></div>
<div><a href="http://www.17sucai.com/" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息"><img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/9fae30738c94fb8e47dd2ba3e6003290.jpg" width="620" height="340"></a></div>
</div>

<div class="switcher">
<a href="#" class="">1</a>
<a class="cur" href="#">2</a>
<a class="" href="#">3</a>
<a class="" href="#">4</a>
<a class="" href="#">5</a>
</div>
</div><!--slider end-->

<h2>焦点图片垂直滚动</h2>
<div id="slider2" class="slider">
<div style="top: 0px;" class="conbox">
<div style="display: block;"><a href="http://www.17sucai.com/" title="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示"><img alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="demo_files/f23be4d33f61fda6d1769258ba6f48fb.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="http://www.17sucai.com/" title="常见问题解答部分动态读取数据 web / jQuery的,雅虎及谷歌文件"><img alt="常见问题解答部分动态读取数据 web / jQuery的,雅虎及谷歌文件" src="demo_files/85dc407af2b2f7bfbbcb025a0ee0d66e.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="http://www.17sucai.com/" title="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的"><img alt="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的" src="demo_files/44b91d75de385dc1a70fe56600f41e52.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="http://www.17sucai.com/" title="jquery 幻灯片效果制作防苹果风格的开机画面"><img alt="jquery 幻灯片效果制作防苹果风格的开机画面" src="demo_files/4ffecc68cb780d1801f19db52d38cabd.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="http://www.17sucai.com/" title="jquery制作创建动画404页面"><img alt="jquery制作创建动画404页面" src="demo_files/fd4767d55565e368f7c380f1b80cb878.jpg" width="620" height="340"></a></div>
</div>
<div class="switcher">
<a href="#" class="cur">1</a>
<a class="" href="#">2</a>
<a class="" href="#">3</a>
<a class="" href="#">4</a>
<a class="" href="#">5</a>
</div>
</div><!--slider end-->

<h2>选项卡</h2>
<div id="slider4" class="slider">
<div class="conbox">
<div style="display: none;"><a href="http://www.17sucai.com/" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示"><img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/c9cfb68c13cbe925d3c9a03912f3b1de.jpg" width="620" height="340"></a></div>
<div style="display: block;"><a href="hhttp://www.17sucai.com/" title="jquery 分类搜索框防谷歌网站搜索页面"><img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/310772035582a551c3afd8f6cc071409.jpg" width="620" height="340"></a></div>
<div style="display: none;"><a href="http://www.17sucai.com/" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件"><img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/f4fe9dd611bd459c0244159163109bc4.jpg" width="620" height="340"></a></div>
<div style="display: none;"><a href="http://www.17sucai.com/" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示"><img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/323ce4b13f72648e096bd1a86cba762a.jpg" width="620" height="340"></a></div>
<div style="display: none;"><a href="http://www.17sucai.com/" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息"><img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/9fae30738c94fb8e47dd2ba3e6003290.jpg" width="620" height="340"></a></div>
</div>
<div class="switcher">
<a href="#" class="">1</a>
<a class="cur" href="#">2</a>
<a class="" href="#">3</a>
<a class="" href="#">4</a>
<a class="" href="#">5</a>
</div>
</div><!--slider end-->

</div>






$(document).ready(function(){

// 焦点图片水平滚动
$("#slider1").Xslider({
// 默认配置
boxname: '#slider1',
affect: 'scrollx', //效果 有scrollx|scrolly|fade|none
speed: 800, //动画速度
space: 3000, //时间间隔
auto: true , //true 自动滚动
trigger: 'mouseover', //触发事件 注意用mouseover代替hover
conbox: '.conbox', //内容容器id或class
ctag: 'div', //内容标签 默认为<a>
switcher: '.switcher', //切换触发器id或class
stag: 'a', //切换器标签 默认为a
current:'cur', //当前切换器样式名称
rand:false //是否随机指定默认幻灯图片
});

// 焦点图片垂直滚动
$("#slider2").Xslider({
boxname: '#slider2',
affect:'scrolly',
ctag: 'div',
auto: false, //自动滚动
speed:400
});

// 焦点图片淡隐淡现
$("#slider3").Xslider({
boxname: '#slider3',
affect:'fade',
ctag: 'div'
});

// 选项卡
$("#slider4").Xslider({
boxname: '#slider4',
affect:'none',
ctag: 'div',
speed:10
});

});





...全文
7892 11 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
wangqingyu0088 2013-11-04
  • 打赏
  • 举报
回复
多谢版主 已经搞定了 结贴晚了 见谅
  • 打赏
  • 举报
回复
忘记return了。。加上红色部分就行了 this.start = function () { _pause(); settings.auto = true; _continue(); } (function ($) { $.fn.Xslider = function (options) { if (options === 'start' || options === 'stop') {//增加2个方法 var instance=this.data('instance'); instance[options](); return this; } var instance= new libXslider(options,this); this.data('instance',instance);//缓存对应的实例 } })(jQuery);
wangqingyu0088 2013-10-30
  • 打赏
  • 举报
回复
哎 js 自己渣渣 搞不定 高人快出现啊
wangqingyu0088 2013-10-30
  • 打赏
  • 举报
回复
多谢版主,没有达到预想的效果 还是会一块儿 播放 。贴上 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 Xslider 插件图片特效演示图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{text-decoration:none;}
#demopage{width:100%;margin:0 auto;}
#demopage h2{margin:5px 0 5px 0;font-size:16px;text-align:center;font-family:"微软雅黑","黑体";color:#ff6600;}
/* slider */
.slider{margin:5px 5px;width:300px;height:240px;border:1px solid #ccc;position:relative;overflow:hidden; float:left}
.conbox{position:absolute;/*必要元素*/}
.switcher{position:absolute;bottom:10px;right:10px;float:right;z-index:99;}
.switcher a{background:#fff;border:1px solid #D00000;cursor:pointer;float:left;font-family:arial;height:18px;line-height:18px;width:18px;margin:4px;text-align:center;color:#D00000;}
.switcher a.cur,.switcher a:hover{background:#FF0000;border:1px solid #D00000;height:24px;line-height:24px;width:24px;margin:0 2px;color:#fff;font-weight:800;}
/* slider1 水平 */
 .conbox{width:9999px;}
 .conbox div{width:300px;height:200px;overflow:hidden;float:left;}
 .conbox div img{width:300px;height:200px;overflow:hidden;float:left;}

</style>
<script type="text/javascript" src="demo_files/jquery-1.js"></script>
<script type="text/javascript" src="demo_files/jquery.js"></script>
<script type="text/javascript">

function rnd(min, max) {//生成随机数
         var tmp = min;
         if (max < min) { min = max; max = tmp; }
         return Math.floor(Math.random() * (max - min + 1) + min);
     }
     function rndXslider() {//timer执行的函数
         var n = rnd(1, 4);
		 //alert(n);
         for (var i = 1; i <= 4; i++) $('#slider' + i).Xslider(i == n ? 'start' : 'stop');
     }
	 
var delay = 6000;//切换间隔,1分钟,其他修改这个

 $(document).ready(function () {
         // 焦点图片水平滚动
         $("#slider1").Xslider({
             // 默认配置
             boxname: '#slider1',
             affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
             speed: 800, //动画速度
             space: 3000, //时间间隔
             auto: true, //true 自动滚动
             trigger: 'mouseover', //触发事件 注意用mouseover代替hover
             conbox: '.conbox', //内容容器id或class
             ctag: 'div', //内容标签 默认为<a>
             switcher: '.switcher', //切换触发器id或class
             stag: 'a', //切换器标签 默认为a
             current: 'cur', //当前切换器样式名称
             rand: false //是否随机指定默认幻灯图片
         });

         // 焦点图片垂直滚动
         $("#slider2").Xslider({
           boxname: '#slider2',
             affect: 'scrolly', //效果  有scrollx|scrolly|fade|none
             speed: 800, //动画速度
             space: 3000, //时间间隔
             auto: true, //true 自动滚动
             trigger: 'mouseover', //触发事件 注意用mouseover代替hover
             conbox: '.conbox', //内容容器id或class
             ctag: 'div', //内容标签 默认为<a>
             switcher: '.switcher', //切换触发器id或class
             stag: 'a', //切换器标签 默认为a
             current: 'cur', //当前切换器样式名称
             rand: false //是否随机指定默认幻灯图片
         });
         // 焦点图片淡隐淡现
         $("#slider3").Xslider({
             boxname: '#slider3',
             affect: 'fade', //效果  有scrollx|scrolly|fade|none
             speed: 800, //动画速度
             space: 3000, //时间间隔
             auto: true, //true 自动滚动
             trigger: 'mouseover', //触发事件 注意用mouseover代替hover
             conbox: '.conbox', //内容容器id或class
             ctag: 'div', //内容标签 默认为<a>
             switcher: '.switcher', //切换触发器id或class
             stag: 'a', //切换器标签 默认为a
             current: 'cur', //当前切换器样式名称
             rand: false //是否随机指定默认幻灯图片
         });
         // 选项卡
         $("#slider4").Xslider({
             boxname: '#slider4',
             affect: 'none', //效果  有scrollx|scrolly|fade|none
             speed: 800, //动画速度
             space: 3000, //时间间隔
             auto: true, //true 自动滚动
             trigger: 'mouseover', //触发事件 注意用mouseover代替hover
             conbox: '.conbox', //内容容器id或class
             ctag: 'div', //内容标签 默认为<a>
             switcher: '.switcher', //切换触发器id或class
             stag: 'a', //切换器标签 默认为a
             current: 'cur', //当前切换器样式名称
             rand: false //是否随机指定默认幻灯图片
         });
         setInterval(rndXslider, delay);//执行切换
     });
</script>
</head>
<body>
	<div id="demopage">
		
		
		<div id="slider3" class="slider">
        <h2>焦点图片淡隐淡现</h2>
			<div style="width: 3100px; " class="conbox">
				<div><a href="#" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示"><img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/1.jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 分类搜索框防谷歌网站搜索页面"><img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/1 (1).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件"><img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/1 (2).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示"><img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/1 (3).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息"><img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/1 (4).jpg" width="620" height="340"></a></div>
			</div>
			<div class="switcher">
				<a href="#" class="">1</a>
				<a class="" href="#">2</a>
				<a class="cur" href="#">3</a>
				<a class="" href="#">4</a>
				<a class="" href="#">5</a>
			</div>
		</div><!--slider end-->
		
		
		<div id="slider1" class="slider">
        <h2>焦点图片水平滚动</h2>
			<div style="width: 3100px; " class="conbox">
				<div><a href="#" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示"><img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/1 (5).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 分类搜索框防谷歌网站搜索页面"><img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/1 (6).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件"><img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/1 (7).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示"><img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/1 (8).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息"><img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/1 (9).jpg" width="620" height="340"></a></div>
			</div>

			<div class="switcher">
				<a href="#" class="">1</a>
				<a class="cur" href="#">2</a>
				<a class="" href="#">3</a>
				<a class="" href="#">4</a>
				<a class="" href="#">5</a>
			</div>
		</div><!--slider end-->

		
		<div id="slider2" class="slider">
        <h2>焦点图片垂直滚动</h2>
			<div style="top: 0px;" class="conbox">
				<div><a href="#" title="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示"><img alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="demo_files/2.jpg" width="620" height="340"></a></div>
				<div><a href="#" title="常见问题解答部分动态读取数据 web / jQuery的,雅虎及谷歌文件"><img alt="常见问题解答部分动态读取数据 web / jQuery的,雅虎及谷歌文件" src="demo_files/2 (1).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的"><img alt="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的" src="demo_files/2 (2).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 幻灯片效果制作防苹果风格的开机画面"><img alt="jquery 幻灯片效果制作防苹果风格的开机画面" src="demo_files/2 (3).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery制作创建动画404页面"><img alt="jquery制作创建动画404页面" src="demo_files/2 (4).jpg" width="620" height="340"></a></div>
			</div>
			<div class="switcher">
				<a href="#" class="cur">1</a>
				<a class="" href="#">2</a>
				<a class="" href="#">3</a>
				<a class="" href="#">4</a>
				<a class="" href="#">5</a>
			</div>
		</div><!--slider end-->
		
		
		<div id="slider4" class="slider">
        <h2>选项卡</h2>
			<div class="conbox">
				<div><a href="#" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示"><img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/2 (5).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 分类搜索框防谷歌网站搜索页面"><img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/2 (6).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件"><img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/2 (7).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示"><img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/2 (8).jpg" width="620" height="340"></a></div>
				<div><a href="#" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息"><img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/2 (9).jpg" width="620" height="340"></a></div>
			</div>
			<div class="switcher">
				<a href="#" class="">1</a>
				<a class="cur" href="#">2</a>
				<a class="" href="#">3</a>
				<a class="" href="#">4</a>
				<a class="" href="#">5</a>
			</div>
		</div><!--slider end-->		
		
	</div>


</body></html>

  • 打赏
  • 举报
回复
没有样式,不知道改的对不对,用实例的模式来控制
   /**
    * @package Xslider - A slider plugin for jQuery
    * @version 0.5
    * @author xhowhy <http://x1989.com> 
    **/
////////////////////////做成实例控制模式
    function libXslider(options,ojQuery) {
        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 = ojQuery.find(settings.conbox), $contents = $conbox.find(settings.ctag);
        var $switcher = ojQuery.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);
        }
        this.stop = function () { settings.auto = false; _pause(); }
        this.start = function () { settings.auto = true; _continue(); }
    }
     (function ($) {
         $.fn.Xslider = function (options) {
             if (options === 'start' || options === 'stop') {//增加2个方法
                var instance=this.data('instance');//获得实例
                instance[options]();
             }
            var instance= new libXslider(options,this);
            this.data('instance',instance);//////缓存对应的实例
         }
     })(jQuery);



     function rnd(min, max) {//生成随机数
         var tmp = min;
         if (max < min) { min = max; max = tmp; }
         return Math.floor(Math.random() * (max - min + 1) + min);
     }
     function rndXslider() {//timer执行的函数
         var n = rnd(1, 4);alert(n)
         for (var i = 1; i <= 4; i++) $('#slider' + i).Xslider(i == n ? 'start' : 'stop');
     }
     var delay = 60000;//切换间隔,1分钟,其他修改这个
     $(document).ready(function () {
         // 焦点图片水平滚动
         $("#slider1").Xslider({
             // 默认配置
             boxname: '#slider1',
             affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
             speed: 800, //动画速度
             space: 3000, //时间间隔
             auto: true, //true 自动滚动
             trigger: 'mouseover', //触发事件 注意用mouseover代替hover
             conbox: '.conbox', //内容容器id或class
             ctag: 'div', //内容标签 默认为<a>
             switcher: '.switcher', //切换触发器id或class
             stag: 'a', //切换器标签 默认为a
             current: 'cur', //当前切换器样式名称
             rand: false //是否随机指定默认幻灯图片
         });

         // 焦点图片垂直滚动
         $("#slider2").Xslider({
             boxname: '#slider2',
             affect: 'scrolly',
             ctag: 'div',
             auto: false, //自动滚动
             speed: 400
         });

         // 焦点图片淡隐淡现
         $("#slider3").Xslider({
             boxname: '#slider3',
             affect: 'fade',
             ctag: 'div'
         });

         // 选项卡
         $("#slider4").Xslider({
             boxname: '#slider4',
             affect: 'none',
             ctag: 'div',
             speed: 10
         });

         setInterval(rndXslider, delay);//执行切换
     });
wangqingyu0088 2013-10-30
  • 打赏
  • 举报
回复
这是求教啊 麻烦版主改个标题 编辑下
hch126163 2013-10-30
  • 打赏
  • 举报
回复
多谢分享!!!!!!!
  • 打赏
  • 举报
回复
那随机那个就不用,你指定播放一个就好了,chrome测试没有问题
    function libXslider(options, ojQuery, index) {
        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 = ojQuery.find(settings.conbox), $contents = $conbox.find(settings.ctag);
        var $switcher = ojQuery.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();
        //            };
        var me = this;
        $stag.bind(settings.trigger, function () {
            _pause();
            index = $(this).index();
            slide();
           // _continue();
            me.start();
        });
        //$conbox.hover(_pause,_continue);//鼠标经过容器时停止 注释掉此句 鼠标经过容器 继续播放
        function _pause() {
            clearInterval(Timer);
        }
        function _continue() {
            if (settings.auto) Timer = setInterval(slide, settings.space);
        }
        this.stop = function () { settings.auto = false; _pause(); }
        this.start = function () {
            var len = $.fn.Xslider.instances.length;
            for (var i = 0; i < len; i++) $.fn.Xslider.instances[i].stop();

            settings.auto = true; _continue();
        }
    }
    (function ($) {
        $.fn.Xslider = function (options) {
            if (options === 'start' || options === 'stop') {//增加2个方法
                var instance = this.data('instance'); //获得实例
                instance[options]();
                return this;
            }
            var len=$.fn.Xslider.instances.length;
            var instance = new libXslider(options, this,len);
            this.data('instance', instance); //////缓存对应的实例
            $.fn.Xslider.instances[len]=instance;
        }
        $.fn.Xslider.instances=[];//收集实例
    })(jQuery);

$(document).ready(function () {
        // 焦点图片水平滚动
        $("#slider1").Xslider({
            // 默认配置
            boxname: '#slider1',
            affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
            speed: 800, //动画速度
            space: 3000, //时间间隔
            auto: true, //true 自动滚动
            trigger: 'mouseover', //触发事件 注意用mouseover代替hover
            conbox: '.conbox', //内容容器id或class
            ctag: 'div', //内容标签 默认为<a>
            switcher: '.switcher', //切换触发器id或class
            stag: 'a', //切换器标签 默认为a
            current: 'cur', //当前切换器样式名称
            rand: false //是否随机指定默认幻灯图片
        });

        // 焦点图片垂直滚动
        $("#slider2").Xslider({
            boxname: '#slider2',
            affect: 'scrolly',
            ctag: 'div',
            auto: false, //自动滚动
            speed: 400
        });

        // 焦点图片淡隐淡现
        $("#slider3").Xslider({
            boxname: '#slider3',
            affect: 'fade',
            ctag: 'div'
        });

        // 选项卡
        $("#slider4").Xslider({
            boxname: '#slider4',
            affect: 'none',
            ctag: 'div',
            speed: 10
        });

    });
wangqingyu0088 2013-10-30
  • 打赏
  • 举报
回复
多谢版主 测试 Chrome 不兼容 另 还需要实现 鼠标放在 某个焦点图上时 只播放此焦点图 其他的 停止 改怎么实现。 js 太渣了 调试半天没 试出来
我的波塞冬 2013-10-29
  • 打赏
  • 举报
回复
是分享,不是提问?
Andy__Huang 2013-10-29
  • 打赏
  • 举报
回复
感谢分享啊,有空我要试试!能够用javascript写出这样的程序真了不起.

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧