如何在jquery中制作silder

如何在jquery中制作silder

本文介绍了如何在jquery中制作silder的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script language="javascript" type="text/javascript">
        var _index = 1;
        var myVar;
        var _time = 2000;
        $(document).ready(function () {
            myFunction();
        });

        function Silder() {
            var myarray = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
            if (_index > myarray.length) {
                _index = 1;
            }
            $('#mainsilde').fadeOut('slow');
            $("#mainsilde").attr("src", "gal/" + _index + ".jpg");
            $('#mainsilde').fadeIn('slow');
            _index = _index + 1;
           myVar = setTimeout(Silder, _time);

        }
        function SetOnCall(_index) {

          //  $('#mainsilde').fadeOut('slow');
            $("#mainsilde").attr("src", "gal/" + _index + ".jpg");
         //   $('#mainsilde').fadeIn('slow');
        }

        function myFunction() {
            myVar = setTimeout(Silder, _time);
        }

        function myStopFunction(_index) {
            clearTimeout(myVar);
            SetOnCall(_index);
        }
    </script>
    </head>
<body>
<table>
    <tr>
        <td valign="top">
            <div >
                <img src="gal/1.jpg" class="dup" width="100px"  onmouseover="myStopFunction(1);" onmouseout="myFunction();" />
            </div>
            <div class="dup">
                <img src="gal/2.jpg" class="dup" width="100px" onmouseover="myStopFunction(2);" onmouseout="myFunction();" />
            </div>
            <div >
                <img src="gal/3.jpg"  class="dup" width="100px" onmouseover="myStopFunction(3);" onmouseout="myFunction();"/>
            </div >
            <div >
                <img src="gal/4.jpg" class="dup" width="100px" onmouseover="myStopFunction(4);" onmouseout="myFunction();" />
            </div>
        </td>

        <td valign="top">
            <img src="gal/0.jpg" id="mainsilde" width="430px" height="340px"  onmouseover="wait(0);" onmouseout="wait(1);"/>
        </td>

           <td valign="top">
            <div >
                <img src="gal/1.jpg" class="dup" width="100px" onmouseover="myStopFunction(1);" onmouseout="myFunction();" />
            </div>
            <div class="dup">
                <img src="gal/2.jpg" class="dup" width="100px" onmouseover="myStopFunction(2);" onmouseout="myFunction();" />
            </div>
            <div >
                <img src="gal/3.jpg"  class="dup" width="100px" onmouseover="myStopFunction(3);" onmouseout="myFunction();"/>
            </div >
            <div >
                <img src="gal/4.jpg" class="dup" width="100px" onmouseover="myStopFunction(4);" onmouseout="myFunction();" />
            </div>
        </td>
    </tr>
</table>
</body>
</html>

推荐答案




这篇关于如何在jquery中制作silder的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-26 22:25