javascript - 如何更改屏幕上的 jquery 位置？

Question

在顶部的 html 文件中，我包含了 css 文件和 javascript:

<link rel="stylesheet" type="text/css" href="carousel.css">
        <link rel="stylesheet" type="text/css" href="vertical_slider.css">
        <link rel="stylesheet" type="text/css" href="glow-effect.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.carouFredSel.packed.js" type="text/javascript"></script>
        <script src="http://malsup.github.io/jquery.cycle2.js"></script>
        <script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
        <script src="java_script.js"></script>

jquery 是你的 cycle2jquery 也在工作，第二个 caroufredsel 都在工作。

但是我想将 cycle2 移到左边，这样它就会在 caroufredsel 的左边。在 body 内的 html 底部我有:

<div class="vertical-slider-container">
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev1" class="vertical-slider-nav vertical-slider-nav-up" />
    <div class="slideshow"
         data-cycle-fx="carousel"
         data-cycle-timeout="3000"
         data-cycle-next="#next1"
         data-cycle-prev="#prev1"
         data-cycle-carousel-visible="3"
         data-cycle-carousel-vertical="true">

        <img src="http://malsup.github.io/images/beach1.jpg" />
        <img src="http://malsup.github.io/images/beach2.jpg" />
        <img src="http://malsup.github.io/images/beach3.jpg" />
        <img src="http://malsup.github.io/images/beach4.jpg" />
        <img src="http://malsup.github.io/images/beach5.jpg" />
        <img src="http://malsup.github.io/images/beach9.jpg" />
    </div>
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next1" class="vertical-slider-nav vertical-slider-nav-down" />
</div>

和cycle2 css文件内容:

.vertical-slider-container {
    background: #fff;
    border: 20px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    margin: 40px auto;
    position: relative;
    width: 120px;
}

.slideshow {
    background: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slideshow img {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
}

.vertical-slider-nav {
    color: rgba(0,0,0,0.8);
    cursor: pointer;
    display: block;
    height: 40px;
    margin-left: -20px;
    left: 50%;
    z-index: 10;
    position: absolute;
    overflow: hidden;
    opacity: 0;
    text-decoration: none;
    width: 40px;
    transition: all .3s ease;
}

.vertical-slider-nav-up {
    top: -60px;
}

.vertical-slider-container:hover .vertical-slider-nav-up:hover {
    opacity: 1;
}

.vertical-slider-container:hover .vertical-slider-nav-up {
    top: -20px;
    opacity: 0.7;
}

.vertical-slider-nav-down {
    bottom: -60px;
}

.vertical-slider-container:hover .vertical-slider-nav-down:hover {
    opacity: 1;
}

.vertical-slider-container:hover .vertical-slider-nav-down {
    bottom: -20px;
    opacity: 0.7;
}![enter image description here][1]

我尝试更改 css 代码中许多属性的值，但没有任何效果。

编辑

我的意思是我已经在中间有一个 jquery。我想将 cycle2 向左移动一点，以便它位于另一个大图像的左侧。这是我编辑的屏幕截图，我从中心取出 cycle2 并将其粘贴到我想要的位置。

Answer 1

您可以通过将 float:left 应用于 .vertical-slider-container 类来将循环 2 向左移动

   .vertical-slider-container {
      background: #fff;
      border: 20px solid #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.2);
      margin-top: 40px;
      float: left;
      position: relative;
      width: 120px;
   }