Home  >  Article  >  Web Front-end  >  Specific implementation of JQuery page image switching and news list scrolling effects_jquery

Specific implementation of JQuery page image switching and news list scrolling effects_jquery

WBOY
WBOYOriginal
2016-05-16 17:21:181148browse

I recently used the effects of switching left and right pictures on a page and scrolling the news list, which are summarized as follows:

Previous code:

Copy code The code is as follows:















   
   

        新闻中心
       

         
       

   






css文件夹包含一个样式表css.css:

复制代码 代码如下:

/* reset.css */
body{background:#fff;color:#444;height:100%;line-height:1.4;}
html{height:100%;overflow-y:scroll;-webkit-text-size-adjust:none;}
body,input,button,textarea,select,h1,h2,h3,h4,h5,h6{font:12px/1.5 Arial,Tahoma,Helvetica,"5b8b4f53",sans-serif;}
body,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td{margin:0;padding:0;}
img{vertical-align:bottom;}
/* base.css */
a:link,a:visited,a:hover,a:active{cursor:pointer;text-decoration:none;}
a:active,a:focus {-moz-outline:none;outline:none;ie-dummy:expression(this.hideFocus=true);}
a:hover {text-decoration:underline;}
li {list-style:none;}
ol li {display:inline;}
/*common.css*/
.outer{position:relative; overflow:hidden; background:url(../images/line.gif) repeat-x bottom; border-bottom:solid 1px #fff; margin:0 auto;}
.banner{position:absolute; left:50%; top:0; margin-left:-990px; height:400px; width:1980px;overflow:hidden;}
    .flash_img {
        overflow: hidden;
        width: 1980px;
        height: 400px;
        position: relative
    }
    .banner{height:400px;}

    .flash_img .img-box {
        position: absolute;
    }
    .flash_img .img-box li{float:left;}

    .flash_img img {
        display: block;
    }

    .flash_item {
        position: absolute;
        right: 510px;
        bottom: 10px;
        height: 12px;
    }

    .flash_item li {
        background:url(../images/flash_item.png) no-repeat right;
        color: #D94B01;
        cursor: pointer;
        float: left;
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        margin-left: 15px;
        text-align: center;
        width: 12px;
    }

    .flash_item li.on
    {
        background-position:left;
        color: #FFFFFF;
        font-weight: bold;
        height: 12px;
        line-height: 12px;
        width: 12px;
    }

    .flash_item li img {
        display: block
    }   
/*default.css*/
.indexNews{width:700px; height:29px; bottom:0; left:50%; position:absolute; margin-left:-480px; z-index:999;}
.indexNews strong{color:#409dd9;float: left;}
.indexNews strong a{color:#409dd9;text-decoration:none;}
.indexNews .core{height:18px; line-height:18px; overflow:hidden;}
.indexNews .core span{color:#409dd9; margin-right:20px;}
.indexNews .core a{margin-left:10px;color:#666;}
.outer{height:440px;}


The js folder contains three files: jquery-1.7.2.min.js, indexPic.js, kxbdSuperMarquee.js. The first one can be downloaded directly from the Internet, the second one is to switch pictures, and the third one is to scroll the news list.

indexPic.js:

Copy code The code is as follows:

document.writeln("");
document.writeln("");
(function($) {
    $.fn.slideImg = function(settings) {
        settings = jQuery.extend({
            speed: "normal",
            timer: 1000
        }, settings);
        return this.each(function() {
            $.fn.slideImg.scllor($(this), settings);
        });
    };

    $.fn.slideImg.scllor = function($this, settings) {
        var index = 0;
        var scllorer = $(".img-box li", $this);
        var size = scllorer.size();
        var slideW = scllorer.outerWidth();
        var $selItem = $("

    ", {
                "class": "flash_item",
                html: function() {
                    var $selItemHTML = "";
                    if (size == 1) {
                        return;
                    } else if (size > 1) {
                        for (var i = 0; i < size; i ) {
                            i == 0 ? $selItemHTML = '
  • ' : $selItemHTML = '
  • ';
                        }
                        return $selItemHTML;
                    }
                }
            }).appendTo($this);
            var li = $(".flash_item li", $this);
            var showBox = $(".img-box", $this);
            var intervalTime = null;
            li.hover(function() {
                var that = this;
                if (intervalTime) {
                    clearInterval(intervalTime);
                }
                intervalTime = setTimeout(function() {
                    index = li.index(that);
                    ShowAD(index);
                }, 200);
            }, function() {
                clearInterval(intervalTime);
                interval();
            });
            showBox.hover(function() {
                if (intervalTime) {
                    clearInterval(intervalTime);
                }
            }, function() {
                clearInterval(intervalTime);
                interval();
            });
            function interval() {
                intervalTime = setInterval(function() {
                    ShowAD(index);
                    index ;
                    if (index == size) {
                        index = 0;
                    }
                }, settings.timer);
            }
    interval();
    var ShowAD = function(i) {
    showBox.animate({ "left": -i * slideW }, settings.speed);
    li.eq(i) .addClass("on").siblings().removeClass("on");
            };
         }; :


    Copy code

    The code is as follows:

    /**
     * @classDescription 超级Marquee,可做图片导航,图片轮换
     * @author Aken Li(www.kxbd.com)
     * @date 2009-07-27
     * @dependence jQuery 1.3.2
     * @DOM
     *     

     *         

       *              

    •  *              

    •  *         

     *     

     * @CSS
     *      #marquee {width:200px;height:50px;overflow:hidden;}
     * @Usage
     *      $('#marquee').kxbdSuperMarquee(options);
     * @options
     *        distance:200,//一次滚动的距离
     *        duration:20,//缓动效果,单次移动时间,越小速度越快,为0时无缓动效果
     *        time:5,//停顿时间,单位为秒
     *        direction: 'left',//滚动方向,'left','right','up','down'
     *        scrollAmount:1,//步长
     *        scrollDelay:20//时长,单位为毫秒
     *        isEqual:true,//所有滚动的元素长宽是否相等,true,false
     *        loop: 0,//循环滚动次数,0时无限
     *        btnGo:{left:'#goL',right:'#goR'},//控制方向的按钮ID,有四个属性left,right,up,down分别对应四个方向
     *        eventGo:'click',//鼠标事件
     *        controlBtn:{left:'#goL',right:'#goR'},//控制加速滚动的按钮ID,有四个属性left,right,up,down分别对应四个方向
     *        newAmount:4,//加速滚动的步长
     *        eventA:'mouseenter',//鼠标事件,加速
     *        eventB:'mouseleave',//鼠标事件,原速
     *        navId:'#marqueeNav', //导航容器ID,导航DOM:
    • 1
    • 2
      • ,导航CSS:.navOn
         *        eventNav:'click' //导航事件
         */
        (function($){

            $.fn.kxbdSuperMarquee = function(options){
                var opts = $.extend({},$.fn.kxbdSuperMarquee.defaults, options);

                return this.each(function(){
                    var $marquee = $(this);//滚动元素容器
                    var _scrollObj = $marquee.get(0);//滚动元素容器DOM
                    var scrollW = $marquee.width();//滚动元素容器的宽度
                    var scrollH = $marquee.height();//滚动元素容器的高度
                    var $element = $marquee.children(); //滚动元素
                    var $kids = $element.children();//滚动子元素
                    var scrollSize=0;//滚动元素尺寸
                    var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型,1左右,0上下
                    var scrollId, rollId, isMove, marqueeId;
                    var t,b,c,d,e; //滚动动画的参数,t:当前时间,b:开始的位置,c:改变的位置,d:持续的时间,e:结束的位置
                    var _size, _len; //子元素的尺寸与个数
                    var $nav,$navBtns;
                    var arrPos = [];
                    var numView = 0; //当前所看子元素
                    var numRoll=0; //轮换的次数
                    var numMoved = 0;//已经移动的距离

                                                                                                                                                                                              The size of the element
        var navHtml = '

          ';
          if (opts.isEqual) {
          _size = $kids[_type?'outerWidth':'outerHeight']();
          _len = $kids.length;
          scrollSize = _size * _len;
          for(var i=0;i<_len;i ){
          arrPos.push(i*_size);
          navHtml = '
        • ' (i 1) '
        • ';
          }
          }else{
          $kids.each(function(i){
          arrPos.push(scrollSize) ;
                             scrollSize = $(this)[_type?'outerWidth':'outerHeight'](); });
          }
          navHtml = '
        ';

        //The total size of the scrolling element is smaller than the container size, no scrolling
        rollW: scrollH)) return;
                                        // Clone the scroll child element, insert it after the scroll element, and set the width of the scroll element
                                 $element.append($kids.clone()).css(_type?'width ':'height',scrollSize*2);

        //Rotate navigation
        if (opts.navId) {
        $nav = $(opts.navId).append(navHtml).hover (Stop, Start);
        $ navbtns = $ ('li', $ nav);
        $ navbtns.each (function (i) {
        $ (this) .Bind (optionnav, functions (){
        if(isMove) return;
        if(numView==i) return;
        rollFunc(arrPos[i]);
                                                              $navBtns.eq(numView).removeClass('navOn ');
        numView = i;
        $(this).addClass('navOn');
        });
                  }; | | opts.direction == 'down') {
                                                                                                                                                                                                                                                              ; ':'scrollTop'] = 0;
        }

        if(opts.isMarquee){
        //Scroll starts
        //marqueeId = setInterval(scrollFunc, opts.sc rollDelay);
        marqueeId = setTimeout( scrollFunc, opts.scrollDelay);
                                                                                                                                            clearInterval(marqueeId);
        },
        function( )( MarqueeId = setTimeout(scrollFunc, opts.scrollDelay);
        🎜>
                                                                                                            .                    $(val).bind(opts. eventA,function(){
                                                                                                                                                                                                                                                                              (){
                                                                                                                                                       }
                                                              else{
                                                                                                                                            Cross to stop rotation
        $marquee.hover(stop, start );
        }

        //Control walking forward and backward
        if(opts.btnGo){
        $.each(opts.b tnGo, function(i,val){
                                                                               val).bind(opts.eventGo,function(){
                                                                                                               rollFunc();
        {
        stop();
        start();
        }
                                                             Func(){
        var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';

        if(opts.isMarquee){
                                                                                                                                                                                                              through ( marqueeId); s.direction == 'up'?1:-1)*opts.scrollAmount ;
                                         else{
                            if(opts.duration){
                                if(t                             isMove = true;
                                    var newPos = Math.ceil(easeOutQuad(t,b,c,d));
                                    if(t==d){
                                        newPos = e;
                                    }
                                }else{
                                    newPos = e;
                                    clearInterval(scrollId);
                                    isMove = false;
                                    return;
                                }
                            }else{
                                var newPos = e;
                                clearInterval(scrollId);
                            }
                        }

                        if(opts.direction == 'left' || opts.direction == 'up'){
                            if(newPos>=scrollSize){
                                newPos-=scrollSize;
                            }
                        }else{
                            if(newPos<=0){
                                newPos =scrollSize;
                            }
                        }
                        _scrollObj[_dir] = newPos;

                        if(opts.isMarquee){
                            marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
                        }else if(t if(scrollId) clearTimeout(scrollId);
        scrollId = setTimeout(scrollFunc, opts.scrollDelay);
        }else{
        isMove = false;
        }

        };

        function rollFunc(pPos){
        isMove = true;
        var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
        var _neg = opts.direction == 'left' || opts.direction == 'up'?1:-1;

        numRoll = numRoll +_neg;
        //得到当前所看元素序号并改变导航CSS
        if(pPos == undefined&&opts.navId){
        $navBtns.eq(numView).removeClass('navOn');
        numView +=_neg;
        if(numView>=_len){
                                numView = 0;
                            }else if(numView<0){
        numView = _len-1;
        }
        $navBtns.eq(numView).addClass('navOn');
        numRoll = numView;
        }

        var _temp = numRoll<0?scrollSize:0;
        t=0;
        b=_scrollObj[_dir];
        //c=(pPos != undefined)?pPos:_neg*opts.distance;
        e=(pPos != undefined)?pPos:_temp+(opts.distance*numRoll)%scrollSize;
        if(_neg==1){
        if(e>b){
                                c = e-b;
                            }else{
                                c = e+scrollSize -b;
                            }
                        }else{
                            if(e>b){
                                c =e-scrollSize-b;
                            }else{
                                c = e-b;
                            }
                        }
                        d=opts.duration;

                        //scrollId = setInterval(scrollFunc, opts.scrollDelay);
                        if(scrollId) clearTimeout(scrollId);
                        scrollId = setTimeout(scrollFunc, opts.scrollDelay);
                    }

                    function start(){
                        rollId = setInterval(function(){
                            rollFunc();
                        }, opts.time*1000);
                    }
                    function stop(){
                        clearInterval(rollId);
                    }

                    function easeOutQuad(t,b,c,d){
                        return -c *(t/=d)*(t-2) + b;
                    }

                    function easeOutQuint(t,b,c,d){
                        return c*((t=t/d-1)*t*t*t*t + 1) + b;
                    }

        });
        };
        $.fn.kxbdSuperMarquee.defaults = {
        isMarquee:false,//Whether it is Marquee
        isEqual:true,//The length and width of all scrolling elements Whether they are equal, true, false
        loop: 0, //The number of loop scrolling, infinite at 0
        newAmount: 3, //The step size of accelerated scrolling
        eventA:'mousedown', //Mouse event, Acceleration
        eventB:'mouseup', //Mouse event, original speed
        isAuto:true,//Whether to automatically rotate
        time:5,//Pause time in seconds
        duration:50 , //Easing effect, single movement time, the smaller the speed, the faster. When it is 0, there is no easing effect
        eventGo:'click', //Mouse event, move forward and backward
        direction: ' left',//Scroll direction, 'left','right','up','down'
        scrollAmount:1,//Step size
        scrollDelay:10,//Duration
        eventNav:' click'//Navigation event
        };

        $.fn.kxbdSuperMarquee.setDefaults = function(settings) {
        $.extend( $.fn.kxbdSuperMarquee.defaults, settings);
        };

        })(jQuery);


    Icon for the images folder:
    Specific implementation of JQuery page image switching and news list scrolling effects_jquery
    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn