Question

考虑到图像位于for循环中，我想在滚动时将图像编号显示在固定位置。有谁知道怎么做？解决方案对我的项目有很大的帮助。

 <style>
     #rightCol{
        overflow-x: hidden;
        overflow-y: scroll;
        max-height: 82vh;
    }
    body{
        overflow:hidden;
    }
 </style>

 <div class="row">
    <div class="col-md-9" style="padding:0; border:ridge; " id="rightCol">
    <img class="img-responsive" src="<?php echo base_url('assets/images/image_1.jpg') ?>" />
    <br>
    <img class="img-responsive" src="<?php echo base_url('assets/images/image_2.jpg') ?>" />
    <br>
    <img class="img-responsive" src="<?php echo base_url('assets/images/image_3.jpg') ?>" />
    <br>
    <img class="img-responsive" src="<?php echo base_url('assets/images/image_4.jpg') ?>" />
    <br>
    <img class="img-responsive" src="<?php echo base_url('assets/images/image_5.jpg') ?>" />
    <br>
    <img class="img-responsive" src="<?php echo base_url('assets/images/image_6.jpg') ?>" />
    <br>
    </div>
 </div>

Answer 1

因此，您希望找到第一张可见的图像，并将其视为您的可见图像。使用变量scroll_line，您可以调整窗口内图像应计入当前的距离。

$(document).scroll(scrolled)
$(document).ready(scrolled)

var scroll_line = 32;

function scrolled(){
	var images = $('.img-responsive') // get all images via classname
	for(var i=0;i<images.length;i++){
		var pos = images.eq(i).offset().top - $(document).scrollTop() // get absolute position of image regarding scroll
		if(pos>scroll_line){ // image is inside screen
			break // found image in screen, done
		}
	}
	var current_image = i;
	
	$('#image_number').html('Image Nr. '+current_image) // output image number (assuming your display has id 'image_number')
}

#image_number{
  position: fixed;
  top: 16px;
  right: 16px;
  color: red;
  font-size: 16pt;
  font-weight: bold;
  background-color: white;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="image_number"></div>

<img class="img-responsive" src="https://www.w3schools.com/css/img_fjords.jpg">
<br>
<img class="img-responsive" src="https://www.w3schools.com/css/img_fjords.jpg">
<br>
<img class="img-responsive" src="https://www.w3schools.com/css/img_fjords.jpg">
<br>
<img class="img-responsive" src="https://www.w3schools.com/css/img_fjords.jpg">
<br>
<img class="img-responsive" src="https://www.w3schools.com/css/img_fjords.jpg">
<br>
<img class="img-responsive" src="https://www.w3schools.com/css/img_fjords.jpg">
<br>

Answer 2

我希望您能理解以下代码示例：

$(document).scroll(scroll)

function scroll(){
    var images = $('.img-responsive')
    
    for(var i=0;i<images.length;i++){
        var pos = images.eq(i).offset().top - $(document).scrollTop()
        if(pos>0){
            curr_img = i
            break
        }
    }
    var curr_img = i+1;

    $('#image_no').html('Number :'+curr_img) 
}

img{
  max-width:50%;
}
#image_no{
  position:fixed;
  top:0;
  color:red;
  width: 100%;
background: white;
  margin-bottom:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
     <div id="image_no">Number : 0</div>
    <div class="col-md-9 main_img_class" style="padding:0;margin-top: 7%;border:ridge; " id="rightCol">
    <img class="img-responsive" src="http://www.fitzmuseum.cam.ac.uk/sites/default/files/1_0.jpg" />
    <br>
    <img class="img-responsive" src="http://www.fitzmuseum.cam.ac.uk/sites/default/files/1_0.jpg" />
    <br>
    <img class="img-responsive" src="http://www.fitzmuseum.cam.ac.uk/sites/default/files/1_0.jpg" />
    <br>
    <img class="img-responsive" src="http://www.fitzmuseum.cam.ac.uk/sites/default/files/1_0.jpg" />
    <br>
    <img class="img-responsive" src="http://www.fitzmuseum.cam.ac.uk/sites/default/files/1_0.jpg" />
    <br>
    <img class="img-responsive" src="http://www.fitzmuseum.cam.ac.uk/sites/default/files/1_0.jpg" />
    <br>
    </div>
    </div>

如何在滚动时显示每个图像的计数

2 个答案: