PC端-全屏轮播图

HTML

<div id="banner">
	<div class="banner_wrapper">
		<div class="banner_slide_wrapper">
			<div class="banner_slide">
  				<a href="#"><img src="/images/index2019/home/banner01.jpg" alt="轮播图"></a>
  		    </div>
  		    <div class="banner_slide">
  				<a href="#"><img src="/images/index2019/home/banner01.jpg" alt="轮播图"></a>
  			</div>
  			<div class="banner_slide">
  			    <a href="#"><img src="/images/index2019/home/banner01.jpg" alt="轮播图"></a>
  			</div>
		</div>
	</div>
</div>

CSS

#banner {
    height: 442px;
    position: relative;
}

#banner .banner_wrapper {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    direction: ltr;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    height: 100%;
}

#banner .banner_wrapper .banner_slide_wrapper {
		position: relative;
		height: 100%;
}

#banner .banner_wrapper .banner_slide {
		position: relative;
    overflow: hidden;
    height: 100%;
    float: left;
}

#banner .banner_wrapper .banner_slide img {
		width: unset;
    position: absolute;
    left: 50%;
    margin-left: -840px;
    height: 442px;
}

 JS

//轮播图
	(function(){
		var $scroll = $('.banner_slide_wrapper');
		var copy_el = $scroll.html();
		var current = 0;//当前索引
        var distance = $('.banner_wrapper').width();//一次移动的距离
        var current_pos = 0;//现在left定位值
        var isInit = false;
        var time1 = null;//定时器
        var imgLen = $scroll.find('.banner_slide').length;
        var imgMaxWidth = 1920;
        var currentIndicators = 0; // 当前的计数器Index
        var t = 0;
        $scroll[0].innerHTML += copy_el;
        
        /*$('#box').on('click', '.right', next);
        $('#box').on('click', '.left', pre);*/
        $('.banner_wrapper').on('mousemove', function(){
            clearInterval(time1);
        });
        $('.banner_wrapper').on('mouseout', function () {
        	clearInterval(time1);
            move();
        });
        
        $('.banner_wrapper .indicators').on('click', 'li', function() {
        	var newIndex = $(this).index();
        	t = newIndex - currentIndicators;
        	if (t > 0) {
        		current += t;
        		if(current%4==0) {
            		$('#bannerRight').addClass('dark_bg');
            		$('#bannerAllPro .banner_list').addClass('dark_bg');
            	} else {
            		$('#bannerRight').removeClass('dark_bg');
            		$('#bannerAllPro .banner_list').removeClass('dark_bg');
    			}
                $('.banner_wrapper').find('.indicators li').removeClass('active');
                $('.banner_wrapper').find('.indicators li:eq('+current%imgLen+')').addClass('active');
                current_pos = -current * distance;
                $scroll.animate({
                    left: current_pos
                }, 1000, 'linear', function () {
                    if (current == imgLen * 2 - 1) {
                        $scroll.css({ left: -(imgLen - 1) * distance });
                        current = imgLen - 1;
                    }
                	currentIndicators = newIndex;
                });
			} else if (t < 0) {
				current += t;
				if(current%4==0) {
	        		$('#bannerRight').addClass('dark_bg');
	        		$('#bannerAllPro .banner_list').addClass('dark_bg');
	        	} else {
	        		$('#bannerRight').removeClass('dark_bg');
	        		$('#bannerAllPro .banner_list').removeClass('dark_bg');
				}
				$('.banner_wrapper').find('.indicators li').removeClass('active');
                $('.banner_wrapper').find('.indicators li:eq('+current%imgLen+')').addClass('active');
	            current_pos = -current * distance;
	            $scroll.animate({
	                left: current_pos
	            }, 1000, 'linear', function () {
	                if (current == 0) {
	                    $scroll.css({ left: -imgLen * distance });
	                    current = imgLen;
	                }
	            	currentIndicators = newIndex;
	            });
			} else {
				return;
			}
		});
        
        function move() {
            time1 = setInterval(next, 10000);
        }

        function next() {
            current++;
            $('.banner_wrapper').find('.indicators li').removeClass('active');
            $('.banner_wrapper').find('.indicators li:eq('+current%imgLen+')').addClass('active');
            currentIndicators = current%imgLen;
            current_pos = -current * distance;
        	if(current%4==0) {
        		$('#bannerRight').addClass('dark_bg');
        		$('#bannerAllPro .banner_list').addClass('dark_bg');
        	} else {
        		$('#bannerRight').removeClass('dark_bg');
        		$('#bannerAllPro .banner_list').removeClass('dark_bg');
			}
            $scroll.animate({
                left: current_pos
            }, 1000, 'linear', function () {
                if (current == imgLen * 2 - 1) {
                    $scroll.css({ left: -(imgLen - 1) * distance });
                    current = imgLen - 1;
                }
            });
        }

        /*function pre() {
            current--;
            current_pos = -current * distance;
            $scroll.animate({
                left: current_pos
            }, 1000, 'linear', function () {
                if (current == 0) {
                    $scroll.css({ left: -imgLen * distance });
                    current = imgLen;
                }
            });
        }*/
        
        setWidth();
        $(window).on('resize', setWidth);
        function setWidth() {
        	if (isInit) {
        		clearInterval(time1);
			}
        	isInit = true;
        	
            var screenWidth = $(window).width();
            if (screenWidth > imgMaxWidth) {
            	screenWidth = imgMaxWidth;
    		} else if (screenWidth < 1300) {
    			screenWidth = 1300;
			}
            distance = screenWidth;
            $scroll.width(screenWidth*imgLen*2);
            $scroll.find('.banner_slide').each(function(index,item) {
            	$(item).width(screenWidth);
            });
            $scroll.css({ left: -current * distance });
            move();
		}
	})();