0

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

4

2 回答 2

1

你可以通过简单地触发'a'元素上的点击事件来做到这一点

<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);
于 2013-09-02T09:01:04.900 回答
0

首先，确保您已包含所需的 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>

现在实现非常简单（确保在 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>
于 2013-09-03T09:52:35.953 回答