Widget banner trượt cho Widget Framework

PVS · 02/11/2015

Widget banner trượt cho Widget Framework

1. Truy cập vào ACP của bạn và bấm vào "+ Add Widget".
2. Chọn "[Advanced] HTML" cho Renderer.
3. Sử dụng đoạn code dưới đây trong lĩnh vực HTML:

Mã:

<style>
* {margin:0; padding:0}
#wrapper {width:234px; margin:5px auto; background: #fff;}
#container {position:relative; background:none; padding:32px; height:240px; border-right:1px solid none; border-bottom:1px solid none}
.sliderbutton {float:left; width:25px; height:240px; cursor:pointer}
#slideleft {background:url(http://source.dadparvar.ir/forumminislider/images/icons.gif) -50px -265px no-repeat}
#slideleft:hover {background-position:-0 -265px}
#slideright {background:url(http://source.dadparvar.ir/forumminislider/images/icons.gif) 0 90px no-repeat}
#slideright:hover {background-position:-50px 90px}
#slider {float:left; position:relative; overflow:auto; width:120px; height:240px}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:120px; height:240px}
#slider li img {width:120px; height:240px}
.pagination {position:absolute; top:20px; right:85px; list-style:none; height:25px}
.pagination li {float:left; cursor:pointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff}
.pagination li:hover, li.current {background:none}
</style>
<script>
var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.slider=function(){
    function slide(n,p){this.n=n; this.init(p)}
    slide.prototype.init=function(p){
        var s=this.x=T$(p.id), u=this.u=T$$('ul',s)[0], c=this.m=T$$('li',u), l=c.length, i=this.l=this.c=0; this.b=1;
        if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
        this.a=p.auto||0; this.p=p.resume||0; this.r=p.rewind||0; this.e=p.elastic||false; this.v=p.vertical||0; s.style.overflow='hidden';
        for(i;i<l;i++){if(c[i].parentNode==u){this.l++}}
        if(this.v){;
            u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
        }else{
            u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
        }
        this.nav(p.position||0);
        if(p.position){this.pos(p.position||0,this.a?1:0,1)}else if(this.a){this.auto()}
        if(p.left){this.sel(p.left)}
        if(p.right){this.sel(p.right)}
    },
    slide.prototype.auto=function(){
        this.x.ai=setInterval(new Function(this.n+'.move(1,1,1)'),this.a*1000)
    },
    slide.prototype.move=function(d,a){
        var n=this.c+d;
        if(this.r){n=d==1?n==this.l?0:n:n<0?this.l-1:n}
        this.pos(n,a,1)
    },
    slide.prototype.pos=function(p,a,m){
        var v=p; clearInterval(this.x.ai); clearInterval(this.x.si);
        if(!this.r){
            if(m){
                if(p==-1||(p!=0&&Math.abs(p)%this.l==0)){
                    this.b++;
                    for(var i=0;i<this.l;i++){this.u.appendChild(this.m[i].cloneNode(1))}
                    this.v?this.u.style.height=(this.l*this.h*this.b)+'px':this.u.style.width=(this.l*this.w*this.b)+'px';
                }
                if(p==-1||(p<0&&Math.abs(p)%this.l==0)){
                    this.v?this.u.style.top=(this.l*this.h*-1)+'px':this.u.style.left=(this.l*this.w*-1)+'px'; v=this.l-1
                }
            }else if(this.c>this.l&&this.b>1){
                v=(this.l*(this.b-1))+p; p=v
            }
        }
        var t=this.v?v*this.h*-1:v*this.w*-1, d=p<this.c?-1:1; this.c=v; var n=this.c%this.l; this.nav(n);
        if(this.e){t=t-(8*d)}
        this.x.si=setInterval(new Function(this.n+'.slide('+t+','+d+',1,'+a+')'),10)
    },
    slide.prototype.nav=function(n){
        if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==n?this.s:''}}
    },
    slide.prototype.slide=function(t,d,i,a){
        var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
        if(o==t){
            clearInterval(this.x.si);
            if(this.e&&i<3){
                this.x.si=setInterval(new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')'),10)
            }else{
                if(a||(this.a&&this.p)){this.auto()}
                if(this.b>1&&this.c%this.l==0){this.clear()}
            }
        }else{
            var v=o-Math.ceil(Math.abs(t-o)*.1)*d+'px';
            this.v?this.u.style.top=v:this.u.style.left=v
        }
    },
    slide.prototype.clear=function(){
        var c=T$$('li',this.u), t=i=c.length; this.v?this.u.style.top=0:this.u.style.left=0; this.b=1; this.c=0;
        for(i;i>0;i--){
            var e=c[i-1];
            if(t>this.l&&e.parentNode==this.u){this.u.removeChild(e); t--}
        }
    },
    slide.prototype.sel=function(i){
        var e=T$(i); e.onselectstart=e.onmousedown=function(){return false}
    }
    return{slide:slide}
}();
</script>

<div id="wrapper">
    <div id="container">
        <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
        <div id="slider">
            <ul>
                <li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image One" /></a></li>
                <li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image Two" /></a></li>
                <li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image Three" /></a></li>
                <li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image Four" /></a></li>
                <li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image Five" /></a></li>
            </ul>
        </div>
        <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
        <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)"></li>
            <li onclick="slideshow.pos(1)"></li>
            <li onclick="slideshow.pos(2)"></li>
            <li onclick="slideshow.pos(3)"></li>
            <li onclick="slideshow.pos(4)"></li>
        </ul>
    </div>
</div>
<center>
240*120 Banner | 25$/month
<center>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider',
    auto:5,
    resume:false,
    vertical:false,
    navid:'pagination',
    activeclass:'current',
    position:0,
    rewind:false,
    elastic:true,
    left:'slideleft',
    right:'slideright'
});
</script>

4.Bạn có thể thay đổi tất cả mọi thứ từ code như:

Number of banners
URL of Banners
URL of icons
Pagination
Auto play
Speed
Size
...

Lưu ý: Nếu bạn muốn tải các biểu tượng của thanh trượt từ máy chủ của riêng bạn, tải về hình ảnh đính kèm dưới đây và tải nó lên máy chủ của riêng bạn, sau đó thay đổi các URL có liên quan trong code.

Chúc các bạn thành công.

Nguồn: xenforo.com

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Widget banner trượt cho Widget Framework

PVS

Super Moderator

Dịch vụ XenForo của VNXF

Hướng dẫn sử dụng

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ