Javascript 水平div图像滚动动态宽度
我的水平图像滚动有问题。 某些解决方案存在许多威胁，但没有一种解决方案适合我：(Javascript 水平div图像滚动动态宽度,javascript,html,css,scroll,image-gallery,Javascript,Html,Css,Scroll,Image Gallery,我的水平图像滚动有问题。 某些解决方案存在许多威胁，但没有一种解决方案适合我：( <div id="scroll"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://lichtspielfotografie.com/wp-conten
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
.photos {
width:10000px;
height:100%;
position:absolute;
left:0;
margin-left:0;
margin-top: 0;
}
#scroll{
position:absolute;
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
margin-left:0;
left:0;
margin-top: -8,25%; }
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
$（文档）.ready（函数（）{
$（'html，body，*'）。鼠标滚轮（函数（e，delta）{
这个.scrollLeft-=（增量*20）；
e、 预防默认值（）；
});
});
我希望您能帮助我动态调整照片的宽度。我对这个问题感到非常失望。您可以尝试选择所有图像，并对所有图像进行迭代，获得它们的宽度，然后将其添加到容器中。另外，请注意，如果元素（图像）之间有一些间距，您也应该添加这些间距
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
// get all images in an html collection
var imgs = document.getElementsByTagName('img');
// initialize sum variable for holding all the images width sum
var sum = 0;
// iterate the html collection
for(var i = 0; i < imgs.length; i++) {
// wait for images to load
imgs[i].onload(function() {
sum += imgs[i].width;
});
}
// add the width to the parent element
document.getElementsByClassName('photos')[0].style.width = sum;
//获取html集合中的所有图像
var imgs=document.getElementsByTagName（'img'）；
//初始化sum变量以保存所有图像的宽度和
var总和=0；
//迭代html集合
对于（变量i=0；i <div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
.photos img {
margin: 0 2px;
}
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
。outerWidth（true） <div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
var totalWidth = 0;
$('.photos > img').each(function() {
totalWidth += $(this).outerWidth(true);
});
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
$('.photos').css('width', totalWidth + 'px');
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
$（document）.ready（function（）{}）。在这里，您放置了希望在加载html后执行的所有javascript代码
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
因此，在本例中，您将执行以下操作：
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
$(document).ready(function() {
// ... other js code here ...
var totalWidth = 0;
$('.photos > img').each(function() {
totalWidth += $(this).outerWidth(true);
});
// ... other js code here ...
});
您还可以将代码放入另一个js文件中，并将其加载到js库（如jQuery）下方的头部。非常感谢您的快速回答。我不熟悉stackoverflow和整个编程过程。你的想法听起来不错，但我不明白如何将这个javascriptcode片段实现到我的php文件中。我必须把它放在前面的部分吗？或者在特定部门之间非常感谢你。它对我起了作用，我学到了一些关于脚本的知识：）
<div id="scroll">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://lichtspielfotografie.com/wp-content/themes/lichtspiel/js/jquery.mousewheel.js?ver=3.8.1"></script>
<script type="text/javascript">
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 20);
e.preventDefault();
});
});
</script>
<div class="photos">
<?php global $post;
$src = '';
$breite='0px';
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID );
$attachments = get_posts($args); ?>
<?php
if ($attachments) {
foreach ( $attachments as $attachment ) {
$src = wp_get_attachment_image_src( $attachment->ID, "attached-image");
if ($src) {
echo '<img src='.$src[0];'';
}
echo ' height="100%"/img> ';
}}
?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->