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

wangqingyu0088 2013-11-04 10:19:30
首先感谢版主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>

...全文
142 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
wangqingyu0088 2013-11-04
  • 打赏
  • 举报
 回复
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);
Showbo弹窗优化
优化的弹出窗口
java试题及答案
定义一个描述长方体的类Box，类中有3个整型的成员变量——length、width、和height，分别表示长方体的长、宽、高。定义构造方法，初始化这三个变量；
JavaScript 仿LightBox内容显示效果
近来要做一个LightBox的效果（也有的叫Windows关机效果），不过不用那么复杂，能显示一个内容框就行了。 这个效果很久以前就做过，无非就是一个覆盖全屏的层，加一个内容显示的层。不过showbo教了我position:fixed这...
alert和confirm弹出框样式美化
alert和confirm弹出框样式美化，可自定义颜色和样式，无须调用浏览器自带弹框。
Jspwork801.rar
这是一个较为简单的学生选课管理系统，主要利用MVC设计模式、HTML、Javascript、Servlet、JSP、JDBC技术。 程序效果由图片显示，代码由附件（学生管理系统.zip）上传。
JavaScript

87,907

社区成员

224,614

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章