zoukankan      html  css  js  c++  java
  • 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();
                    });
            /*焦点图*/

  • 相关阅读:
    COGNOS10启动服务报错 问题解决
    Linux 下 新增Oracle10g 实例 (转自http://www.cnblogs.com/lan0725/archive/2011/07/18/2109474.html)
    WIN7安装COGNOS8后配置IIS网站后,访问COGNOS站点网页一直显示空白,解决方法(转载)
    Gridview光棒效果 鼠标滑过
    11款实用的一句话网站设计代码
    自定义js方法 (格式化时间)
    测试一下
    UTF7转换GB2312编码的方法(中文)
    HTML注册页面验证注册信息
    android欢迎页
  • 原文地址:https://www.cnblogs.com/afei-happy/p/4073390.html
Copyright © 2011-2022 走看看