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是你的循环2 jquery也是caroufredsel工作的第二个。

但我想将cycle2向左移动，因此它将位于caroufredsel的左侧。在我身体内部的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>

循环2 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

你的意思是把所有的东西都搬走了吗？如果是这样，只需稍微更新容器边距。

fiddle

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

我不确定我清楚地理解你的问题。希望它有所帮助！

Answer 2

您可以通过将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;
   }

Answer 3

元素静态定位时，top，left，bottom和right CSS属性不可用。静态定位是默认设置，位置是自动的。尝试将属性position: relative添加到您尝试移动的每个元素中。

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

3 个答案: