Widget banner trượt cho Widget Framework

[PVS]

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:

<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​