JavaScript平滑内容滑块

时间：2017-03-14 15:19:19

标签： javascript

所以，我正在开展一个项目，我需要一个内容滑块才能顺畅，我找不到办法。我需要在div元素和代码之间进行平滑过渡，以便当我在div时它出现在上面的小球上。我在javascript很新，必须有很多错误但我真的需要帮助。

#wrapper {
    width: 2200px;
    transform: translate3d(0, 0, 0);
    transition: transform .5s ease-in-out;
}
.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
}
#itemOne {
    background-color: #ADFF2F;
}
#itemTwo {
    background-color: #FF7F50;
}
#itemThree {
    background-color: #1E90FF;
}
#itemFour {
    background-color: #DC143C;
}
#contentContainer {
	margin-left: 20px;  
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
.caixa {
	width: 600px;
	height: 360px;
}
.seta1 {
	cursor: pointer;
	margin-top: 170px;
	float:left;
}
.seta2 {
	cursor: pointer;
	margin-top: 170px;
	float:right;
}
.butao {
	cursor: pointer;
	width: 5px;
	height: 16px;
	border-radius: 100px;
	border: solid black 2px;
	margin-left: 6px;
}
.butao:hover {
	background-color: grey;
}
.navegacao{
	margin-left: 245px;
	width: 120px;
	height: 40px;
}
#textoesquerda {
	float:left;
	width: 260px;
	height: 330px;
	margin-left: 10px;
	margin-top: 10px;
	background-color: black;
}
#textodireita {
	float: right;
    width: 260px;
	height: 330px;
	margin-right: 10px;
	margin-top: 10px;
	background-color: pink;
}
.mySlides {
	display:none
}
.w3-left, .w3-right, .w3-badge {
	cursor:pointer
}
.w3-badge {
	height:13px;
	width:13px;
	padding:0;
	border: solid black 1px;
}
<!DOCTYPE html>
<html>
 
<head>
<title>An Interesting Title Goes Here</title>
 
<link rel="stylesheet" type="text/css" href="style.css">

</head>
 

</style>

<body>
<div class="caixa">
<div class="seta1" onclick="plusDivs(-1)">&#10094;</div>
<div class="seta2" onclick="plusDivs(1)">&#10095;</div>
 <div id="contentContainer">
	 <div id="wrapper">
	    <div id="itemOne" class="content">
	    	<div id="textoesquerda">
	    		<p>
	    			
	    		</p>
	    	</div>
	    	<div id="textodireita">
	    		<p>
	    			
	    		</p>
	    	</div>
	    </div>
	    <div id="itemTwo" class="content"></div>
	    <div id="itemThree" class="content"></div>
	    <div id="itemFour" class="content"></div>
	</div>
 </div>
</div>

 <div class="navegacao">
 	<button class="butao" id="butao1" onclick="currentDiv(1)"></button>
    <button class="butao" id="butao2" onclick="currentDiv(2)"></button>
    <button class="butao" id="butao3" onclick="currentDiv(3)"></button>
    <button class="butao" id="butao4" onclick="currentDiv(4)"></button>
 </div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var y = document.getElementsByClassName("wrapper")
  var x = document.getElementsByClassName("content");
  var dots = document.getElementsByClassName("itemLinks");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

如果有帮助，你可以从这个引导主题https://getbootstrap.com/examples/carousel/

中获取灵感

或来自http://sorgalla.com/jcarousel/

答案 1 :(得分：0)

您必须相对于wrapper移动slideIndex div，而不是显示/隐藏内容。我将包装div设为position:relative并通过javascript设置相对于slideIndex的左侧位置。平滑动画由CSS过渡处理。

#wrapper {
    width: 2200px;
    position:relative;
    transform: translate3d(0, 0, 0);
    transition: all .5s ease-in-out; //changes made
    left:0;
}
.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
}
#itemOne {
    background-color: #ADFF2F;
}
#itemTwo {
    background-color: #FF7F50;
}
#itemThree {
    background-color: #1E90FF;
}
#itemFour {
    background-color: #DC143C;
}
#contentContainer {
	margin-left: 20px;  
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
.caixa {
	width: 600px;
	height: 360px;
}
.seta1 {
	cursor: pointer;
	margin-top: 170px;
	float:left;
}
.seta2 {
	cursor: pointer;
	margin-top: 170px;
	float:right;
}
.butao {
	cursor: pointer;
	width: 5px;
	height: 16px;
	border-radius: 100px;
	border: solid black 2px;
	margin-left: 6px;
}
.butao:hover {
	background-color: grey;
}
.navegacao{
	margin-left: 245px;
	width: 120px;
	height: 40px;
}
#textoesquerda {
	float:left;
	width: 260px;
	height: 330px;
	margin-left: 10px;
	margin-top: 10px;
	background-color: black;
}
#textodireita {
	float: right;
    width: 260px;
	height: 330px;
	margin-right: 10px;
	margin-top: 10px;
	background-color: pink;
}
.mySlides {
	display:none
}
.w3-left, .w3-right, .w3-badge {
	cursor:pointer
}
.w3-badge {
	height:13px;
	width:13px;
	padding:0;
	border: solid black 1px;
}
<!DOCTYPE html>
<html>
 
<head>
<title>An Interesting Title Goes Here</title>
 
<link rel="stylesheet" type="text/css" href="style.css">

</head>
 

</style>

<body>
<div class="caixa">
<div class="seta1" onclick="plusDivs(-1)">&#10094;</div>
<div class="seta2" onclick="plusDivs(1)">&#10095;</div>
 <div id="contentContainer">
	 <div id="wrapper">
	    <div id="itemOne" class="content">
	    	<div id="textoesquerda">
	    		<p>
	    			1
	    		</p>
	    	</div>
	    	<div id="textodireita">
	    		<p>
	    			1
	    		</p>
	    	</div>
	    </div>
	    <div id="itemTwo" class="content">2</div>
	    <div id="itemThree" class="content">3</div>
	    <div id="itemFour" class="content">4</div>
	</div>
 </div>
</div>

 <div class="navegacao">
 	<button class="butao" id="butao1" onclick="currentDiv(1)"></button>
    <button class="butao" id="butao2" onclick="currentDiv(2)"></button>
    <button class="butao" id="butao3" onclick="currentDiv(3)"></button>
    <button class="butao" id="butao4" onclick="currentDiv(4)"></button>
 </div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var y = document.getElementById("wrapper");
  var x = document.getElementsByClassName("content");
  var dots = document.getElementsByClassName("butao");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }

  //changes made
  y.style.left = '-' + ((slideIndex-1)*x[slideIndex-1].offsetWidth) + "px";
    
  dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>

答案 2 :(得分：0)

更新的答案：

<强> CSS： 

#wrapper {
    width: 2200px;
    position:relative;
    transform: translate3d(0, 0, 0);
    transition: all .5s ease-in-out; //changes made
    left:0;
}
.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
}
#itemOne {
    background-color: #ADFF2F;
}
#itemTwo {
    background-color: #FF7F50;
}
#itemThree {
    background-color: #1E90FF;
}
#itemFour {
    background-color: #DC143C;
}
#contentContainer {
    margin-left: 20px;  
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
.caixa {
    width: 600px;
    height: 360px;
}
.seta1 {
    cursor: pointer;
    margin-top: 170px;
    float:left;
}
.seta2 {
    cursor: pointer;
    margin-top: 170px;
    float:right;
}
.butao {
    cursor: pointer;
    width: 5px;
    height: 16px;
    border-radius: 100px;
    border: solid black 2px;
    margin-left: 6px;
}
.butao:hover {
    background-color: grey;
}
.navegacao{
    margin-left: 245px;
    width: 120px;
    height: 40px;
}
#textoesquerda {
    float:left;
    width: 260px;
    height: 330px;
    margin-left: 10px;
    margin-top: 10px;
    background-color: black;
}
#textodireita {
    float: right;
    width: 260px;
    height: 330px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: pink;
}
.mySlides {
    display:none
}
.w3-left, .w3-right, .w3-badge {
    cursor:pointer
}
.w3-badge {
    height:13px;
    width:13px;
    padding:0;
    border: solid black 1px;
}

HTML / JS：          

<head>
<title>An Interesting Title Goes Here</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>


</style>

<body>
<div class="caixa">
<div class="seta1" onclick="plusDivs(-1)">&#10094;</div>
<div class="seta2" onclick="plusDivs(1)">&#10095;</div>
 <div id="contentContainer">
     <div id="wrapper">
        <div id="itemOne" class="content">
            <div id="textoesquerda">
                <p>
                    1
                </p>
            </div>
            <div id="textodireita">
                <p>
                    1
                </p>
            </div>
        </div>
        <div id="itemTwo" class="content">2</div>
        <div id="itemThree" class="content">3</div>
        <div id="itemFour" class="content">4</div>
    </div>
 </div>
</div>

 <div class="navegacao">
    <button class="butao" id="butao1" onclick="currentDiv(1)"></button>
    <button class="butao" id="butao2" onclick="currentDiv(2)"></button>
    <button class="butao" id="butao3" onclick="currentDiv(3)"></button>
    <button class="butao" id="butao4" onclick="currentDiv(4)"></button>
 </div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var y = document.getElementById("wrapper");
  var x = document.getElementsByClassName("content");
  var dots = document.getElementsByClassName("butao");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }

  //changes made
  y.style.left = '-' + ((slideIndex-1)*x[slideIndex-1].offsetWidth) + "px";

  dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>
相关问题
最新问题