JQ简单实现图片轮换

脚本：

<script type="text/javascript">
        $(document).ready(function () {
            $("ul").find("li:eq(0)").addClass("over"); //初始化背景
            $("div ul li").mouseover(function () {
                $("#ima").attr("src", "../image/" + $(this).text() + ".jpg");
                $(this).addClass("over");
            })
            $("div ul li").mouseout(function () {
                $(this).removeClass("over");
            })
        })
        var index = 2;
        function imgturn() {
            if (index < 4) {
                $("#ima").attr("src", "../image/" + index + ".jpg");    //"../image/“ 图片路径 图片名称为 1.jpg  2.jpg  3.jpg 一次类推。
                var nowc = index - 1;
                $("ul").find("li:eq(" + nowc + ")").addClass("over");
                $("ul").find("li:gt(" + nowc + ")").removeClass("over");
                $("ul").find("li:lt(" + nowc + ")").removeClass("over");
                index++;
            }
            if (index > 3) {
                index = 1;
            }
        }
        setInterval(imgturn, "2000");   
    </script>

 

 

 

页面代码：

<div style="word-spacing: normal; width: 400px;">
        <asp:Image ImageUrl="~/images/1.jpg" ID="ima" runat="server" Height="100" Width="400" />
        <div id="mulu">
            <ul>
                <li>1<><li>2<><li>
                3<></ul>
        </div>
    </div>

 

css样式：

<style type="text/css">
       #mulu
       {
           float: right;
           margin-bottom: 30px;
       }
       ul li
       {
           list-style-type: none;
           float: left;
           margin-left: 10px;
       }
       .over
       {
           background-color: gray;
       }
   </style>

转载于:https://www.cnblogs.com/Mr-Joe/archive/2011/12/27/2302965.html