Javascript 我怎样才能将一个div转换成一个slider？

我在想我怎样才能把一个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>

title
[sub]


title
[dub]


title
[sub]


title
[dub]


title
[sub]


title
[dub]


.rec动画列表容器{
浮动：对；
文字装饰：无；
}
.rec动画列表{
最大宽度：480px；
}
李先生{
浮动：左；
宽度：230px；
右边距：10px；
边缘底部：10px；
}
.栏目{
显示：内联块；
垂直对齐：中间对齐
}
.rec动画名称{
边际上限：0；
颜色：灰色；
宽度：100px；
}
.sub{
颜色：蓝色；
字体大小：16px；
}
杜布先生{
颜色：红色；
字体大小：16px；
}

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

$（文档）.ready（函数（）{
$（'.rec动画列表容器'）。单击（函数（）{
if（parseInt（$（this.css（'right'））<0）{
$（this.css（'right'，'5px'）；
}否则{
$（this.css（'right'，'-350px'）；
}
});
});
.rec动画列表容器{
位置：绝对位置；
右：-350px；
文字装饰：无；
过渡：右300毫秒缓进缓出
}
.rec动画列表{
最大宽度：480px；
}
李先生{
浮动：左；
宽度：230px；
右边距：10px；
边缘底部：10px；
}
.栏目{
显示：内联块；
垂直对齐：中间对齐
}
.rec动画名称{
边际上限：0；
颜色：灰色；
宽度：100px；
}
.sub{
颜色：蓝色；
字体大小：16px；
}
杜布先生{
颜色：红色；
字体大小：16px；
}



title
[sub]


title
[dub]


title
[sub]


title
[dub]


title
[sub]


title
[dub]


使用Jquery

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

将此添加到css中

 .display{display:block !important}

你可以在
找到工作模型。你试过什么吗？我以前也试过。我在两个网站上有社交滑块，在另一个网站上有一种不同的滑块。你可以在这里看到它们：www.theaanetwork.netI我没有看到任何滑块，你用过jQuery或javascript来做这件事吗？因为你需要。在这里，看看这个：再次阅读问题和它的评论。啊，这就是我想要做的。谢谢你的帮助！但问题是，如果我希望在单击按钮之前隐藏div（例如，连接到右上角的按钮），我如何实现它？