自适应屏幕宽度的轮播图

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这里调整(反正我是这么调整的。)
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值