jqeury之平移轮播

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

    <link href="yangshi/css.css" rel="stylesheet" type="text/css" />

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>

    <script  type="text/javascript">

        $(function () {

            var timer; //定时器

            var curno = 1;

            var length = $(".lunbo ul li").length; //有几张图片

            $(".lunbo ul").css("width", length * 137 + "px");

            $(".topimg").hover(function () {

                //鼠标移上去执行的内容

                clearInterval(timer);

            }, function () {

                //鼠标移走时执行的内容

                timer = setInterval(scroll, 3000);

            }).trigger("mouseover"); //trigger("mouseover")窗体加载的时候就触发一次mouseover事件

            $(".lunbo").hover(function () {

                //鼠标移上去执行的内容

                clearInterval(timer);

            }, function () {

                //鼠标移走时执行的内容

                timer = setInterval(scroll, 3000);

            })

              $(".lunbo .bl").click(function () {

                    if (curno == 0) {

                    }

                    else {

                        curno--;

                    }

                    $(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

                    var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

                    $(".topimg img").attr("src", src); //上面图片显示

                    if (curno == 0) {

                        $('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

                    }

                    else if (curno > 2 && curno + 2 < length) {

                        $(".lunbo ul").css("margin-left", 0);

                        var nowLeft = -(curno - 2) * "137" + "px";

                        $('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

                    }

                })

               $(".lunbo .br").click(function () {

                    if (curno == 0) {

                    }

                    else {

                        curno++;

                    }

                    $(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

                    var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

                    $(".topimg img").attr("src", src); //上面图片显示

                    if (curno == 0) {

                        $('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

                    }

                    else if (curno > 2 && curno + 2 < length) {

                        $(".lunbo ul").css("margin-left", 0);

                        var nowLeft = -(curno - 2) * "137" + "px";

                        $('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

                    }

                })

            function scroll() {

                //轮播图高亮显示

                $(".lunbo .thumb .li ul li").eq(curno).fadeTo(1000, 1).siblings().fadeTo(1000, 0.3);

                var src = $(".lunbo .thumb .li ul li:eq(" + curno + ") img").attr("src");

                $(".topimg img").attr("src", src); //上面图片显示

                if (curno == 0) {

                    $('.lunbo ul').stop(true, false).animate({ left: "0px" }, 1000);

                }

                else if (curno > 2 && curno + 2 < length) {

                    $(".lunbo ul").css("margin-left", 0);

                    var nowLeft = -(curno - 2) * "137" + "px";

                    $('.lunbo ul').stop(true, false).animate({ left: nowLeft }, 1000);

                }

                curno++;

                if (curno == length) {

                    curno = 0;

                }

            }

        })

    </script>

</head>

<body>

<div class="topimg"><img src="data:image/1.jpg" /></div>

<div class="lunbo">

    <div class="thumb">

        <div class="b bl"></div>

        <div class="li">

            <ul>

                <li><img src="data:image/1.jpg" /></li>

                <li><img src="data:image/2.jpg" /></li>

                <li><img src="data:image/3.jpg" /></li>

                <li><img src="data:image/4.jpg" /></li>

                <li><img src="data:image/5.jpg" /></li>

                <li><img src="data:image/6.jpg" /></li>

                <li><img src="data:image/7.jpg" /></li>

            </ul>

        </div>

        <div class="b br"></div>

    </div>

</div>

</body>

</html>
秒客网

jqeury之平移轮播

相关文章
