Question

我有主div，里面有很多像网格一样的div。实际上现在水平滚动工作但我想像[this] [2]

那样制作幻灯片效果

enter image description here

必须根据屏幕尺寸进行滑动，而不是取决于div。

我试过这个

<!DOCTYPE html>
<html>

    <head>

        <!-- META -->
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
        <meta name = "apple-mobile-web-app-capable" content = "yes" /> 

        <style type="text/css">
            .fluidHeight {
                position: relative;
                width: 800px;
                height: 800px;
            }

            /* 
             * below 900px, switch to percentage based responsive height.
             * padding of 33.333% is calculated by using the 
             * image ratio 300px/900px = .333 * 100% = 33.333% 
             */
            @media screen and (max-width: 900px) {

                .fluidHeight {
                    height: 0;
                    padding: 0 0 33.333% 0;
                }

            }

            .sliderContainer {
                position: absolute;
                width: 800px;
                height: 800px;
            }

            .iosSlider {
                width: 800px;
                height: 800px;
                background: #aaa;
            }

            .iosSlider .slider {
                width: 100%;
                height: 100%;
            }

            .iosSlider .slider img {
                position: relative;
                top: 0;
                left: 0;
                width: 800px;
                margin: 0 0 0 0;
            }
            .div-body_2_col {
                -moz-column-count:2; /* Firefox */
                -webkit-column-count:2; /* Safari and Chrome */
                column-count:2;
                padding:5px;    
                height: 800px;
                }
        </style>

        <!-- jQuery library -->
        <script type="text/javascript" src = "../../../_lib/jquery-1.4.min.js"></script>
        <script type="text/javascript" src = "../../../_lib/jquery.easing-1.3.js"></script>

        <!-- iosSlider plugin -->
        <script src = "../../../_src/jquery.iosslider.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('.iosSlider').iosSlider({
                    snapToChildren: true,
                    desktopClickDrag: true,
                    infiniteSlider: true
                });

            });
        </script>

        <title>Ex #12: Image Slides</title>

    </head>

    <body>

        <div class = 'fluidHeight'>

            <div class = 'sliderContainer'>

                <div class = 'iosSlider'>

                    <div class = 'slider'>
                        <div class="div-body_2_col">
                        <div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

111.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">

2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div><div class="newspaper"  id="newspaper1" onClick="fn('newspaper1');">

1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit 
</div>

                    </div>
                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

任何人都可以帮助我

提前感谢

Answer 1

如果要将所有div移动到左侧，可以将它们放在外框中，然后将整个框移动到左侧。如果你只想移动一个div，你可以使用css转换，因为这不会影响你的布局（它只是覆盖/覆盖其他div）。如果你已经浮动div并且只想移动一个特定的div，那么避免其他人移动也是很棘手的（左边的负边距和右边的正边缘可能在这里工作）。

如何为单个div制作幻灯片效果？

1 个答案: