Javascript 用于滑块式引导转盘的左右按钮
我想在单击时左右滑动图像。为此，我使用jquery。但问题是，当我继续单击右侧时，div向右移动，显示空白。我试过了，但没有解决。我是jquery的新手Javascript 用于滑块式引导转盘的左右按钮,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在单击时左右滑动图像。为此，我使用jquery。但问题是，当我继续单击右侧时，div向右移动，显示空白。我试过了，但没有解决。我是jquery的新手 <!DOCTYPE html><html class=''> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html><html class=''>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style class="cp-pen-styles">
.row_outer {
*overflow-x: auto;
width: 100%;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 326px;
height: 192px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 326px;
height: 192px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.tile__details:before {
content: '▶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
color: #fff;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
color: #fff;
}
.row__inner:hover {
-webkit-transform: translate3d(-72.5px, 0, 0);
transform: translate3d(-72.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(215px, 0, 0);
transform: translate3d(215px, 0, 0);
}
.buttons{
position: absolute;
width: 100%;
margin-right: 10px;
font-size: 20px;
margin-top: -190px;
}
.buttons button{
height: 100%;
padding: 7px 20px;
color: #fa8f33;
border: 1px solid
}
.left{
float: left;
}
.right{
float: right;
}
/* Sweep To Right */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fa8f33;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Sweep To Left */
.hvr-sweep-to-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-left:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fa8f33;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
color: white;
}
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style></head><body>
<div class="contain">
<div class="row_outer">
<div class="row__inner">
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<button class="left hvr-sweep-to-left " id="left"><span><i class="fa fa-angle-double-left" aria-hidden="true"></i>
</span></button>
<button href="" class="right hvr-sweep-to-right " id="right"><span><i class="fa fa-angle-double-right" aria-hidden="true"></i>
</span></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( "#right" ).click(function() {
$( ".tile" ).animate({ "left": "+=365px" }, "1000" );
});
$( "#left" ).click(function(){
$( ".tile" ).animate({ "left": "-=365px" }, "1000" );
});
</script>
</body></html>
.罗尤街{
*溢出-x：自动；
宽度：100%；
}
.row_uu内部{
-webkit转换：450ms-webkit转换；
转换：450ms-webkit转换；
转换：450ms转换；
转换：450ms转换，450ms-webkit转换；
字号：0；
空白：nowrap；
利润率：70.3125px 0；
垫底：10px；
}
.瓷砖{
位置：相对位置；
显示：内联块；
宽度：326px；
高度：192px；
右边距：10px；
字体大小：20px；
光标：指针；
-webkit转换：450ms全部；
过渡：450ms全部；
-webkit变换原点：左中；
变换原点：左中；
}
.tile\uu img{
宽度：326px；
高度：192px；
-o-对象配合：盖；
对象匹配：覆盖；
}
.瓷砖详细信息{
位置：绝对位置；
底部：0；
左：0；
右：0；
排名：0；
字体大小：10px；
不透明度：0；
背景：-webkit线性梯度（底部，rgba（0,0,0,0.9）0%，rgba（0,0,0,0）100%）；
背景：线性梯度（到顶部，rgba（0,0,0,0.9）0%，rgba（0,0,0,0）100%）；
-webkit转换：450ms不透明度；
过渡：450ms不透明度；
}
.tile_____详情：之后，
.tile\uuu详细信息：之前{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
显示：#000；
}
.tile\uuu详细信息：之后{
利润上限：-25px；
左边距：-25px；
宽度：50px；
高度：50px；
边框：3px实心#ecf0f1；
线高：50px；
文本对齐：居中；
边界半径：100%；
背景：rgba（0,0,0,0.5）；
z指数：1；
}
.tile\uuu详细信息：之前{
内容:'▶';
左：0；
宽度：100%；
字体大小：30px；
左边距：7px；
利润上限：-18px；
文本对齐：居中；
z指数：2；
颜色：#fff；
}
.tile:hover.tile\u详细信息{
不透明度：1；
}
.tile___标题{
位置：绝对位置；
底部：0；
填充：10px；
颜色：#fff；
}
.行\内部：悬停{
-webkit转换：translate3d（-72.5px，0，0）；
变换：translate3d（-72.5px，0，0）；
}
.row\uu-inner:悬停.tile{
不透明度：0.3；
}
.row\uuu内部：悬停。磁贴：悬停{
-webkit转换：比例（1.5）；
转换：比例（1.5）；
不透明度：1；
}
.tile:悬停~.tile{
-webkit转换：translate3d（215px，0，0）；
变换：translate3d（215px，0，0）；
}
.按钮{
位置：绝对位置；
宽度：100%；
右边距：10px；
字体大小：20px；
利润上限：-190px；
}
.按钮{
身高：100%；
填充：7px 20px；
颜色：#fa8f33；
边框：1px实心
}
.左{
浮动：左；
}
.对{
浮动：对；
}
/*向右扫*/
.hvr向右扫掠{
显示：内联块；
垂直对齐：中间对齐；
-webkit转换：透视图（1px）translateZ（0）；
变换：透视图（1px）translateZ（0）；
长方体阴影：0 0 1px透明；
位置：相对位置；
-webkit转换属性：颜色；
过渡性质：颜色；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
}
.hvr向右扫掠：之前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景#fa8f33；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换源：0.50%；
变换原点：0.50%；
-webkit转换属性：转换；
过渡性质：变换；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
-webkit过渡计时功能：缓解；
过渡定时功能：缓解；
}
.hvr向右扫掠：悬停，.hvr向右扫掠：聚焦，.hvr向右扫掠：激活{
颜色：白色；
}
.hvr向右扫掠：悬停：之前，.hvr向右扫掠：焦点：之前，.hvr向右扫掠：活动：之前{
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
/*向左扫*/
.hvr向左扫掠{
显示：内联块；
垂直对齐：中间对齐；
-webkit转换：透视图（1px）translateZ（0）；
变换：透视图（1px）translateZ（0）；
长方体阴影：0 0 1px透明；
位置：相对位置；
-webkit转换属性：颜色；
过渡性质：颜色；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
}
.hvr向左扫掠：之前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景#fa8f33；
-webkit转换：scaleX（0）；
变换：scaleX（0）；
-webkit转换来源：100%50%；
变换原点：100%50%；
-webkit转换属性：转换；
过渡性质：变换；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
-webkit过渡计时功能：缓解；
过渡定时功能：缓解；
}
.hvr向左扫掠：悬停，.hvr向左扫掠：聚焦，.hvr向左扫掠：激活{
颜色：白色；
}
.hvr向左扫掠：悬停：之前，.hvr向左扫掠：焦点：之前，.hvr向左扫掠：活动：之前{
-webkit转换：scaleX（1）；
变换：scaleX（1）；
}
高档
高档
高档
高档
高档
高档
高档
高档
var slideIndex = 1;
var length = $(".tile").length;
$( "#right" ).click(function() {
if(slideIndex != 1){
$( ".tile" ).animate({ "left": "+=365px" }, "1000" );
slideIndex--;
}
});
$( "#left" ).click(function() {
if(slideIndex >= length-1 ){
}else{
$( ".tile" ).animate({ "left": "-=365px" }, "1000" );
slideIndex++;
}
});
var $par = $('.row_outer').scrollLeft(546) ;
$('.right, .left').click(function( e ) {
e.preventDefault();
var n = $(this).hasClass("left") ? "+=182" : "-=182";
$par.animate({scrollLeft: n});
});