Question

我想知道如何将div装入滑块。滑块的意思是一个小盒子，当按下一个按钮时，一个窗口从侧面出现，浮动而不是按下，当再次按下按钮时它会缩回。我怎么能这样做？

我目前的代码列在这里：

<div class="rec-anime-list-container">
<ul class="rec-anime-list container">
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120xTITLE80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
    </li>     
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
    </li>    
</ul>

<style>
.rec-anime-list-container {
    float:right;
    text-decoration: none;
}
.rec-anime-list {
    max-width: 480px;
}
.container li{
    float:left;
    width:230px;
    margin-right:10px;
    margin-bottom: 10px;
}
.column {
    display:inline-block;
    vertical-align:middle
}
.rec-anime-title {
    margin-top:0;
    color:gray;
    width:100px;
}
.sub {
    color:blue;
    font-size:16px;
}
.dub {
    color:red;
    font-size:16px;
}
</style>

Answer 1

尝试使用jQuery并更改容器div样式 -

＆＃13;

$(document).ready(function() {
  $('.rec-anime-list-container').click(function() {
    if (parseInt($(this).css('right')) < 0) {
      $(this).css('right', '5px');
    } else {
      $(this).css('right', '-350px');
    }
  });
});

＆＃13;

.rec-anime-list-container {
    position: absolute;
    right: -350px;
    text-decoration: none;
    transition: right 300ms ease-in-out
}
.rec-anime-list {
    max-width: 480px;
}
.container li{
    float:left;
    width:230px;
    margin-right:10px;
    margin-bottom: 10px;
}
.column {
    display:inline-block;
    vertical-align:middle
}
.rec-anime-title {
    margin-top:0;
    color:gray;
    width:100px;
}
.sub {
    color:blue;
    font-size:16px;
}
.dub {
    color:red;
    font-size:16px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="rec-anime-list-container">
<ul class="rec-anime-list container">
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120xTITLE80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
    </li>     
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong></div>
    </li>    
</ul>
</div>

＆＃13;

Answer 2

使用Jquery

var linkedItems = itemA.LinkedItems.Concat(itemB.LinkedItems);

将此添加到您的css

total_imgs = 7     //total li elements
j=0;              
function imgSlider()
    {
      t = setTimeout(function () {
      $(".rec-anime-list li").removeClass("display");
      $("#list"+(j%total_imgs)).addClass("display");
      j++;
      imgSlider(j,0);
      },1000);
    }
imgSlider();  // initiate the slider

您可以在https://jsfiddle.net/skk46gu6/

找到工作模式

如何将div变成滑块？

2 个答案: