ホームページ > ウェブフロントエンド > jsチュートリアル > JQueryページ画像切り替えとニュースリストスクロールの具体的な実装effect_jquery

JQueryページ画像切り替えとニュースリストスクロールの具体的な実装effect_jquery

WBOY
リリース: 2016-05-16 17:21:18
オリジナル
1200 人が閲覧しました

私は最近、ページ上の左右の写真を切り替えたり、ニュースリストをスクロールしたりする効果を使用しました。それは次のように要約されます。

前のコード:

コードをコピー コードは次のとおりです:















   
   

        新闻中心
       

         
       

   






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

复制代代码如下:

/*reset.css */
body{背景:#fff;色:#444;高さ:100%;行の高さ:1.4;}
html{高さ:100%;オーバーフロー-y:スクロール;-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;オーバーフロー:非表示;背景:url(../images/line.gif)repeat-x下; border-bottom:solid 1px #fff; margin:0 auto;}
.banner{position:absolute;左:50%;トップ:0;マージン左:-990px​​;高さ:400ピクセル; width:1980px;overflow:hidden;}
.flash_img {
overflow: hidden;
幅: 1980px;
高さ: 400px;
位置: 相対
}
。バナー{高さ:400px;}

.flash_img .img-box {
位置: 絶対;
}
.flash_img .img-box li{float:left;}

.flash_img img {
display: block;
}

.flash_item {
位置: 絶対;
右: 510px;
下: 10px;
高さ: 12px;
}

.flash_item li {
背景:url(../images/flash_item.png) no-repeat right;
color: #D94B01;
カーソル: ポインタ;
浮動小数点: 左;
font-size: 12px;
height: 12px;
line-height: 12px;
margin-left: 15px;
text-align: center;
width: 1 2ピクセル;
}

.flash_item li.on
{
background-position:left;
color: #FFFFFF;
font-weight:大胆;
height: 12px;
line-高さ: 12px;
幅: 12px;
}

.flash_item li img {
display: block
}
/*default.css*/
.indexNews{width:700px;高さ:29ピクセル;下:0;左:50%;位置:絶対;マージン左:-480px; z-index:999;}
.indexNews 強い{color:#409dd9;float: left;}
.indexNews 強い a{color:#409dd9;text-decoration:none;}
.indexNews 。コア{高さ:18ピクセル;行の高さ:18px; overflow:hidden;}
.indexNews .core span{color:#409dd9; margin-right:20px;}
.indexNews .core a{margin-left:10px;color:#666;}
.outer{height:440px;}


js フォルダーには、jquery-1.7.2.min.js、indexPic.js、kxbdSuperMarquee.js の 3 つのファイルが含まれています。 1 つ目はインターネットから直接ダウンロードするもの、2 つ目は写真を切り替えるもの、3 つ目はニュースリストをスクロールするものです。

indexPic.js:

コードをコピー コードは次のとおりです:

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) {
varindex = 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 (サイズ > 1 ) {
    for (var i = 0; i i == 0 ? $selItemHTML = '
  • ' li class="">
  • ';
    }
    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( ) {
    Index = li.index(that );
    ShowAD(index);
    }, 200);
    }, function() {
    clearInterval(intervalTime);
    interval();
    });
    showBox.hover(function() {
    if (intervalTime) {
    clearInterval(intervalTime);
    }
    }, function() {
    clearInterval(intervalTime);
    間隔();
    });
    function interval() {
    interval(function() {
    ShowAD(index);
    インデックス ;
    if (インデックス == サイズ) {
    Index = 0;
    }
    }, settings.timer);
    }
    interval();
    var ShowAD = function(i) {
    showBox.animate({ "left": -i * slideW }, settings.speed);
    li.eq(i) .addClass("on").siblings().removeClass("on");
    };
    :


    コードをコピー

    コードは次のとおりです:

    /**
     * @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;//已经移动的距离

        要素のサイズ
        var navHtml = '

          ';
          if (opts.isEqual) {
          $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 = '
        ';

        //スクロール要素の合計サイズはコンテナ サイズより小さいため、スクロールはありません
        rollW:scrollH))
        // スクロール子要素を複製し、スクロール要素の後に挿入します。 、スクロール要素の幅を設定します
        ':'height',scrollSize*2);

        //Rotate Navigation
        if (opts.navId) 🎜> $nav = $ (opts.navId).append(navHtml).hover (停止、開始);
        $ navbtns = $ ('li', $ nav);
        $ navbtns.each (関数 (i) {
        $ (this) .Bind (optionnav, function (){
        if(isMove) return;
        if(numView==i) return;
        rollFunc(arrPos[i]);
        < $navBtns .eq(numView).removeClass('navOn ');
        numView = i;
        $(this).addClass('navOn');
        });
        }; |
        //marqueeId = setInterval(scrollFunc, opts.sc rollDelay);
        marqueeId = setTimeout(scrollDelay);
        clearInterval(marqueeId);
        },
        function( ) (marqueeid = setimeout(scrollfunc、opts.scrolldelay);
        🎜>
        。$(val).bind(opts。eventa、function(){
        (){
        }
        else{
        クロスして回転を停止
        $marquee.hover(stop, start );
        }

        //前後の歩行を制御
        if(opts.btnGo){
        $.each(opts.b tnGo, function(i,val){
        val).
        rollFunc();
        {
        やめて( );
        start();
        }
        Func(){
        var _dir = (opts.direction == 'left' || opts.direction == '右') '左にスクロール' :'scrollTop';

        if(opts.isMarquee){
        (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(オプト.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,//マーキーかどうか
        isEqual:true,//長さと幅すべてのスクロール要素 等しいか、true、false かどうか
        loop: 0, //ループスクロールの数、0 では無限
        newAmount: 3, //高速スクロールのステップサイズ
        eventA:' Mousedown', //マウス イベント、加速度
        eventB:'mouseup',//マウス イベント、元の速度
        isAuto:true,//自動的に回転するかどうか
        time:5,//一時停止時間秒
        duration:50 , //イージング効果、1回の移動時間、速度が小さいほど速くなります。0の場合、イージング効果はありません
        eventGo:'click', //マウスイベント、移動。前方と後方
        方向: ' left',// スクロール方向, 'left','right','up','down'
        scrollAmount:1,//ステップ サイズ
        scrollDelay:10, //Duration
        eventNav:' click'//ナビゲーション イベント
        };

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

        })(jQuery);


    画像フォルダーのアイコン:
    JQueryページ画像切り替えとニュースリストスクロールの具体的な実装effect_jquery
    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート