jQuery提取图像的主色升级版本图片轮播，主题色跟着变化

图片主题色在图片所占比例较大的页面中，能够配合图片起到很好视觉效果，给人一种和谐、一致的感觉。同时也可用在图像分类，搜索识别等方面。通常主题色的提取都是在后端完成的，前端将需要处理的图片以链接或id的形式提供给后端，后端通过运行相应的算法来提取出主题色后，再返回相应的结果。

但是过程麻烦所以今天分享个插件直接获取

上次的分享不知道为什么用着轮播一轮就不好使了，于是上网查找等有很好的用法

 

 

需要插件：jquery.adaptive-backgrounds.js

其他jq、swper自行引入

JS

$(function(){
	//轮播	
	var mySwiper = new Swiper ('.swiper-container', {
	    loop: true,
	    autoplay : 3000,
		autoplayDisableOnInteraction : false,
	    // 如果需要分页器
	    pagination: '.swiper-pagination'
	});
	
	//获取图片颜色值
	function getcolor(){
		var img = document.getElementsByClassName('swiper-slide-active')[0].children[0];
		var colors = RGBaster.colors(img, {
		    paletteSize: 30,
		    success: function(colors){
		      img.style.borderColor = colors.palette[0];	
		      var makeDivWithClassAndBGColor = function(klass, color){
		        var div = document.createElement("div");
		        div.className = klass;
		        div.style.backgroundColor = color;
		        return div;
		      };
		      console.log("-----------------------------------------------");
		      console.log("Dominant color:", colors.dominant);
		      console.log("Secondary color:", colors.secondary);
		      console.log("Palette length:", colors.palette.length);
		      console.log("-----------------------------------------------");
		      //console.log("Dominant color:", colors.secondary);
		      var  bgcolor = colors.secondary;
		      $('.boxbg').css("background",bgcolor);
		    }
		});
	    
	};
	
	setint = setInterval(getcolor,10);
	getcolor();

});

HTML

<main class="container">
<!--轮播-->
	<div class="swiper-box">
		<div class="boxbg"></div>
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide"><img src="http://g.hiphotos.baidu.com/image/pic/item/5243fbf2b211931376d158d568380cd790238dc1.jpg"></div>
			        <div class="swiper-slide"><img src="http://a.hiphotos.baidu.com/image/pic/item/4a36acaf2edda3ccc4a53e450ce93901213f9216.jpg"></div>
			        <div class="swiper-slide"><img src="http://a.hiphotos.baidu.com/image/pic/item/35a85edf8db1cb1371b75377d054564e93584bf3.jpg"></div>
			        <div class="swiper-slide"><img src="http://h.hiphotos.baidu.com/image/pic/item/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg"></div>
			    </div>
			    <!-- 如果需要分页器 -->
			    <div class="swiper-pagination"></div>
		</div>
	</div>		
</main>

CSS

<style type="text/css">
			.container .swiper-box {
			    width: 100%;
			    height: 200px;
			    background: #fff;
			    position: relative;
			}
			.container .swiper-box .boxbg {
			    width: 100%;
			    height: 179px;
			    position: relative;
			    border-bottom-left-radius: 10px;
			    border-bottom-right-radius: 10px;
			    background: #8BA9E7;
			}
			.swiper-container {
			    width: 100%;
			    height: auto;
			    position: absolute;
			    top: 0;
			}
			.swiper-container img {
			    width: 90%;
			    height: 197px !important;
			    border-radius: 10px;
			    display: block;
			    height: 200px;
			    margin: 40px auto;
			    /* padding-top: 3px; */
			    box-shadow: 0px 3px 20px 1px #ddd;
			}
</style>

完整代码：https://download.csdn.net/download/qq_42396791/10751372