jqeury之平移轮播

Posted 忧郁的小学生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="image/1.jpg" /></div>
<div class="lunbo">
    <div class="thumb">
        <div class="b bl"></div>
        <div class="li">
            <ul>
                <li><img src="image/1.jpg" /></li>
                <li><img src="image/2.jpg" /></li>
                <li><img src="image/3.jpg" /></li>
                <li><img src="image/4.jpg" /></li>
                <li><img src="image/5.jpg" /></li>
                <li><img src="image/6.jpg" /></li>
                <li><img src="image/7.jpg" /></li>
            </ul>
        </div>
        <div class="b br"></div>
    </div>
</div>

</body>
</html>

　　

以上是关于jqeury之平移轮播的主要内容，如果未能解决你的问题，请参考以下文章

jqeury源码之变量解析

如何用transform写平移轮播图

web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图

JQeury添加和删除class内部实现代码（简化版）

3d轮播图的效果实现

Jqeury获取table当前行与指定列