Question

我有背景图片滑块。我想以非常流畅的方式滑动图像。

body {
  /* Location of the image */
  background-image: url(images/BACKGROUND1.jpg);


  /* Image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Image doesn't repeat */
  background-repeat: no-repeat;

  /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;

  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;

  /* SHORTHAND CSS NOTATION
   * background: url(background-photo.jpg) center center cover no-repeat fixed;
   */
background-position:0px 33px;


   }

/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(images/BACKGROUND1.jpg);
  }
    }
 #b1 { background-image: url(images/BACKGROUND1.jpg); }
#b2 { background-image: url(images/BACKGROUND2 .jpg); }
#b3 { background-image: url(images/BACKGROUND3.jpg); }
#b4 { background-image: url(images/BACKGROUND4.jpg); }
#b5 { background-image: url(images/BACKGROUND1.jpg); }
#b6 { background-image: url(images/BACKGROUND2.jpg); }
#b7 { background-image: url(images/BACKGROUND3.jpg); }
#b8 { background-image: url(images/BACKGROUND4.jpg); }
#b9 { background-image: url(images/BACKGROUND3.jpg); }
#b10 { background-image: url(images/BACKGROUND1.jpg); }


    <html>
       <a href="#">next/</a>
         <a href="#">previuous/</a>

    </body>

</html>

我想在点击时更改背景图片。我不是JavaScript的专家。任何人都可以帮助我吗？

Answer 1

尝试

bootstrap corousel js

这是一个简单的javascript框架，您可以使用它来满足您的要求。

下次当您提出任何问题时，请仔细检查您输入的字词的拼写并以清晰的方式解释。

Answer 2

根据您目前所拥有的内容，您要执行的操作是使用Javascript，以便将指定单击时的body ID替换为数组中的下一个（b1到b10）。这将处理背景图像之间的移动：

var body_ids = [
"b1",
"b2",
"b3",
"b4",
"b5",
"b6",
"b7",
"b8",
"b9",
"b10"
];
var current_body_id_index = 0;

var next_click = document.getElementById("click_next");
next_click.addEventListener("click", setNextBodyBackground);

var click_previous = document.getElementById("click_previous");
click_previous.addEventListener("click", setPreviousBodyBackground);


function setNextBodyBackground() {
  current_body_id_index++;
  if (current_body_id_index > 9) {
    current_body_id_index = 0;
  }
  document.body.id = body_ids[current_body_id_index];
}

function setPreviousBodyBackground() {
  current_body_id_index--;
  if (current_body_id_index < 0) {
    current_body_id_index = 9;
  }
  document.body.id = body_ids[current_body_id_index];
}

然后，为了你的双方之间的过渡，你可以添加这样的东西到你的CSS的“身体”部分：

-webkit-transition: background 0.6s linear;
  -moz-transition: background 0.6s linear;
    -o-transition: background 0.6s linear;
      transition: background 0.6s linear;

每次更改背景时都会创建一个过渡效果。您可以修改它以创建不同的效果。

我把所有这些都放在一个例子中here。

在背景中滑动图像

2 个答案: