jq + css 实现简单的图片轮播效果

￡神魔★判官ぃ 2022-06-10 00:40 221阅读 0赞

## jq + css 实现简单的图片轮播效果 ##

开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。

ps：  
功能比较简单，整个框并不能根据图片的大小自动调节，这里所用的图片是1170\*500的，如果需要改成其他大小的图片，自行修改.pic-list下img的宽度。

.pic-list中的宽度为整个横幅的宽度，如果需要轮播的图片数量很多，.pic-list的宽度应大于数量\*单张宽度，

html

css

.banner{ width: 100%; height: 500px; overflow: hidden; position: relative; }
    .banner a{ text-decoration: none; }
    .banner .pic-list{ width: 10000px; height: 500px; position: absolute; z-index: 1; }
    .banner .pic-list img{ width: 1170px; float: left; }
    #buttons{ position: absolute; z-index: 2; height: 10px; bottom: 20px; left: 550px; }
    #buttons span{ cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; }
    #buttons .on{ background: orange; }
    .arrow{ cursor: pointer; line-height: 36px; text-align: center; font-size: 20px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 200px; background: rgba(0,0,0,0.5); color: #fff; display: none; }
    .banner:hover .arrow{ display: block;}
    
    #prev{ left: 20px; }
    #next{ right:20px; }

$(document).ready(function(){ 
        var picNum = 4;//图片数量，根据实际修改
        var picWidth = 1170;//图片的宽度，根据实际修改
        var picMaxWidth = -1 * picNum * picWidth;
        var currentPic = 1;
        var next = $('#next');
        var prev = $('#prev');
        var flag = false;
    
        prev.on('click',function(){ 
            if(!flag){
                calPx(1170);
                currentPic--;
                if (currentPic < 1) {
                    currentPic = picNum;
                }
                $('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');
            }
        });
    
        next.on('click',function(){ 
            if(!flag){
                calPx(-1170);
                currentPic++;
                if (currentPic > picNum) {
                    currentPic = 1;
                }
                $('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');
            }
    
    
        });
        $('.banner').on('mouseover',function(){ 
            stop();
        }).on('mouseout',function(){ 
            play();
        })
        function nextClick(){ 
            next.click();
        }
        function play(){ 
            setInt = setInterval(nextClick,2000);
        }
        function stop(){ 
            clearInterval(setInt);
        }
    
        function calPx(leftPx){ 
            flag = true;
            var left = parseInt($('.pic-list').css('left'));
            var newLeft = left+leftPx;
            var time = 300;
            var interval = 10;
            var speed = leftPx/(time/interval);
    
            function go(){ 
                var left = parseInt($('.pic-list').css('left'));
                if((speed < 0 && left > newLeft) || (speed > 0 && left < newLeft)){
                    $('.pic-list').css('left', (left + speed) + 'px');
                    setTimeout(go,interval);
                }else{
                    flag = false;
                    if( newLeft > -1170){
                        newLeft = picMaxWidth;
                    }else if (newLeft < picMaxWidth ) {
                        newLeft = -1170;
                    }
                    $('.pic-list').css('left',newLeft + 'px');
                }
            }
            go();
    
        }
        play();
    
    });