Question

这是一个例子 Click 请看看这个，我在我的网站上使用过这个插件，但我无法自动化，想让事件自动化。（做点什么做点击）请帮我。代码可在现场获得 Code is here

Answer 1

只需触发'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>

提供“a”ID，以便您可以轻松找到它，然后使用：

$('#asd').click();

**为了让它无限制地工作，你可以这样做：

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

Answer 2

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

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

将以下内容放入<head>标记中，（确保将“my_js_folder”和“my_css_folder”替换为您的实际文件夹名称）：

<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>

现在imeplementation很简单（确保在div中包含类“mi-slider”）：

<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>

使用jquery使滑块自动化

2 个答案: