如何将自动播放（自动移动/自动滑动）添加到csslider？

有人知道如何将自动播放添加到此滑块吗？我希望这个滑块在屏幕上可见时自动开始移动

可能吗？谢谢

代码如下：

幻灯片1的内容

幻灯片1的内容

幻灯片1的内容

幻灯片1的内容

幻灯片1的内容

幻灯片1的内容

幻灯片1的内容


幻灯片2的内容
幻灯片3的内容
幻灯片4的内容
幻灯片5的内容

---

您可以使用带间隔的simpleJQuery

或使用

setInterval（函数（）{
如果（$（'input[name=“slides”]：选中'）。下一步（'input[name=“slides”]）[0]）
$（'input[name=“slides”]：选中'）。下一步（'input[name=“slides”]）[0]。选中=真
其他的
$（'input[name=“slides”]”）[0]。选中=true
}，2000）

@导入url(https://fonts.googleapis.com/css?family=Raleway:400，700 |拉托）；
身体{
身高：100%；
溢出x：隐藏；
文本对齐：居中；
字体：400 100%“Raleway”、“Lato”；
}
.csslider{
/*重要的*/
利润率：22px；
/*重要的*/
-moz透视图：1300px；
-质谱透视图：1300px；
-webkit透视图：1300px；
透视图：1300px；
显示：内联块；
文本对齐：居中；
位置：相对位置；
}
.csslider>输入{
显示：无；
}
.csslider>输入：第n个类型（5）：选中~ul li:第一个类型{
左边距：-400%；
}
.csslider>输入：第n个类型（4）：选中~ul li:第一个类型{
左边距：-300%；
}
.csslider>输入：第n个类型（3）：选中~ul li:第一个类型{
左边距：-200%；
}
.csslider>输入：第n个类型（2）：选中~ul li:第一个类型{
左边距：-100%；
}
.csslider>输入：第n个类型（1）：选中~ul li:第一个类型{
左边缘：0%；
}
.csslider>ul{
/*重要的*/
宽度：600px；
高度：300px；
/*重要的*/
位置：相对位置；
z指数：1；
字号：0；
线高：0；
保证金：0自动；
填充：0；
溢出：隐藏；
空白：nowrap；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.csslider>ul>li{
/*重要的*/
垂直对齐：顶部；
字号：首字母；
字体大小：15px；
/*重要的*/
位置：相对位置；
显示：内联块；
宽度：100%；
身高：100%；
溢出：隐藏；
线高：正常；
-moz过渡：所有0.5s立方贝塞尔（0.5,1,0.5,1）；
-o型过渡：所有0.5s缓解；
-webkit过渡：所有0.5s立方贝塞尔（0.5,1,0.5,1）；
过渡：所有0.5s三次贝塞尔（0.5,1,0.5,1）；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
空白：正常；
}
/*-------------航行-------------*/
.csslider>.navigation{
位置：绝对位置；
/*重要的*/
底部：-8px；
左：50%；
边缘底部：-10px；
/*重要的*/
z指数：10；
字号：0；
线高：0；
文本对齐：居中；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.csslider>.navigation>div{
左边距：-100%；
}
.csslider>导航标签{
/*重要的*/
边界半径：50%；
利润率：0.4px；
填充：4px；
背景#9090；
/*重要的*/
位置：相对位置；
显示：内联块；
光标：指针；
}
.csslider>。导航标签：悬停：之后{
不透明度：1；
}
.csslider>.navigation标签：之后{
/*重要的*/
左边距：-6px；
利润上限：-6px；
填充：6px；
背景：#000000；
边界半径：50%；
/*重要的*/
内容：''；
位置：绝对位置；
左：50%；
最高：50%；
不透明度：0；
}
.csslider.inside.navigation{
底部：10px；
边缘底部：10px；
}
.csslider>输入：第n个类型（1）：选中~。导航标签：第n个类型（1）：之后，
.csslider>输入：第n个类型（2）：选中~。导航标签：第n个类型（2）：之后，
.csslider>输入：第n个类型（3）：选中~。导航标签：第n个类型（3）：之后，
.csslider>输入：第n个类型（4）：选中~。导航标签：第n个类型（4）：之后，
.csslider>输入：第n个类型（5）：选中~。导航标签：第n个类型（5）：之后
{
不透明度：1；
}
/*-------------阿罗-------------*/
.csslider>箭头{
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.csslider>箭头{
/*重要的*/
左：-31px；
填充：0 31px；
高度：26px；
/*重要的*/
位置：绝对位置；
z指数：5；
最高：50%；
宽度：100%；
-moz框大小：内容框；
-webkit框大小：内容框；
框大小：内容框；
}
.csslider>.arrows标签{
/*重要的*/
盒影：插入2px-2px 0 1px#9090；
/*重要的*/
显示：无；
位置：绝对位置；
前-50%；
填充：10px；
光标：指针；
-moz过渡：框影0.15s，边距0.15s；
-o型过渡：盒影0.15s，边距0.15s；
-webkit过渡：框阴影0.15s，边距0.15s；
过渡：框影0.15s，边距0.15s；
}
.csslider>.arrows标签：悬停{
/*重要的*/
框阴影：插入3px-3px 0 2px#000000；
/*重要的*/
边际：0像素；
}
.csslider.infinity>输入：类型的第一个：选中~.arrows label.goto-last，
.csslider>输入：第n个类型（1）：选中~.arrows>标签：第n个类型（0），
.csslider>输入：第n个类型（2）：选中~.arrows>标签：第n个类型（1），
.csslider>输入：第n个类型（3）：选中~。箭头>标签：第n个类型（2），
.csslider>输入：第n个类型（4）：选中~。箭头>标签：第n个类型（3），
.csslider>输入：第n个类型（5）：选中~箭头>标签：第n个类型（4）
{
显示：块；
左：0；
右：自动；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
C
<div class="csslider">
<input type="radio" name="slides" id="slides_1" checked />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<input type="radio" name="slides" id="slides_5" />
<ul>
    <li><p>Content of slide 1</p>
    <p>Content of slide 1</p>
    <p>Content of slide 1</p>
    <p>Content of slide 1</p>
    <p>Content of slide 1</p>
    <p>Content of slide 1</p>
    <p>Content of slide 1</p>
    </li>
    <li>Content of slide 2</li>
    <li>Content of slide 3</li>
    <li>Content of slide 4</li>
    <li>Content of slide 5</li>
</ul>
<div class="arrows">
    <label for="slides_1"></label>
    <label for="slides_2"></label>
    <label for="slides_3"></label>
    <label for="slides_4"></label>
    <label for="slides_5"></label>
</div>
<div class="navigation">
    <div>
        <label for="slides_1"></label>
        <label for="slides_2"></label>
        <label for="slides_3"></label>
        <label for="slides_4"></label>
        <label for="slides_5"></label>
    </div>
</div>