关于滚动效果

<!DOCTYPE html>
<html>
<head>
<link href="http://news.qq.com/css/2012/pcss20130106.css" rel="stylesheet" media="screen" /> 
<style type="text/css"> 
.s3_mask li { float:left;display:inline;}
.s3_mask p { position:absolute; left:0; bottom:0; height:29px; line-height:29px; background:rgba(0, 0, 0, 0.5); padding-right:52px; width:236px;filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#50000000',endColorstr = '#50000000') \9}
</style> 
<script src="http://mat1.gtimg.com/joke/js/comm/Qfast.js" type="text/javascript"></script>  
<script type="text/javascript">  
Qfast.add('common',{path:"http://mat1.gtimg.com/news/base2011/ued_common.js",type:"js"});//如果已经引用请删除此句  
Qfast.add('scroll',{path:"http://news.qq.com/base2011/ued_scroll.js",type:"js",requires: ['common']});
</script>
</head>
<body>
<div class="mod mtf1"> 
<div class="bd"> 
<div class="bodybox" id="cardBody3"> 
<div class="tbody">        
<div class="s3"> 
<div class="sm_prev" id="s3_sm_prev"></div> 
<div class="s3_mask" id="s3_s3_mask"> 
<ul> 
<li bossZone="yztp4">
<a href="http://news.qq.com/photon/selective/91.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/167/58/1429/92935682.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/91.htm" target="_blank" >一周图片精选(9.21-9.27)</a>
</p>
</li>
<li bossZone="yztp1">
<a href="http://news.qq.com/photon/selective/90.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/166/58/1429/92935681.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/90.htm" target="_blank" >一周图片精选(9.14-9.20)</a>
</p>
</li>
<li bossZone="yztp2">
<a href="http://news.qq.com/photon/selective/89.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/93/4/1418/92206563.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/89.htm" target="_blank" >一周精选(9.7-9.13)</a>
</p>
</li>
<li bossZone="yztp3">
<a href="http://news.qq.com/photon/selective/88.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/71/187/1412/91863056.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/88.htm" target="_blank" >一周图片精选(8.31-9.6)</a>
</p>
</li>
<li bossZone="yztp4">
<a href="http://news.qq.com/photon/selective/87.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/176/222/1406/91481936.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/87.htm" target="_blank" >一周图片精选(8.24-8.30)</a>
</p>
</li>
</ul> 
</div> 
<div class="sm_next" id="s3_sm_next"></div>  
</div>
</div> 
</div> 
</div> 
<script language="javascript">  
Qfast(false,'scroll',function(){  
var Scroll = new uedScroll();  
Scroll.scrollContId = "s3_s3_mask";//主体区域  
Scroll.scrollSplit = {mytag:"li",myclass:""};//滚动单元和class名  
Scroll.arrLeftId = "s3_sm_prev";//左按钮  
Scroll.arrRightId = "s3_sm_next";//右按钮  
Scroll.sSliceIndex = 1;//每次滚动单元的个数    
Scroll.sDir = 1;//滚动方向:1为左右、2为上下   
Scroll.nStep = 10;//速度，越大越快   
Scroll.nType = 2;//滚动类型:1为返回式、2为循环式、3在循环式自动滚动时设置    
Scroll.autoPlay = true;//是否自动滚动   
Scroll.autoPlayTime = 3;//自动滚动间隔时间（秒） 设置为0，则不停顿    
Scroll.init();  
})  
</script></div>        
</body>
</html>
扒下一滚动效果，js太多，功能太全，哪位大侠能给写个，或者给解释下这个

解决方案 »

  1.   

    你这个不是都有注释的?
    给你个我以前写了个例子
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <BODY>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
     
    <style>
    #imgbox{
    width:250px;
    height:250px;
    border:1px solid #ccc;
    position:relative;
    overflow:hidden;
    }
    #imgbox img{  width:250px;
    height:250px; border:none  }
    #imgbox a{
    width:250px;
    height:250px;
    position: absolute;
    top:0;
    left:0;
    display:none;
    }
    #imgbox p{
    position: absolute;
    padding:0px;
    bottom:0px;
    margin: 0px;
    background: #333;
    display: block;
    width:100%;
    color:#fff;
        filter:alpha(opacity=50);
        opacity: 0.5;     
    }

    #imgbox .act{ display:block; z-index:9; }
    .infoBar{ text-align:center; width:250px;  }
    </style>
    <div id="imgbox">
    <a href="?" target="_blank"  class="act" >
    <img  src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=8eb4edf74afbfbeddc59317c48f1f78e/e824b899a9014c08ba1d546d0b7b02087af4f4d0.jpg" />
    <p>123</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=89d9aee991ef76c6d0d2fc28ad17fdf6/fc1f4134970a304e491bdc32d0c8a786c9175c38.jpg" />
    <p>34567</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://c.hiphotos.baidu.com/pic/w%3D230/sign=0b99fb4fd1a20cf44690f9dc46084b0c/9825bc315c6034a80cc4c449ca134954082376d7.jpg" />
    <p>567</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://g.hiphotos.baidu.com/pic/w%3D230/sign=501967d6b8389b5038ffe751b537e5f1/18d8bc3eb13533fae443eee6a9d3fd1f40345b04.jpg" />
    <p>7890</p>
    </a>
     
    </div>
    <div class="infoBar" ><a href="#" id="bntPrev" ><</a> <a id="imgInfo" ></a>  <a href="#" id="bntNext" >></a>   </div>
    <script>
    function PlayImg(id,time,callBack){
    var ii=0,me=this;
    var imgs=$(id+' a'),L=imgs.length,tir,w=$(id).width();
    function fn(t){
      var t=(t||1)==1?1:L-1;
      var n=$(imgs[(ii+t)%L]);
      n.show().css({left:0,opacity:1 });
      clearTimeout(tir);
      $(imgs[ii]).animate({ left:w*(t==1?1:-1),opacity:0 },800,function(){
    $(this).removeClass('act').hide();
    n.addClass('act');
    ii= (ii+t )%L;
    callBack&&callBack.call(me,ii,L);
    tir=setTimeout(fn,time);
     });
    }
    imgs.hover(function(){
    clearTimeout(tir);
    },function(){clearTimeout(tir); tir=setTimeout(fn,time)})
    callBack&&callBack.call(me,ii,L);
    tir=setTimeout(fn,time);
    this.next=function(){
    $(imgs[ii]).stop();
    fn(1);
    }
    this.prev=function(){
    $(imgs[ii]).stop();
    fn(-1);
    }
    }
    $(function(){
    var play=new PlayImg('#imgbox',3000,function(i,L){
    $('#imgInfo').html( (i+1)+'/'+L )
    });
    $('#bntNext').click(function(){ play.next()  });
      $('#bntPrev').click(function(){ play.prev()  });
    })</script>
    </BODY>
    </HTML>
      

  2.   

    只有一部分，不过它引入的三个js文件没注释
    三个js中ued_common.js好说，是基本的js方法，像getElementById封装了下
    特别是Qfast.js这个js文件，原来压缩了，我在网上解压缩了下，用的http://tool.lu/js/在线的，得到的代码是
    [code=javascript]
    (function() {
    var _Doc = document,
    _loaded = {},
    _loading_queue = {},
    _isArray = function(e) {
    return e.constructor === Array;
    },
    _config = {
    core_lib: ['http://mat1.gtimg.com/joke/js/comm/core_1.0.1.js'],
    mods: {}
    },
    _file = _Doc.getElementsByTagName('script')[0],
    _load = function(url, type, charset, cb, context) {
    if (!url) {
    return;
    }
    if (_loaded[url]) {
    _loading_queue[url] = false;
    if (cb) {
    cb(url, context);
    }
    return;
    }
    if (_loading_queue[url]) {
    setTimeout(function() {
    _load(url, type, charset, cb, context);
    }, 1);
    return;
    }
    _loading_queue[url] = true;
    var n, t = type || url.toLowerCase().substring(url.lastIndexOf('.') + 1);
    if (t === 'js') {
    n = _Doc.createElement('script');
    n.setAttribute('type', 'text/javascript');
    n.setAttribute('src', url);
    n.setAttribute('async', true);
    } else if (t === 'css') {
    n = _Doc.createElement('link');
    n.setAttribute('type', 'text/css');
    n.setAttribute('rel', 'stylesheet');
    n.setAttribute('href', url);
    _loaded[url] = true;
    }
    if (charset) {
    n.charset = charset;
    }
    if (t === 'css') {
    _file.parentNode.insertBefore(n, _file);
    if (cb) {
    cb(url, context);
    }
    return;
    }
    n.onload = n.onreadystatechange = function() {
    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
    _loaded[this.getAttribute('src')] = true;
    if (cb) {
    cb(this.getAttribute('src'), context);
    }
    n.onload = n.onreadystatechange = null;
    }
    };
    _file.parentNode.insertBefore(n, _file);
    },
    _calculate = function(e) {
    if (!e || !_isArray(e)) {
    return;
    }
    var i = 0,
    item, result = [],
    mods = _config.mods,
    depeList = [],
    hasAdded = {},
    getDepeList = function(e) {
    var i = 0,
    m, reqs;
    if (hasAdded[e]) {
    return depeList;
    }
    hasAdded[e] = true;
    if (mods[e].requires) {
    reqs = mods[e].requires;
    for (; m = reqs[i++];) {
    if (mods[m]) {
    getDepeList(m);
    depeList.push(m);
    } else {
    depeList.push(m);
    }
    }
    return depeList;
    }
    return depeList;
    };
    for (; item = e[i++];) {
    if (mods[item] && mods[item].requires && mods[item].requires[0]) {
    depeList = [];
    hasAdded = {};
    result = result.concat(getDepeList(item));
    }
    result.push(item);
    }
    return result;
    },
    _queue = function(e) {
    if (!e || !_isArray(e)) {
    return;
    }
    this.queue = e;
    this.current = null;
    };
    _queue.prototype = {
    _interval: 10,
    start: function() {
    var o = this;
    this.current = this.next();
    if (!this.current) {
    this.end = true;
    return;
    }
    this.run();
    },
    run: function() {
    var o = this,
    mod, currentMod = this.current;
    if (typeof currentMod === 'function') {
    currentMod();
    this.start();
    return;
    } else if (typeof currentMod === 'string') {
    if (_config.mods[currentMod]) {
    mod = _config.mods[currentMod];
    _load(mod.path, mod.type, mod.charset, function(e) {
    o.start();
    }, o);
    } else if (/\.js|\.css/i.test(currentMod)) {
    _load(currentMod, '', '', function(e, o) {
    o.start();
    }, o);
    } else {
    this.start();
    }
    }
    },
    next: function() {
    return this.queue.shift();
    }
    };
    this.Qfast = function() {
    var args = Array.prototype.slice.call(arguments, 1),
    thread;
    if (arguments[0]) {
    thread = new _queue(_calculate(_config.core_lib.concat(args)));
    } else {
    thread = new _queue(_calculate(args));
    }
    thread.start();
    };
    this.Qfast.add = function(sName, oConfig) {
    if (!sName || !oConfig || !oConfig.path) {
    return;
    }
    _config.mods[sName] = oConfig;
    };
    })(); /*  |xGv00|a56c45ac18b131851caff18ab68bdb71 */
    很难理解
    还有一个
      

  3.   

    接着上面
    [code=javascript]
    function uedScroll(scrollContId, arrLeftId, arrRightId, dotListId, scrollSplit, dotSplit, sSliceIndex, sDir, nStep, nType) {
        this.scrollContId = scrollContId;
        this.arrLeftId = arrLeftId;
        this.arrRightId = arrRightId;
        this.dotListId = dotListId;
        this.scrollSplit = scrollSplit;
        this.dotSplit = dotSplit;
        this.sSliceIndex = sSliceIndex;
        this.sDir = sDir;
        this.nStep = nStep;
        this.nType = nType;
    this.pageIndex = 0;
        this.autoPlay = false;
        this.autoPlayTime = 4;
        this._state = "ready";
        this._endIndex = 0;
        this._forIndex = 0;
        this.nbuffer = 30;
    this.pageDot = [];
        this.stripDiv = document.createElement("DIV");
        this.listDiv01 = document.createElement("DIV");
        this.listDiv02 = document.createElement("DIV");
        if (!uedScroll.childs) {
            uedScroll.childs = []
        };
        this.ID = uedScroll.childs.length;
        uedScroll.childs.push(this);
        this.init = function() {
            this.scrollContObj = uedCommon.fn.getEbyId(this.scrollContId);
            this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContObj.innerHTML;
            this.scrollContObj.innerHTML = "";
            this.scrollContObj.appendChild(this.stripDiv);
            this.stripDiv.appendChild(this.listDiv01);
            this.SplitObj = uedCommon.fn.getEbyClass(this.scrollContObj, this.scrollSplit.mytag, this.scrollSplit.myclass);
            this._endIndex = this.SplitObj.length;
    switch (this.sDir) {
            case 1:
                this.sDir = {
                    ContObj: "scrollLeft",
                    SplitObj: "offsetLeft"
                };
    this.mar = "marginLeft";
                this.stripDiv.style.width = "32766px";
                this.listDiv01.style.cssFloat = "left";
    this.listDiv02.style.cssFloat = "left";
                break;
            case 2:
                this.sDir = {
                    ContObj: "scrollTop",
                    SplitObj: "offsetTop"
                };
    this.mar = "marginTop";
                this.stripDiv.style.height = "32766px";
                break;
            };
            switch (this.nType) {
            case 1:
                this.leftEnd = function() {
                    if (this.SplitObj.length % this.sSliceIndex != 0) {
                        var x = this.SplitObj.length % this.sSliceIndex;
                    } else {
                        var x = this.sSliceIndex;
                    }
                    this.pageIndex = this.SplitObj.length - x;
                    this.nStep = this.nYuanStep;
                    this.nStep = this.nStep * 2;
                    this.sGoTo = "next";
                };
                this.rightEnd = function() {
                    this.pageIndex = 0;
                    this.nStep = this.nYuanStep;
                    this.nStep = this.nStep * 2;
                    this.sGoTo = "prve";
                };
                break;
            case 2:
        this._LoopCase();
                break;
    case 3:
        this._LoopCase();
                break;
            default:
                break;
            };
            this.nYuanStep = this.nStep;
            uedCommon.fn.addEvent(this.scrollContObj, "mouseover", Function("uedScroll.childs[" + this.ID + "].stop()"));
            uedCommon.fn.addEvent(this.scrollContObj, "mouseout", Function("uedCommon.fn.realOut(uedScroll.childs[" + this.ID + "].scrollContObj,event,function(){uedScroll.childs[" + this.ID + "].play()})"));
            if (this.arrLeftId) {
                this.arrLeftObj = uedCommon.fn.getEbyId(this.arrLeftId);
                if (this.arrLeftObj) {
                    uedCommon.fn.addEvent(this.arrLeftObj, "click", Function("uedScroll.childs[" + this.ID + "].clicks(1)"));            }
            };
            if (this.arrRightId) {
                this.arrRightObj = uedCommon.fn.getEbyId(this.arrRightId);
                if (this.arrRightObj) {
                    uedCommon.fn.addEvent(this.arrRightObj, "click", Function("uedScroll.childs[" + this.ID + "].clicks(2)"));
                }
            };
    if (this.dotListId) {
                this.dotListObj = uedCommon.fn.getEbyId(this.dotListId);
                if (this.dotListObj) {
    this.pageNum = Math.ceil(this._endIndex / this.sSliceIndex);
    this.dotMod = this.dotListObj.innerHTML;
    this.dotListObj.innerHTML = "";
    for(i=0;i<this.pageNum;i++){
    this.dotListObj.innerHTML += this.dotMod;
    };
    this.dotObj = uedCommon.fn.getEbyClass(this.dotListObj,this.dotSplit.mytag,this.dotSplit.myclass);
    var xy = 0;
    for(i=0;i<this.pageNum;i++){
    uedCommon.fn.addEvent(this.dotObj[i], this.Events, Function("uedScroll.childs[" + this.ID + "].pageTo("+xy+")"));
    this.pageDot.push(xy);
    xy += this.sSliceIndex;

    };
    this.dotObj[0].className = this.dotSplit.cur;
        this.dotCurClass = function(){
    for(i=0;i<this.pageNum;i++){
    if(this.pageIn(i)){
    this.dotObj[i].className = this.dotSplit.cur;
    }else{
    if(this.dotSplit.offing){
      this.dotObj[i].className = this.dotSplit.offing;
    }else{
      this.dotObj[i].className = "";
    }
    };
    }
    };
                }
            };
            this.play();
        };
    this._LoopCase = function(){
      this._forIndex = this.sSliceIndex;
                this.stripDiv.appendChild(this.listDiv02);
                this.SplitObj = uedCommon.fn.getEbyClass(this.scrollContObj, this.scrollSplit.mytag, this.scrollSplit.myclass);
    this.leftEnd = function() {
    if(this.pageIndex-this.sSliceIndex<0 && this.pageIndex != 0){
      this.pageIndex = this._endIndex - (this.pageIndex-this.sSliceIndex);
    }else{
      this.pageIndex = this._endIndex;
    };
                    this.nStep = this.nYuanStep;
                    this.scrollContObj[this.sDir.ContObj] = this.SplitObj[this.pageIndex][this.sDir.SplitObj];
                    this.pageIndex = this.pageIndex - this.sSliceIndex;
                    this.sGoTo = "prve";
                };
                this.rightEnd = function() {
                    if (this.pageIndex >= this._endIndex) {
                        if (this._endIndex % this.sSliceIndex != 0 && this.pageIndex!=this._endIndex) {
                            var x = this._endIndex % this.sSliceIndex;
                        } else {
                            var x = this.sSliceIndex;
                        }
                        if (this._forIndex <= 0 || this._forIndex-x <= 0) {
                            this._forIndex = 0;
                        } else {
                            this._forIndex -= x
                        }
                        this.scrollContObj[this.sDir.ContObj] = 
      

  4.   

    this.SplitObj[this._forIndex][this.sDir.SplitObj];
                        this.pageIndex = this._forIndex;
                        if (this._forIndex <= 0) {
                            this._forIndex = this.sSliceIndex;
                        }
                    }
                }
    };
        this.clicks = function(n) {
    if (this.nType == 3) {}
        else{
          if (this._state != "ready") {
                      return;
                    }
     }
    clearInterval(this._autoTimeObj);
            if (n == 1) {
                if (this.pageIndex <= 0 || (this.pageIndex-this.sSliceIndex<0 && this.pageIndex != 0) ) {
                    this.leftEnd();
                } else {
                    this.pageIndex -= this.sSliceIndex;
                    this.nStep = this.nYuanStep;
                    this.sGoTo = "prve";
                }
            } else if (n == 2) {
                if (this.pageIndex + this.sSliceIndex >= this.SplitObj.length) {
                    this.rightEnd();
                } else {
                    this.pageIndex += this.sSliceIndex;
                    this.nStep = this.nYuanStep;
                    this.sGoTo = "next";
                }
            };
    this._state = "floating";
    if(this.dotCurClass){this.dotCurClass();}
            this._scrollTimeObj = setInterval("uedScroll.childs[" + this.ID + "]." + this.sGoTo + "(" + (this.pageIndex) + "," + this.nStep + ",{ContObj:'" + this.sDir.ContObj + "',SplitObj:'" + this.sDir.SplitObj + "'})", 10)
        },
        this.prve = function(nIndex, nStep, sDir) {
    if(isNaN(parseInt(uedCommon.fn.getStyle(this.SplitObj[nIndex],this.mar)))){
      var y = 0;
    }else{
      var y = parseInt(uedCommon.fn.getStyle(this.SplitObj[nIndex],this.mar));
    }
    var x = this.SplitObj[nIndex][sDir.SplitObj] - y;
            if (this.scrollContObj[sDir.ContObj] > x) {
                if (Math.ceil(this.scrollContObj[sDir.ContObj] - this.SplitObj[nIndex][sDir.SplitObj]) <= this.nbuffer) {
                    this.scrollContObj[sDir.ContObj]--;
                } else {
                    this.scrollContObj[sDir.ContObj] -= nStep;
                }
            } else {
                clearInterval(this._scrollTimeObj);
                this._state = "ready"
    this.play();

            }
        };
        this.next = function(nIndex, nStep, sDir) {
    if(isNaN(parseInt(uedCommon.fn.getStyle(this.SplitObj[nIndex],this.mar)))){
      var y = 0;
    }else{
      var y = parseInt(uedCommon.fn.getStyle(this.SplitObj[nIndex],this.mar));
    }
    var x = this.SplitObj[nIndex][sDir.SplitObj] - y;
            if (this.scrollContObj[sDir.ContObj] < x) {
                if (Math.ceil(this.SplitObj[nIndex][sDir.SplitObj] - this.scrollContObj[sDir.ContObj]) <= this.nbuffer) {
                    this.scrollContObj[sDir.ContObj]++;
                } else {
                    this.scrollContObj[sDir.ContObj] += nStep;
                }
            } else {
                clearInterval(this._scrollTimeObj);
                this._state = "ready";
                if (this.nType == 2 || this.nType == 3) {
                    this.rightEnd();
                };
    this.play();
            }
        };
    this.pageTo = function(n){
    if (this.nType == 3) {}
        else{
          if (this._state != "ready") {
                      return;
                    }
     }
    clearInterval(this._autoTimeObj);
    this.pageIndex = n;
    if (this.scrollContObj[this.sDir.ContObj] > this.SplitObj[n][this.sDir.SplitObj]){
      var x ="prve"
    }else{
      var x ="next"
    };
    this._state = "floating";
    if(this.dotCurClass){this.dotCurClass();}
            this._scrollTimeObj = setInterval("uedScroll.childs[" + this.ID + "]." + x + "(" + (this.pageIndex) + "," + this.nStep + ",{ContObj:'" + this.sDir.ContObj + "',SplitObj:'" + this.sDir.SplitObj + "'})", 10)
    };
    this.pageIn = function(n){
    var x = this.pageDot[n] - this.sSliceIndex;
    if(x < 0){x = 0};
    if(this.pageIndex >= this._endIndex){
      y = this.pageIndex - this._endIndex;
    }else{
      y = this.pageIndex;
    }
    if(y>x && y <= this.pageDot[n] || (y==0 && y==this.pageDot[n])){
    return true;
    }else{return false;}
    };
        this.play = function() {
            if (!this.autoPlay) {
                return;
            };;
    if (this.nType == 3) {}
        else{
          if (this._state != "ready") {
                      return;
                    }
     }
            this._autoTimeObj = setInterval("uedScroll.childs[" + this.ID + "].clicks(2)",this.autoPlayTime*1000)
        };
        this.stop = function() {
            if (this.nType == 3) {}
        else{
          if (this._state != "ready") {
                      return;
                    }
     }
                clearInterval(this._autoTimeObj);
    if (this.nType == 3) {
      clearInterval(this._scrollTimeObj);
    };
        };
    };/*  |xGv00|de1eac7133af1d9bc2beab10ec90f6d9 */
    相对那个好理解点
    不容易看懂
    你写的滚动不错，不过我还想要个这样的滚动的，一屏一屏滚动的，不是隐藏的
    [/code]
    [/code]
      

  5.   


    <div class="picnews">
          <dl class="tbox light">
            <dt class='light'><strong>图文资讯</strong></dt>
            <dd class='light'>
    <div class="infiniteCarousel">
    <div class="wrapper">
      <ul>
    <li><a><img src='http://g.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=7ce1710cb812c8fcb0f3f5c5cc38e378/7acb0a46f21fbe096509c0386a600c338744ad42.jpg' border='0' width='143' alt='新加坡媒体：中国将南海东海纳入核心利益'><span class="title">新加坡媒体：中国将南海</span></a></li>
    <li><a><img src='http://a.hiphotos.baidu.com/album/w%3D2048/sign=ed229ec480cb39dbc1c06056e42e0824/b64543a98226cffc2ef1459cb8014a90f703eac1.jpg' border='0' width='143' alt='中国外交部称坚决反对美国向台出售武器'><span class="title">中国外交部称坚决反对美</span></a></li>
    <li><a><img src='http://c.hiphotos.baidu.com/album/w%3D2048/sign=8e5db200d31b0ef46ce89f5ee9fc50da/f636afc379310a55998624dab64543a982261079.jpg' border='0' width='143' alt='原创风景图片'><span class="title">原创风景图片</span></a></li>
    <li><a><img src='http://h.hiphotos.baidu.com/album/w%3D2048/sign=14694d38cefc1e17fdbf8b317ea8f703/0bd162d9f2d3572c461f66f28b13632762d0c31b.jpg' border='0' width='143' alt='武夷山的美景真是不错'><span class="title">武夷山的美景真是不错</span></a></li>
    <li><a><img src='http://e.hiphotos.baidu.com/album/w%3D2048/sign=cd9f75bfcc11728b302d8b22fcc4c2ce/d833c895d143ad4bcd8cbcee83025aafa40f0679.jpg' border='0' width='143' alt='海岛风光'><span class="title">海岛风光</span></a></li>
    <li><a><img src='http://h.hiphotos.baidu.com/album/w%3D2048/sign=6331e1c3a2cc7cd9fa2d33d90d39203f/35a85edf8db1cb1386cac63ddc54564e92584b79.jpg' border='0' width='143' alt='DedeCMS产品相关截图'><span class="title">DedeCMS产品相关截图</span></a></li>
    <li><a><img src='http://e.hiphotos.baidu.com/album/w%3D2048/sign=476c7d0f9213b07ebdbd570838ef9023/e61190ef76c6a7ef72855208fcfaaf51f3de6679.jpg' border='0' width='143' alt='农家小院丝瓜架下'><span class="title">农家小院丝瓜架下</span></a></li>
    <li><a><img src='http://f.hiphotos.baidu.com/album/w%3D2048/sign=793d3f013b292df597c3ab1588095d60/a686c9177f3e670924eebfd13ac79f3df8dc5536.jpg' border='0' width='143' alt='流连忘返的香樟大道'><span class="title">流连忘返的香樟大道</span></a></li>
    <li><a><img src='http://b.hiphotos.baidu.com/album/w%3D2048/sign=84551ed6a686c91708035539fd0571cf/0824ab18972bd407246529d37a899e510fb30979.jpg' border='0' width='143' alt='美丽的风景尽收眼底'><span class="title">美丽的风景尽收眼底</span></a></li>
    <li><a><img src='http://h.hiphotos.baidu.com/album/w%3D2048/sign=f42b06f414ce36d3a20484300ecb3b87/3801213fb80e7becfb79f9cf2e2eb9389b506b79.jpg' border='0' width='143' alt='DedeCMS模板定制服务'><span class="title">DedeCMS模板定制服务</span></a></li>
      </ul>
    </div>
    </div>
            </dd>
          </dl>
        </div>   (function () {
        $.fn.infiniteCarousel = function () {
            function repeat(str, n) {
                return new Array( n + 1 ).join(str);
            }
            
            return this.each(function () {
                // magic!
                var $wrapper = $('> div', this).css('overflow', 'hidden'),
                    $slider = $wrapper.find('> ul').width(9999),
                    $items = $slider.find('> li'),
                    $single = $items.filter(':first')
                    
                    singleWidth = $single.outerWidth(),
                    visible = Math.ceil($wrapper.innerWidth() / singleWidth),
                    currentPage = 1,
                    pages = Math.ceil($items.length / visible);
                    
                /* TASKS */
                
                // 1. pad the pages with empty element if required
                if ($items.length % visible != 0) {
                    // pad
                    $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
                    $items = $slider.find('> li');
                }
                
                // 2. create the carousel padding on left and right (cloned)
                $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
                $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
                $items = $slider.find('> li');
                
                // 3. reset scroll
                $wrapper.scrollLeft(singleWidth * visible);
                
                // 4. paging function
                function gotoPage(page) {
                    var dir = page < currentPage ? -1 : 1,
                        n = Math.abs(currentPage - page),
                        left = singleWidth * dir * visible * n;
                    
                    $wrapper.filter(':not(:animated)').animate({
                        scrollLeft : '+=' + left
                    }, 500, function () {
                        // if page == last page - then reset position
                        if (page > pages) {
                            $wrapper.scrollLeft(singleWidth * visible);
                            page = 1;
                        } else if (page == 0) {
                            page = pages;
                            $wrapper.scrollLeft(singleWidth * visible * pages);
                        }
                        
                        currentPage = page;
                    });
                }
                
                // 5. insert the back and forward link
                $wrapper.after('<a href="#" class="arrow back">&lt;</a><a href="#" class="arrow forward">&gt;</a>');
                
                // 6. bind the back and forward links
                $('a.back', this).click(function () {
                    gotoPage(currentPage - 1);
                    return false;
                });
                
                $('a.forward', this).click(function () {
                    gotoPage(currentPage + 1);
                    return false;
                });
                
                $(this).bind('goto', function (event, page) {
                    gotoPage(page);
                });
                
                // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
                $(this).bind('next', function () {
                    gotoPage(currentPage + 1);
                });
            });
        };
    })(jQuery);$(document).ready(function () {
        // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
        var autoscrolling = true;
        
        $('.infiniteCarousel').infiniteCarousel().mouseover(function () {
            autoscrolling = false;
        }).mouseout(function () {
            autoscrolling = true;
        });
    setInterval(function () {
            if (autoscrolling) {
                $('.infiniteCarousel').trigger('next');
            }
        }, 5000);
        
    });
      

  6.   

    你说的是这种效果吧，翻页按钮你可以修改邦定下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <BODY>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
    #imgbox{
    width:250px;
    height:250px;
    border:1px solid #ccc;
    position:relative;
    overflow:hidden;
    }
    #imgbox img{ 
    border:none  
    }
    #imgbox a{
    display:none;
    float:left;
    position:relative;
    }
    #imgbox p{
    position: absolute;
    padding:3px;
    bottom:0px;
    margin: 0px;
    background: #333;
    display: block;
    width:100%;
    color:#fff;
        filter:alpha(opacity=50);
        opacity: 0.5; 
    }
    #imgbox .imgboxList a{
      display:block;
      }
    </style>
    <div id="imgbox"> <a href="?" target="_blank"  class="act" >
    <img  src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=8eb4edf74afbfbeddc59317c48f1f78e/e824b899a9014c08ba1d546d0b7b02087af4f4d0.jpg" />
    <p>123</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=89d9aee991ef76c6d0d2fc28ad17fdf6/fc1f4134970a304e491bdc32d0c8a786c9175c38.jpg" />
    <p>34567</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://c.hiphotos.baidu.com/pic/w%3D230/sign=0b99fb4fd1a20cf44690f9dc46084b0c/9825bc315c6034a80cc4c449ca134954082376d7.jpg" />
    <p>567</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://g.hiphotos.baidu.com/pic/w%3D230/sign=501967d6b8389b5038ffe751b537e5f1/18d8bc3eb13533fae443eee6a9d3fd1f40345b04.jpg" />
    <p>7890</p>
    </a>
     
    </div>
    <div class="infoBar" style=" text-align:center; width:250px;"  ><a href="#" id="bntPrev" ><</a> <a id="imgInfo" ></a>  <a href="#" id="bntNext" >></a>   </div>
    <script>
    function PlayImg(id,time,callBack){
    var ii=0,me=this,tir;
    var box=$(id),imgs=box.find('a'),L=imgs.length,tir,w=box.width();
    var imgboxList=$('<div class="imgboxList"/>').appendTo(box);
    imgboxList.css({width: w*3,height: box.height(), position: 'absolute'} );
    box.find('a,img').css( {width:w,height: box.height()} )
    if(imgs.length==1){
    box.append( imgs.first().clone())
    imgs=box.find('a');
    L=2;
    }
    imgboxList.append( imgs[0]  );
    function fn(t){
        var way=t||1,t=(t||1)==1?1:L-1;
        var n=$(imgs[(ii+t)%L]),left;
        clearTimeout(tir);
        imgboxList.children().appendTo( box );
        if(way==1){
        imgboxList.append(n).append(  imgs[ii ] );
        left=0;
        imgboxList.css('left',-w);
        }else{
        imgboxList.append( imgs[ii ] ).append(  n );
        imgboxList.css('left',0);
        left=-w;
        }
        imgboxList.stop();
        imgboxList.animate({left: left},600, function(){
        ii= (ii+t )%L;
    callBack&&callBack.call(me,ii,L);
    tir=setTimeout(fn,time);
        });
    }
      imgs.hover(function(){
      clearTimeout(tir);
      },function(){clearTimeout(tir); tir=setTimeout(fn,time)})
      callBack&&callBack.call(me,ii,L);
    tir=setTimeout(fn,time);
    this.next=function(){fn(1) } 
    this.prev=function(){ fn(-1)}
    }
    $(function(){
    var play=new PlayImg('#imgbox',3000,function(i,L){
     //图片切换回调方法
    $('#imgInfo').html( (i+1)+'/'+L )
    });
    $('#bntNext').click(function(){ play.next()  }); //调用下页方法
      $('#bntPrev').click(function(){ play.prev()  }); //调用上页方法
    })
    </script>
    </BODY>
    </HTML>
      

  7.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <BODY>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
    #imgbox{
    width:250px;
    height:250px;
    border:1px solid #ccc;
    position:relative;
    overflow:hidden;
    }
    #imgbox img{ 
    border:none  
    }
    #imgbox a{
    display:none;
    float:left;
    position:relative;
    }
    #imgbox p{
    position: absolute;
    padding:3px;
    bottom:0px;
    margin: 0px;
    background: #333;
    display: block;
    width:100%;
    color:#fff;
        filter:alpha(opacity=50);
        opacity: 0.5; 
    }
    #imgbox .imgboxList a{
      display:block;
      }
    </style>
    <div id="imgbox">
    <a href="?" target="_blank"  class="act" >
    <img  src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=8eb4edf74afbfbeddc59317c48f1f78e/e824b899a9014c08ba1d546d0b7b02087af4f4d0.jpg" />
    <p>123</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=89d9aee991ef76c6d0d2fc28ad17fdf6/fc1f4134970a304e491bdc32d0c8a786c9175c38.jpg" />
    <p>34567</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://c.hiphotos.baidu.com/pic/w%3D230/sign=0b99fb4fd1a20cf44690f9dc46084b0c/9825bc315c6034a80cc4c449ca134954082376d7.jpg" />
    <p>567</p>
    </a>
    <a href="?" target="_blank" >
    <img src="http://g.hiphotos.baidu.com/pic/w%3D230/sign=501967d6b8389b5038ffe751b537e5f1/18d8bc3eb13533fae443eee6a9d3fd1f40345b04.jpg" />
    <p>7890</p>
    </a>
     
    </div>
    <div class="infoBar" style=" text-align:center; width:250px;"  ><a href="#" id="bntPrev" ><</a> <a id="imgInfo" ></a>  <a href="#" id="bntNext" >></a>   </div>
    <script>
    function PlayImg(id,time,callBack){
    var ii=0,me=this,tir;
    var box=$(id),imgs=box.find('a'),L=imgs.length,tir,w=box.width();
    var imgboxList=$('<div class="imgboxList"/>').appendTo(box);
    imgboxList.css({width: w*3,height: box.height(), position: 'absolute'} );
    box.find('a,img').css({width:w,height: box.height()} );
    if(!imgs.length)return;
    if(imgs.length==1){
    box.append( imgs.first().clone())
    imgs=box.find('a');
    L=2;
    }
    imgboxList.append( imgs[0]  );
    function fn(t){
        var way=t||1,t=(t||1)==1?1:L-1;
        var n=$(imgs[(ii+t)%L]),left;
        clearTimeout(tir);
        imgboxList.children().appendTo( box );
        if(way==1){
        imgboxList.append( n,imgs[ii ] ).css('left',-w);;
        left=0;
        }else{
        imgboxList.append(imgs[ii ],n).css('left',0);;
        left=-w;
        }
        callBack&&callBack.call(me,ii,L);
        ii= (ii+t )%L;
        imgboxList.stop().animate({left: left},600, function(){
    tir=setTimeout(fn,time);
       });
    }
      imgs.hover(function(){
      clearTimeout(tir);
      },function(){clearTimeout(tir); tir=setTimeout(fn,time)})
      callBack&&callBack.call(me,ii,L);
    time!=-1&&(tir=setTimeout(fn,time));
    this.next=function(){fn(1) } 
    this.prev=function(){ fn(-1)}
    }
    $(function(){
    var play=new PlayImg('#imgbox',3000,function(i,L){
     //图片切换回调方法
    $('#imgInfo').html( (i+1)+'/'+L )
    });
    $('#bntNext').click(function(){ play.next()  }); //调用下页方法
      $('#bntPrev').click(function(){ play.prev()  }); //调用上页方法
    })
    </script>
    </BODY>
    </HTML>