感谢版主showbo帮助 分享 一个页面多个焦点图 随机播放 当鼠标放在某个焦点图上时 只播放当前的焦点图，其他的停止 离开时继续随机

首先感谢版主showbo帮助。
本人笨人用笨法， 代码有待改进 期待高手改进 demo.html 请引用自己的 jquery 文件
<!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:1200;}
.conbox{width:9999px;}
.conbox div{width:300px;height:200px;overflow:hidden;float:left;}
.conbox div img{width:300px;height:200px;}
#slider2 .conbox div{width:300px;height:200px;overflow:hidden; float:none}/*垂直滚动 不能有float */
</style>
<script type="text/javascript" src="demo_files/jquery-1.42.js"></script>
<script type="text/javascript" src="demo_files/Xslider.js"></script>
<script type="text/javascript">
var delay = 2000;//循环执行的切换间隔，需略大于焦点图滚动的间隔
var boxnum = 4;//容器数量
var int;//setInterval 返回值 用于取消循环执行
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, boxnum);
 //alert(n);
         for (var i = 1; i <= boxnum; i++){
  $('#slider' + i).Xslider(i == n ? 'start' : 'stop');//随机播放
 }
     }
 $(document).ready(function () {
         // 焦点图片水平滚动
         $("#slider1").Xslider({// 默认配置
             boxname: '#slider1',
             affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
             speed: 1200, //动画速度
             space: 1500, //时间间隔
             auto: false, //true 自动滚动
             rand: false
         });         // 焦点图片垂直滚动
         $("#slider2").Xslider({
             boxname: '#slider2',
             affect: 'scrolly', //效果  有scrollx|scrolly|fade|none
             speed: 1200, //动画速度
             space: 1500, //时间间隔
             auto: false, //true 自动滚动
             rand: false
         });
         // 焦点图片淡隐淡现
         $("#slider3").Xslider({
             boxname: '#slider3',
             affect: 'fade', //效果  有scrollx|scrolly|fade|none
             speed: 1200, //动画速度
             space: 1500, //时间间隔
             auto: false, //true 自动滚动
             rand: false
         });
         // 选项卡
         $("#slider4").Xslider({
             boxname: '#slider4',
             affect: 'none', //效果  有scrollx|scrolly|fade|none
             speed: 1200, //动画速度
             space: 1500, //时间间隔
             auto: false, //true 自动滚动
             rand: false
         });
        int = setInterval(rndXslider, delay);//执行切换
function enter(ll) {
//alert("#slider"+ll+"放上");
clearInterval(int);
for (var kk = 1; kk <= boxnum; kk++){
if (kk==ll){$("#slider"+kk).Xslider("start");//开始当前
}else{$("#slider"+kk).Xslider("stop");}//其余停止
  }
}
function leave(ll) {
//alert("#slider"+ll+"离开");
$("#slider"+ll).Xslider("stop");
int = setInterval(rndXslider, delay);
}
 var jsstr="";
 for (var jj = 1; jj <= boxnum; jj++){
jsstr+="$(\"#slider"+jj+"\").bind(\"mouseenter\", function (){enter("+jj+");});";
jsstr+="$(\"#slider"+jj+"\").bind(\"mouseleave\", function (){leave("+jj+");});";
 }
 eval(jsstr); 
     });
</script>
</head>
<body>
<div id="demopage">
        <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" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 分类搜索框防谷歌网站搜索页面">
                <img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/1 (6).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件">
                <img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/1 (7).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示">
                <img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/1 (8).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息">
                <img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/1 (9).jpg" >
                </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" >
                </a>
                </div>
<div>
                <a href="#" title="常见问题解答部分动态读取数据 web / jQuery的，雅虎及谷歌文件">
                <img alt="常见问题解答部分动态读取数据 web / jQuery的，雅虎及谷歌文件" src="demo_files/2 (1).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的">
                <img alt="jquery 右下角提示框 快速反馈表Web/ PHP和jQuery的" src="demo_files/2 (2).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 幻灯片效果制作防苹果风格的开机画面">
                <img alt="jquery 幻灯片效果制作防苹果风格的开机画面" src="demo_files/2 (3).jpg" >
                </a>
                </div>
<div>
                <a  href="#" title="jquery制作创建动画404页面">
                <img alt="jquery制作创建动画404页面" src="demo_files/2 (4).jpg" >
                </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="slider3" class="slider">
        <h2>焦点图片淡隐淡现</h2>
<div class="conbox">
<div>
                <a href="#" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示">
                <img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/1.jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 分类搜索框防谷歌网站搜索页面">
                <img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/1 (1).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件">
                <img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/1 (2).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示">
                <img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/1 (3).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息">
                <img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/1 (4).jpg" >
                </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="slider4" class="slider">
        <h2>选项卡</h2>
<div style="width: 3100px; " class="conbox">
<div>
                <a href="#" title="jquery 3D图片滚动一个漂亮的手机软件网站图片展示">
                <img alt="jquery 3D图片滚动一个漂亮的手机软件网站图片展示" src="demo_files/2 (5).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 分类搜索框防谷歌网站搜索页面">
                <img alt="jquery 分类搜索框防谷歌网站搜索页面" src="demo_files/2 (6).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件">
                <img alt="jquery 文本框提示顶部弹跳框使用jQuery和CSS3的插件" src="demo_files/2 (7).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示">
                <img alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="demo_files/2 (8).jpg" >
                </a>
                </div>
<div>
                <a href="#" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息">
                <img alt="jquery评论星星打分特效、鼠标滑过星星显示评论信息" src="demo_files/2 (9).jpg" >
                </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>
焦点图随机

解决方案 »

  1.   


    Xslider.js   /**
        * @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: 1500, //时间间隔
                auto: false, //true 自动滚动
                trigger: 'mouseover', //触发事件 注意用mouseover代替hover
                conbox: '.conbox', //内容容器id或class
                ctag: 'div', //内容标签 默认为<a>
                switcher: '.switcher', //切换触发器id或class
                stag: 'a', //切换器标签 默认为a
                current: 'cur', //当前切换器样式名称
                rand: false  // 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);
                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' });
    //alert($contents.height());
                        $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 () {_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);