jq图片滚动效果

js引用
`<script src="jquery-1.4.2.min.js"></script>`
html
```html
<div class="focusbox">
    <div id="fullbanner">
        <div class="wrappic">
            <ul>
                <li class="plan"><a href="http://www.17sucai.com/" target="_blank"><img width="950" height="400" src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/b1.jpg" alt="速建时代" /></a></li>
                <li class="plan"><a href="http://www.17sucai.com/" target="_blank"><img width="950" height="400" src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/b2.jpg" alt="速建时代" /></a></li>
                <li class="plan"><a href="http://www.17sucai.com/" target="_blank"><img width="950" height="400" src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/b3.jpg" alt="速建时代" /></a></li>
                <li class="plan"><a href="http://www.17sucai.com/" target="_blank"><img width="950" height="400" src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/b4.jpg" alt="速建时代" /></a></li>
            </ul>
        </div>
        <div class="helper">
            <div class="mask-left"></div>
            <div class="mask-right"></div>
            <a href="javascript:void();" class="prev arrow-left"></a>
            <a href="javascript:void();" class="next arrow-right"></a>
        </div>
    </div>
</div>
```
前端引用
```javascript
<script type="text/javascript">
    $(document).ready(function(){
        $.foucs({
            direction: 'right'
        });
    });
</script>
```
css
```css
.focusbox{position:relative;overflow:hidden;zoom:1;}
#fullbanner{width:960px;height:410px;margin:auto;position:relative;}
#fullbanner li a{display:block;width:950px;height:400px;overflow:hidden;}
#fullbanner img{width:950px;height:400px;}
#fullbanner ul{width:960px;height:410px;}
#fullbanner .wrappic{overflow:visible;position:absolute;}
#fullbanner .next, #fullbanner .prev{filter:alpha(Opacity=70);opacity:.7;position:absolute;top:50%;margin-top:-25px;margin-left:5px;background-color:#303030;z-index:3;}
#fullbanner .next:hover, #fullbanner .prev:hover{background-color:orangered;}
#fullbanner .next{margin:-25px 5px 0 0;right:0;}
#fullbanner .mask-left, #fullbanner .mask-right, #fullbanner .plan{background:#fff;padding:5px;z-index:1;position:absolute;top:0;left:0;width:950px;height:400px;overflow:hidden;left:1920px;}
#fullbanner .mask-right, #fullbanner .mask-left{z-index:4;left:-960px;filter:alpha(Opacity=50);opacity:.5;background:#fff;overflow:hidden;}
#fullbanner .mask-right{left:960px;}

.arrow-left,.arrow-right{background:url(images/icon-sd26986d847.png) no-repeat;}
.arrow-left{background-position:15px 12px;height:50px;width:50px;}
.arrow-left:hover{background-position:-45px 12px;}
.arrow-right{background-position:-103px 12px;height:50px;width:50px;}
.arrow-right:hover{background-position:-163px 12px;}
```

js 新建foucs.js 
```javascript
; (function ($) {
    $.extend({
        'foucs': function (con) {
            var $container = $('#fullbanner')
                , $imgs = $container.find('li.plan')
                , $leftBtn = $container.find('a.prev')
                , $rightBtn = $container.find('a.next')
                , config = {
                interval: con && con.interval || 3500,
                animateTime: con && con.animateTime || 500,
                direction: con && (con.direction === 'right'),
                _imgLen: $imgs.length
            }
                , i = 0
                , getNextIndex = function (y) { return i + y >= config._imgLen ? i + y - config._imgLen : i + y; }
                , getPrevIndex = function (y) { return i - y < 0 ? config._imgLen + i - y : i - y; }
                , silde = function (d) {
                $imgs.eq((d ? getPrevIndex(2) : getNextIndex(2))).css('left', (d ? '-1920px' : '1920px'))
                $imgs.animate({
                    'left': (d ? '+' : '-') + '=960px'
                }, config.animateTime);
                i = d ? getPrevIndex(1) : getNextIndex(1);
            }
                , s = setInterval(function () { silde(config.direction); }, config.interval);
            $imgs.eq(i).css('left', 0).end().eq(i + 1).css('left', '960px').end().eq(i - 1).css('left', '-960px');
            $container.find('.wrappic').add($leftBtn).add($rightBtn).hover(function () { clearInterval(s); }, function () { s = setInterval(function () { silde(config.direction); }, config.interval); });
            $leftBtn.click(function () {
                if ($(':animated').length === 0) {
                    silde(false);
                }
            });
            $rightBtn.click(function () {
                if ($(':animated').length === 0) {
                    silde(true);
                }
            });
        }
    });
}(jQuery));
```

速建时代TPCMS管理系统

jq图片滚动效果