自适应屏幕宽度的轮播图

最新推荐文章于 2023-03-02 15:21:20 发布

转载最新推荐文章于 2023-03-02 15:21:20 发布 · 1.2w 阅读

本文介绍了一种使用HTML、CSS及jQuery实现轮播图全屏显示的方法，并详细解释了如何通过设置图片高度和宽度使其自适应浏览器窗口大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

<div id="bodyBox">

			<div id="bodyPage">
		   	  <img src="img/img1.jpg" class="bg">
		      <img src="img/1.jpg" class="bg">
		      <img src="img/2.jpg" class="bg">
		      <img src="img/3.jpg" class="bg">
		    </div>
		    
		</div>

js部分

（一）

<script type="text/javascript">
		$(document).ready(function(e) {
		    
		   $("#bodyPage").fullImages({
			   ImgWidth: 1920,
			   ImgHeight: 980,
			   autoplay :  3500,
			   fadeTime : 1500
		   });
			
		});
		</script>

（二）

(function($) {

    $.fn.fullImages = function(fisher) {

        var fisher = $.extend({
            ImgWidth: null,
            ImgHeight: null,
            autoplay: null,
            fadeTime: null
        },
        fisher)

        var count = $(this).find("img").length; 
        var nValue = 0;
        var oValue = 0;
        var _this = $(this);
       
	    _this.find("img:eq(0)").fadeIn("slow");

        var setIntervalImg = setInterval(function() {

            nValue++
            if (nValue == count) {
                nValue = 0;
            }
            _this.find(" img:eq(" + (nValue) + ")").fadeIn(fisher.fadeTime);
            _this.find(" img:eq(" + (oValue) + ")").fadeOut(fisher.fadeTime);
            oValue = nValue % count;

        },
        fisher.autoplay);

        resizeFun();
        $(window).resize(function(e) {
            resizeFun();
        });

        function resizeFun() {

            /*轮播图全屏*/
            var imgH = fisher.ImgHeight;
            var imgW = fisher.ImgWidth;
            var hValue = imgH / imgW;
            var wValue = imgW / imgH;

            if ($(window).width() / $(window).height() < wValue) {

                _this.find("img").css("width", $(window).height() * wValue);
                _this.find("img").css("margin-left", -(($(window).height() * wValue) - $(window).width()) / 2);
                

            } else {

                _this.find("img").css("width", $(window).width());
                _this.find("img").css("margin-left", 0);
              

            }

        }

    };

} (jQuery));

css部分

#bodyBox{
	width: 100%;
	height: 575px;
}
#bodyPage{ width:100%; min-height:575px; height:575px; position:relative; top:0; left:0; }
img.bg { height:575px;position:absolute; top: 0px; left: 0px; z-index:1; display:none;}

要调整图片的高度一定要在css里面的min-height这里调整（反正我是这么调整的。）