Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
<divid="carousel-example-generic"class="carouselslide"data-ride="carousel"> <!--Wrapperforslides--> <divclass="carousel-inner"role="listbox"> <divclass="itemactive"> <ahref="包含图片一文章路径"> <imgsrc="图片一路径"alt="图片一"onload="DrawImage(this)"/></a> <divclass="carousel-caption"> <h4class="alpha"> <astyle="color:white;"href="包含图片一文章路径">图片一标题</a> </h4> </div> </div> <divclass="item"> <ahref="包含图片二文章路径"> <imgsrc="图片二路径"alt="图片二"onload="DrawImage(this)"/> </a> <divclass="carousel-caption"> <h4class="alpha"> <astyle="color:white;"href="包含图片二文章路径">图片二标题</a> </h4> </div> </div> <divclass="item"> <ahref="包含图片三文章路径"> <imgsrc="图片三路径"alt="图片三"onload="DrawImage(this)"/> </a> <divclass="carousel-caption"> <h4class="alpha"> <astyle="color:white;"href="包含图片三文章路径">图片三标题</a> </h4> </div> </div> </div>
<!--导入插件-->
<scripttype="text/javascript"src="/static/plugins/thumb/js/jqthumb.js"></script>
<script>
functionDrawImage(hotimg)
{
$(hotimg).jqthumb({
classname:'jqthumb',
width:'100%',
height:'300px',
position:{y:'50%',x:'50%'},
zoom:'1',
method:'auto',
});
}
</script>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程