/**
 * jQuery.hhNewSilder 滚动图片插件
 * User: huanhuan
 * QQ: 651471385
 * Email: th.wanghuan@gmail.com
 * 微博: huanhuan的天使
 * Date: 13-7-4
 * Time: 下午5:20
 * Dependence jquery-1.7.2.min.js
 */
 
 
$(function(){
 
$.fn.hhNewSilder = function(infor){
        var defaults = {
            autoTimer:6000,
speed:1000,
            picBox:'thDSpic',
            circleBox:'thDSnumber',
            leftEle:'thDSprev',
            rightEle:'thDSnext',
            preLoadSrc:'images/loading.gif',
            autoPlay:true,
            imgBox:function(){return GetBox();},
            imgBoxSize:function(){return GetSize();}
        };
 
        var option = $.extend(defaults, infor || {}),
            circleLi = option.imgBox().circleLi,
            imgList = option.imgBox().imgList,
            imgSize = option.imgBoxSize(),
            _thisAll = $(this),
            n = 1;
 
        $('.'+option.circleBox).find('li:eq(0)').addClass('thScrusor');
        //拿到li
        function GetBox(){
            this.circleLi = $('.'+option.circleBox,_thisAll).find("li");
            this.imgList =$('.'+option.picBox,_thisAll).find("li");
            return this;
        }
 
        //设置宽度、高度
        function GetSize(){
            this.w = $('.'+option.picBox,_thisAll).width();
            this.h = $('.'+option.picBox,_thisAll).height();
            return this;
        }
        var s = GetSize;
        s.w
 
        //设置ul的宽度
        $('.'+option.picBox, _thisAll).find('ul').css({
            width : imgList.width() * imgList.length
        });
 
        /*function getSiz(){
            var w = $('.'+option.picBox,_thisAll).width();
            var h = $('.'+option.picBox,_thisAll).height();
            return { w: w, h: h}
        }
        var size = getSiz();
        size.w*/
 
        return this.each(function(){
            //初始化时给li添加class="show"
            imgList.eq(0).addClass('show').css({'left':0}).siblings().removeClass('show').css({'left':imgSize.w});
 
            function Play(){
                if(imgList.is(':animated')) return; //如果在运动则返回
                var _index = $('.'+option.picBox).find('li.show').index(); //得到当前的
                _index = _index == "-1" ? 0 : _index;
                if(imgList.eq(n).hasClass('show')) return; //如果有show class则返回
                circleLi.eq(n).addClass('thScrusor').siblings().removeClass('thScrusor'); //圆点
                imgList.slice(_index,_index+1).animate({'left':-imgSize.w},option.speed,function(){
                    $(this).css({'left':imgSize.w});
                }).removeClass('show');
                imgList.eq(n).animate({left:0},option.speed).addClass('show'); //当前li添加show属性
                //追加
                if(imgList.length-1>n){
                    n++;
                }else{
                    n=0;
                }
            }
            _init = function(){
                var x=null;
                $('.'+option.picBox).find('li:gt(0)').css('left',imgSize.w);
                if(option.autoPlay) x=setInterval(Play,option.autoTimer);
                circleLi.click(function(){
                    n = $(this).index();
                    Play();
                    if(option.autoPlay){
                        clearInterval(x);
                        x=setInterval(Play,option.autoTimer);
                    }
                });
 
                //左右按钮绑定事件
                $('.'+option.leftEle+',.'+option.rightEle).css({'opacity':'0.3'}).live({
                    mouseover:function(){
                        $(this).stop(true,false).animate({'opacity':'1'},400);
                    },
                    mouseout:function(){
                        $(this).stop(true,false).animate({'opacity':'0.3'},400);
                    },
                    click:function(){
                        var _index = $('.'+option.picBox).find('li.show').index();
                        if($(this).attr('class')==option.leftEle){
                            n = _index==0?(imgList.length-1):_index-1;
                        }else{
                            n = _index==(imgList.length-1)?0:_index+1;
                        }
                        Play();
                        if(option.autoPlay){
                            clearInterval(x);
                            x=setInterval(Play,option.autoTimer);
                        }
                    }
                });
 
            }
            return _init();
        });
}
});

jQuery.hhNewSilder 滚动图片插件的更多相关文章

  1. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  2. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  3. [转]jQuery页面滚动图片等元素动态加载实现

    本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...

  4. 自己写一个jQuery垂直滚动栏插件(panel)

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

  5. [JQuery]ScrollMe滚动特效插件

    最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...

  6. jQuery scrollFix滚动定位插件

    [插件功能] 当用户向上或向下滚动页面到一定位置时,目标元素开始固定定位(position:fixed),当回滚到原位置时目标元素恢复到原状态,可以定制触发滚动相对屏幕位置和触发滚动方向,兼容IE6 ...

  7. 页面滚动图片等元素动态加载插件jquery.scrollLoading.js

    如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...

  8. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  9. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

随机推荐

  1. MyEclipse与Mysql数据库的连接

    1.载入MySql驱动程序 Class.forName("com.mysql.jdbc.Driver");    // 载入MySql驱动程序 2.建立Connection连接对象 ...

  2. nape.geom.MarchingSquares

    Nape中的MarchingSquares类很简单,只有一个静态函数run,不过这对绘制那些简单的形状来说,已经足够了(当然MarchingSquares能做的不只这些).下面是这个run方法的结构: ...

  3. PrintJ的设计模式之旅——1.模式之父

    好奇设计模式的源头,做了一番搜索和调查,于是便开启了这个系列“PrintJ的设计模式之旅”. 1.模式之父 GOF(Gang of Four) Erich Gamma.Richard Helm.Ral ...

  4. Effective C++ 条款45

    本节条款的题目是运用成员模板接受全部兼容类型 作者阐述自己的观点是通过智能指针的样例. 在学习本节条款之前我们要先明确关于隐式转化的问题 例如以下代码: #include<iostream> ...

  5. PAT 1017

    1017. Queueing at Bank (25) Suppose a bank has K windows open for service. There is a yellow line in ...

  6. Middleware

    Middleware The middleware gives a single shot to the views associated into Controllers, before execu ...

  7. Swift基础学习01

    相关网站:http://www.cnblogs.com/tt_mc/p/3871295.html   相关辅助操作: 可以在右边直接查看输出值   可能出现的常见问题: 1.凡是=注意左右间距一样 2 ...

  8. Spring-boot使用Ehcache配置

    1.配置类 @Configuration @EnableCaching public class CacheConfiguration {// implements CachingConfigurer ...

  9. axel源码学习(0)——程序逻辑

    axel简介 axel是一个命令行下的轻量级http/ftp 下载加速工具,支持多线程下载和断点续传,支持从多个镜像下载同一文件. axel的用法如下: 图 0.1 axel usage axel 粗 ...

  10. Unix网络编程(3)——C/S模型几种情况

    UNP第五章描述了在客户端和服务器连接建立之后会出现的几种情况,并给出了解决方案,做一个简单的总结. 先给出这个简单的回射C/S程序的模型如下图.   1.客户端和服务器正常终止连接 客户端从标准输入 ...