j查询轮播/图库无法正常工作

jQuery carousel / Gallery not working correctly

本文关键字：常工作 工作 查询      更新时间：2023-09-26

我是JS的新手，并且在破解一些问题时遇到了真正的问题，希望有人可以帮助我。

  1. 图像未变为全尺寸
  2. 如果您调整大小并单击导航，则会以 100 英里/小时的速度继续前进
  3. 当您调整大小时，它无法正确调整图像/轮播的大小
  4. 我尝试添加getImageSize函数来获取更改的图像大小，并且设置 LIS，但这不起作用 以太
    5. 币

正如我所说，我非常新，这是一项新工作，所以我真的需要今天完成这项工作:(

.JS：

jQuery(document).ready(function ($) {
  //get width of document here and set to li
    setConfig();
    //getImageSizes();
    $(window).resize(function () {
        setConfig();
        //getImageSizes();
    });
    var slideCount, slideWidth, slideHeight, sliderULWidth;
    function setConfig() {
        $('#gallery-slider ul li').css({
            "width": ($(window).width() - 200), "height": $(window).height() - 200
        });
        slideCount = $('#gallery-slider ul li').length;
        slideWidth = $('#gallery-slider ul li').width();
        slideHeight = $('#gallery-slider ul li').height();
        sliderULWidth = slideCount * slideWidth;
        $('#gallery-slider').css({
            width: slideWidth,
            height: slideHeight
        });
        $('#gallery-slider ul').css({
            width: sliderULWidth,
            marginLeft: -slideWidth
        });
        $('#gallery-slider ul li:last-child').prependTo('#gallery-slider ul');

        $('#gallery-slider a.control_prev').on('click', function () {
            moveLeft();
            return false;
        });
        $('#gallery-slider a.control_next').on('click', function () {
            moveRight();
            return false;
        });
    }
    function getImageSizes() {
        $("#gallery-slider ul li img").each(function () {
            var $this = $(this);
            $('#gallery-slider ul li').css({ "width": $this.width(), "height": $this.height() });
            console.log($this.width());
            console.log($this.height());
        });
    }
    function moveLeft() {
        $('#gallery-slider ul').animate({
            left: +slideWidth
        }, 200, function () {
            $('#gallery-slider ul li:last-child').prependTo('#gallery-slider ul');
            $('#gallery-slider ul').css('left', '');
        });
    }
    function moveRight() {
        $('#gallery-slider ul').animate({
            right: -slideWidth
        }, 200, function () {
            $('#gallery-slider ul li:first-child').appendTo('#gallery-slider ul');
            $('#gallery-slider ul').css('right', '');
        });
    }
});

http://codepen.io/anon/pen/MYwPXQ

提前致谢

已修复http://codepen.io/choukroun/pen/OPVBdR

请注意，您在moveright()

中使用了

left: +slideWidth

在moveleft()

right: -slideWidth

当您使用 2 个方向时会令人困惑，通常最好只使用left/right为了获得更好的性能，我会建议你使用transform: translate

我不会从头开始编码。有许多jQuery插件（见这里）正是你需要的。例如 http://fotorama.io/就是这样一个插件。请参阅下面的示例。你也可以在这里找到jsFiddle。

另外 galleria.io 是一个很好的画廊滑块。我已经在生产中将其用于较小的网页。

这要容易得多。请查看fotorama页面以进行自定义（例如自动播放，缩略图等）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.2/fotorama.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.2/fotorama.css" rel="stylesheet" />
<div class="fotorama">
  <img src="http://s.fotorama.io/1.jpg" />
  <img src="http://s.fotorama.io/2.jpg" />
</div>

相关文章：