• js图片轮播图


    /*焦点图*/
            var Box='.carousel';//盒子
            var Menu=$(Box+' .l_cursor li');//圆点菜单
            var Con=$(Box+' .carouselChange li');//大图
            var Text=$(Box+' .text li');//图注文字
            var Prev=$(Box+' .Prev');//上一页
            var Next=$(Box+' .next');//下一页
            var Counts=$(Con).size();//获取li总数
            var nowIndex=0;
            var timer;
            /* 点击切换 */
            $(Menu).click(function(){
                var i=$(Menu).index(this)
                gotoPage(i);
            });
            /* 打开相应的标签 */
            function gotoPage(i){
                $(Menu).removeClass("current").eq(i).addClass("current");
                $(Con).fadeOut(200).eq(i).fadeIn(200);
                $(Text).hide().eq(i).fadeIn(200);
                nowIndex=i;
            };
            /* 下一页 */
            $(Next).click(function(){
                gotoR();
            });
            function gotoR(){
                nowIndex++;
                if(nowIndex > Counts-1){
                    nowIndex=0;
                }
                gotoPage(nowIndex);
            };
            /* 上一页 */
            $(Prev).click(function(){
                nowIndex--;
                if(nowIndex < 0){
                    nowIndex=Counts-1
                }
                gotoPage(nowIndex);
            });
            /* 自动轮播 */
            function setAuto(){
                if(Counts>1){
                    timer=setInterval(gotoR,3000);
                };
            };
            setAuto();
            /* 鼠标经过暂停,离开继续轮播 */
            $(Box).hover(function(){
                        $(Prev).show();
                        $(Next).show();
                        if(timer){
                            clearInterval(timer);
                        }
                    },
                    function(){
                        $(Prev).hide();
                        $(Next).hide();
                        setAuto();
                    });
            /*焦点图*/

  • 相关阅读:
    [C#] 了解过入口函数 Main() 吗?带你用批处理玩转 Main 函数
    [C#] C# 知识回顾
    [C#] C# 知识回顾
    [C#] C# 知识回顾
    [C#] C# 知识回顾
    [C#] string 与 String,大 S 与小 S 之间没有什么不可言说的秘密
    [C#] 简单的 Helper 封装 -- SecurityHelper 安全助手:封装加密算法(MD5、SHA、HMAC、DES、RSA)
    [C#][算法] 用菜鸟的思维学习算法 -- 马桶排序、冒泡排序和快速排序
    [C#] 简单的 Helper 封装 -- RandomHelper
    [C#] 简单的 Helper 封装 -- CookieHelper
  • 原文地址:https://www.cnblogs.com/afei-happy/p/4073390.html
Copyright © 2020-2023  润新知