双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒，抽取你的专属好礼

— 惊喜奖品抢先看 —

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

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

2013-11-04 10:19:30 222 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

wangqingyu0088 墨衍会员 · AI 创作全网分发关注 + 加入社区

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>

...全文

JavaScript 仿LightBox内容显示效果近来要做一个LightBox的效果（也有的叫Windows关机效果），不过不用那么复杂，能显示一个内容框就行了。这个效果很久以前就做过，无非就是一个覆盖全屏的层，加一个内容显示的层。不过showbo教了我position:fixed这个新特性，决定重写一遍。本内容出自:http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html 立即下载

wangqingyu0088

JavaScript 87,983 成员 224,680 内容

+ 关注 + 加入社区

切换为时间正序

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);

✦双11狂欢大促✦

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

相关推荐

双11狂欢大促

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