使用jquery使滑块自动化_Jquery_Html_Css

使用jquery使滑块自动化

jquery html css

使用jquery使滑块自动化,jquery,html,css,Jquery,Html,Css,这里有一个例子请看一看这个，我在我的网站上使用了这个插件，但我不能自动完成它，我想让事件自动化。（点击后做任何事情）请帮帮我。该代码可在现场获得您只需在“a”元素上触发click事件即可完成此操作 <nav> <a id="asd" href="#" class="mi-selected">Shoes</a> <a href="#" class="">Accessories</a> <a href=

这里有一个例子请看一看这个，我在我的网站上使用了这个插件，但我不能自动完成它，我想让事件自动化。（点击后做任何事情）请帮帮我。该代码可在现场获得

您只需在“a”元素上触发click事件即可完成此操作

<nav>
    <a id="asd" href="#" class="mi-selected">Shoes</a>
    <a href="#" class="">Accessories</a>
    <a href="#" class="">Watches</a>
    <a href="#" class="">Bags</a>
</nav>

**要使其无限工作，您可以执行以下操作：

setInterval(function () {
    $('nav a').each(function(i){ 
        var aTag = this;
        setTimeout(function() { 
            $(aTag).click();
            }, 1500 * (i + 1)) 
    })
}, 6100);

首先，确保已包含所需的4个文件，如果忘记包含其中任何文件，插件将无法正常工作（并且可能根本无法工作）：

jQuery 1.8.3或更高版本
modernizr.custom.63321.js（自定义构建），它包含在可下载文件中
jQuery catslider.js（插件本身）
插件所需的CSS（文件名为“style.CSS”）

将以下内容放入您的

标签中（确保用实际文件夹名称替换“my_js_文件夹”和“my_css_文件夹”）：

现在，IME实现非常简单（确保在div中包含类“mi slider”）：

























//确保脚本中的“myContainer”id与div的id相同
$（文档）.ready（函数（）{
$（“#myContainer”）.catslider（）；//这段代码将实现神奇的效果
});

这是一个好看的插件，但它的设计很糟糕，我强烈不推荐这个插件

编辑：

简单地说，在准备好的文档中执行以下操作：

<script>
    $(document).ready(function() {
        $('#mi-slider').catslider();
        // the automated effect
        setInterval(function() {
            if($('nav a.mi-selected').nextAll('a:first').length > 0) {
                $('nav a.mi-selected').nextAll('a:first').click();
            } else {
                $('nav a:first').click();
            }
        }, 3000);// 3000 = auotmate every 3 seconds
    });
</script>


$（文档）.ready（函数（）{
$（'#mi slider'）.catslider（）；
//自动效果
setInterval（函数（）{
如果（$（'nav a.mi-selected'）.nextAll（'a:first'）。长度>0）{
$（'nav a.mi-selected'）.nextAll（'a:first'）。单击（）；
}否则{
$（'nav a:first'）。单击（）；
}
}，3000）；/3000=auotmate每3秒
});

为我们提供一些您的代码，以便我们可以尝试帮助您。我提到了我从哪里获得插件的有问题的网站，您可以从那里签出代码。如果代码在该网站中有效，但不适用于您，那么您肯定做错了什么。顺便说一句，这个插件是专为webkit浏览器（如Safari和Chrome）设计的动画效果，而其他浏览器将不会有动画效果（只是即时显示效果）我也没有它的工作，但问题是，我想让它自动化，意思是如果用户不点击任何一个链接，那么它会在loopok中自动执行点击事件。我现在明白你的意思了，我会编辑我的答案。我想让它自动化，它在点击上工作，但我想用执行点击动作自动实现无限循环检查无限循环实现我添加了，请勾选我的答案为正确，您选择了Tomzan的答案为正确，而不是我的

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="/my_js_folder/modernizr.custom.63321.js"></script>
    <script src="/my_js_folder/jquery.catslider.js"></script>
    <link rel="stylesheet" type="text/css" href="/my_css_folder/style.css"/>
</head>

<div id="myContainer" class="mi-slider">
    <!-- each ul is a section -->
    <ul>
        <li><a href="#"><img src="images/1.jpg" alt="img01">Boots</a></li>
        <li><a href="#"><img src="images/2.jpg" alt="img02">Oxfords</a></li>
        <li><a href="#"><img src="images/3.jpg" alt="img03">Loafers</a></li>
        <li><a href="#"><img src="images/4.jpg" alt="img04">Sneakers</a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/5.jpg" alt="img05">Belts</a></li>
        <li><a href="#"><img src="images/6.jpg" alt="img06">Hats &amp; Caps</a></li>
        <li><a href="#"><img src="images/7.jpg" alt="img07">Sunglasses</a></li>
        <li><a href="#"><img src="images/8.jpg" alt="img08">Scarves</a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/9.jpg" alt="img09">Casual</a></li>
        <li><a href="#"><img src="images/10.jpg" alt="img10">Luxury</a></li>
        <li><a href="#"><img src="images/11.jpg" alt="img11">Sport</a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="images/12.jpg" alt="img12">Carry-Ons</a></li>
        <li><a href="#"><img src="images/13.jpg" alt="img13">Duffel Bags</a></li>
        <li><a href="#"><img src="images/14.jpg" alt="img14">Laptop Bags</a></li>
        <li><a href="#"><img src="images/15.jpg" alt="img15">Briefcases</a></li>
    </ul>
    <!-- the nav tag is the lower clickable links. the 1st link shows the 1st ul section, the 2nd link shows the 2nd ul section.. etc. So if you have 5 ul's, you must have 5 links in the nav tag -->
    <nav>
        <a href="#">Shoes</a>
        <a href="#">Accessories</a>
        <a href="#">Watches</a>
        <a href="#">Bags</a>
    </nav>
</div>
<script>
    // make sure the "myContainer" id in the script is the same id of the div
    $(document).ready(function() {
        $('#myContainer').catslider(); // this is the piece of code that will do the magic thing
    });
</script>

<script>
    $(document).ready(function() {
        $('#mi-slider').catslider();
        // the automated effect
        setInterval(function() {
            if($('nav a.mi-selected').nextAll('a:first').length > 0) {
                $('nav a.mi-selected').nextAll('a:first').click();
            } else {
                $('nav a:first').click();
            }
        }, 3000);// 3000 = auotmate every 3 seconds
    });
</script>