[前端] 图片滚动效果

没事写了个图片滚动的效果，就是下图：

简单讲下：

插件是基于jQuery写的，主要实现的功能：自动播放、鼠标悬停、左右箭头控制+禁止点击

 

CSS样式（[合作伙伴]的宽度是1022px，由于是从页面里copy过来的，所以如果有遇到没有的还请自加）：

 

<style>
    .cooperation-box {
        position: relative;
        height: 91px;
        border-bottom: 1px solid #E0DED9;
        overflow: hidden;
    }
    .cooperation {
        position: relative;
        left: 0;
        height: 50px;
        padding: 20px 0;
    }
    .cooperation li {
        float: left;
        width: 205px;
        text-align: center;
    }
    .cooperation li a {
        display: block;
    }
    .cooperation li img {
        height: 100%;
    }
    .cooperation-box>a {
        display: block;
        position: absolute;
        top: 0;
        z-index: 9;
        width: 22px;
        height: 100%;
        background: #f5f5f5;
        font-family: '宋体';
        font-size: 18px;
        color: #aaa;
        font-weight: bold;
        text-align: center;
        line-height: 91px;
    }
    .cooperation-box>a:hover {
        background: #e5e5e5;
    }
    .cooperation-box .prev {
        left: 0;
        border-right: 1px solid #E0DED9;
    }
    .cooperation-box .next {
        right: 0;
        border-left: 1px solid #E0DED9;
    }
    .cooperation-box .prev.disabled,
    .cooperation-box .next.disabled {
        background: #fbfbfb;
        color: #ddd;
    }
    .cooperation-box .prev.disabled:hover,
    .cooperation-box .next.disabled:hover {
        background: #fbfbfb;
    }
</style>

 

 

HTML布局( a标签最好加个title属性 )：

 

<div class="cooperation-box">
    <a class="prev" href="javascript:;"><</a>
    <a class="next" href="javascript:;">></a>
    <ul class="cooperation">
        <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
        <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
        <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
        <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
        <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
        <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
        <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
        <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    </ul>
</div>

 

 

 

JS脚本插件：

 

<script>
    $.extend({
        /*
         图片轮播效果
         效果：
         1、自动滚动
         2、鼠标悬停
         3、左右控制+禁止点击
         调用：$.scroll({box: '父容器', scrollbox: 'ul', time: 1500});
         */
        scroll: function(options) {
            // 默认配置
            var defaults = {
                box: '.cooperation-box',  // 父容器
                 scrollbox: '.cooperation', // ul容器
                time: 1500  // 切换时间
            };

            // 扩展配置
            var conf = $.extend({}, defaults, options);

            // 获取li的个数
            var liSize = $(conf.box).find('li').size();

            // 获取li的宽度
            var liWidth = $(conf.box).find('li:first').width();

            // 定义ul的宽度 
            $(conf.scrollbox).width(liWidth*liSize);

            // 右箭头初始化(不可点)
            $(conf.box).find('.next').addClass('disabled');

            // 定义一个全局变量index索引变量
            var index = 0;

            // 切换函数
            function switchFunc() {
                index++;
                if(index > liSize-5) {  // 必须有5个显示在上面
                    index=liSize-5;

                    // 把滚动过的添加到后面，初始left值为0 index值为0
                    var scrolledLi = $(conf.box).find('li:lt('+index+')');
                    $(conf.scrollbox).append(scrolledLi);
                    $(conf.scrollbox).css('left', 0);
                    index = 0;
                }
                $(conf.scrollbox).stop(true, true).animate(
                        {'left': -liWidth*index},
                        500,
                        function() {
                            $(conf.box).find('.next').removeClass('disabled');
                        }
                );
            }

            // 自动播放
            var autoPlay = setInterval(function() {switchFunc();}, conf.time);

            // 鼠标浮上暂停
            $(conf.box).mouseover(function() {
                clearInterval(autoPlay);
            });

            // 鼠标离开继续
            $(conf.box).mouseout(function() {
                autoPlay = setInterval(function() {switchFunc();}, conf.time);
            });

            // 点击左箭头
            $(conf.box).find('.prev').click(function() {
                index++;
                if(index >= liSize-5) {
                    index=liSize-5;
                    $(this).addClass('disabled');
                }
                $(conf.scrollbox).stop(true, true).animate(
                        {'left': -liWidth*index},
                        500,
                        function() {
                            $(conf.box).find('.next').removeClass('disabled');
                        }
                );
            });

            // 点击右箭头
            $(conf.box).find('.next').click(function() {
                index--;
                if(index <= 0) {
                    index = 0;
                    $(this).addClass('disabled');
                }
                $(conf.scrollbox).stop(true, true).animate(
                        {'left': -liWidth*index},
                        500,
                        function() {
                            $(conf.box).find('.prev').removeClass('disabled');
                        }
                );
            });
        }
    });
</script>

 

 

 

页面调用：

 

<script>
    $(function() {
        $.scroll({time: 1500});
    });
</script>

 

欢迎关注技术开发分享录：http://fenxianglu.cn/