javascript - 如何在单击时在页面上滑动元素

Question

您好，我正在寻找一些资源来创建在下面的模型中看到的隐含的滑动功能(不要介意半褪色的元素) *注意:这并不是我的代码的样子，它只是模型。

使用这个函数，我只能将元素向右移动一次:

function slideRight(){
  var elem = document.getElementById('weekScroller');
  elem.style.left = (elem.style.left+290)+ 'px';
}

但这只会改变位置一次，每次单击箭头时我都需要元素继续滚动。另外，我想让滚动 Action 流畅而不是跳跃。

HTML:

<div id="weekScroller">
  <div class="weekScrollerDay">
    BOX 1
  </div>    
  <div class="weekScrollerDay" id="testID">
    BOX 2
  </div>    
  <div class="weekScrollerDay">
    BOX 3
  </div>        
  <div class="weekScrollerDay">
    BOX 4
  </div>    
  <div class="weekScrollerDay">
    BOX 5
  </div>    
</div>

<div id="scrollLeft" onclick="slideLeft()">
  Left
</div>
<div id="scrollRight" onclick="slideRight()">
  Right
</div>

CSS:

#scrollLeft{
  position: fixed;
  left: 35px;
  top: 50%;
  margin-top: -100px;
  background-color: #000;
  height: 40px;
  width: 40px;
  color: #fff;
}
#scrollRight{
  position: fixed;
  right: 35px;
  top: 50%;
  margin-top: -100px;
  background-color: #000;
  height: 40px;
  width: 40px;
  color: #fff;
}
#weekScroller{
  opacity: 1;
  position: fixed;
  top: 50%;
  margin-top: -200px;
  height: 400px;
  display: block;
  overflow:hidden;
}
.weekScrollerDay{
  opacity: 1;
  width: 280px;
  height: 390px;
  margin: 5px;
  background-color: rgb(200, 200, 200);
  float: left;
  display:inline-block;
}

Answer 1

有一个名为 Owl Carousel 的 Jquery 轮播我认为可以满足您的需求。请参阅代码段中的演示。

$(document).ready(function () {
    var carousel = $("#owl-demo");
  carousel.owlCarousel({
    navigation:true,
    navigationText: [
      "<i class='icon-chevron-left icon-white'><</i>",
      "<i class='icon-chevron-right icon-white'>></i>"
      ],
  });

  
});

.owl-theme .owl-controls{
	margin-top: 10px;
	text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
	color: #FFF;
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
	margin: 5px;
	padding: 3px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background: #869791;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
	text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
	display: block;
	width: 12px;
	height: 12px;
	margin: 5px 7px;
	filter: Alpha(Opacity=50);/*IE7 fix*/
	opacity: 0.5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: #869791;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
	height: auto;
	width: auto;
	color: #FFF;
	padding: 2px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

/* preloading images */
.owl-item.loading{
	min-height: 150px;
	background: url(AjaxLoader.gif) no-repeat center center
}

#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    height: 150px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
}

#owl-demo .owl-item > div{
  background : #42bdc2;
  text-align: center;
  padding:10x 0px;
  margin:3px;
  color: white;
  font-size:32px;
  border:1px white;
}

.wrapper-with-margin{
  margin:0px 50px;
}

 
.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
}
 
.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: -45px;
  top: 55px; 
}
 
.owl-theme .owl-controls .owl-buttons .owl-next{
  right: -45px;
  top: 55px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>

<div class="wrapper-with-margin">
<div id="owl-demo" class="owl-carousel">
     <div><img src="http://www.musicmatters.ie/images/bara2.jpg"></div>

     <div><img src="http://www.musicmatters.ie/images/volunteer2.jpg"></div>

     <div><img src="http://www.musicmatters.ie/images/volunteer1.jpg"></div>

     <div><img src="http://www.musicmatters.ie/images/choir.jpg"></div>

    <div><img src="http://www.musicmatters.ie/images/bara3.jpg"></div>
  
      <div><img src="http://www.musicmatters.ie/images/bara2.jpg"></div>

     <div><img src="http://www.musicmatters.ie/images/volunteer2.jpg"></div>

     <div><img src="http://www.musicmatters.ie/images/volunteer1.jpg"></div>

     <div><img src="http://www.musicmatters.ie/images/choir.jpg"></div>

    <div><img src="http://www.musicmatters.ie/images/bara3.jpg"></div>

</div>
</div>