BlogJava-Java House-随笔分类-WEB相关技巧http://www.blogjava.net/qin/category/33416.htmlArt is longzh-cnSun, 19 Feb 2012 08:46:10 GMTSun, 19 Feb 2012 08:46:10 GMT60左右图片切换http://www.blogjava.net/qin/archive/2012/02/19/370293.htmlqinqinSun, 19 Feb 2012 08:29:00 GMThttp://www.blogjava.net/qin/archive/2012/02/19/370293.htmlhttp://www.blogjava.net/qin/comments/370293.htmlhttp://www.blogjava.net/qin/archive/2012/02/19/370293.html#Feedback0http://www.blogjava.net/qin/comments/commentRss/370293.htmlhttp://www.blogjava.net/qin/services/trackbacks/370293.html<!DOCTYPE html ><html lang="zh-Ch"><head><meta charset="utf-8...  阅读全文

qin 2012-02-19 16:29 发表评论
]]>jquery 菜单http://www.blogjava.net/qin/archive/2011/09/09/358365.htmlqinqinFri, 09 Sep 2011 06:05:00 GMThttp://www.blogjava.net/qin/archive/2011/09/09/358365.htmlhttp://www.blogjava.net/qin/comments/358365.htmlhttp://www.blogjava.net/qin/archive/2011/09/09/358365.html#Feedback0http://www.blogjava.net/qin/comments/commentRss/358365.htmlhttp://www.blogjava.net/qin/services/trackbacks/358365.html<html lang="zh-Ch"><head><meta charset="utf-8" /><LINK rel="i...  阅读全文

qin 2011-09-09 14:05 发表评论
]]>jquery 图片切换(jquery timers插件)http://www.blogjava.net/qin/archive/2011/09/09/358364.htmlqinqinFri, 09 Sep 2011 06:02:00 GMThttp://www.blogjava.net/qin/archive/2011/09/09/358364.htmlhttp://www.blogjava.net/qin/comments/358364.htmlhttp://www.blogjava.net/qin/archive/2011/09/09/358364.html#Feedback0http://www.blogjava.net/qin/comments/commentRss/358364.htmlhttp://www.blogjava.net/qin/services/trackbacks/358364.html// JavaScript Document
$(function(){
        var i=0;
    //    var t="3s";    
        var div=$("#box>div");
        var span=$("#num>div>span:gt(2)");    
        /*第一个div 显示，其余隐藏*/
        div.hide();
        div.first().show();    
        /*自动切换函数*/
        function auto(){
            i<div.length-1?i++:i=0;
            div.eq(i).fadeIn().siblings().fadeOut();   /*siblings 同级元素隐藏除去i等于div中的索引*/
            span.eq(i).addClass("fontsty").siblings().removeClass("fontsty");   /*span中的样式显示与隐藏*/
        }
        /*自动执行*/    
        $("#picSwitch").everyTime("3s","a",auto);
        /*鼠标移上数字事件*/
        span.mouseover(function(){
            $("#picSwitch").stopTime("a");
            i=span.index($(this));
            div.eq(i).show().siblings().hide(); 
            span.eq(i).addClass("fontsty").siblings().removeClass("fontsty") 
            $("#picSwitch").everyTime("3s","a",auto);
        });            
        $("#ctl").click(function(){
            if($(this).text()=="stop"){
                    $("#picSwitch").stopTime("a");
                    $(this).html("start");
            }else{
                $("#picSwitch").everyTime("3s","a",auto);                    
                $(this).html("stop");
            }
        });    
    
})            
 <div id="picSwitch">
      <div id="box" class="boxpst">
        <div class="flashpic"><a href="#"><img src="img/pic1.png"/></a></div>
        <div class="flashpic"><a href="#"><img src="img/pic2.png"/></a></div>
        <div class="flashpic"><a href="#"><img src="img/pic1.png"/></a></div>
        <div class="flashpic"><a href="#"><img src="img/pic1.png"/></a></div>
        <div class="flashpic"><a href="#"><img src="img/pic1.png"/></a></div>
      </div>
      <div id="num" class="num"> <img src="img/picfootbg.png" />
        <div> <span>-</span> <span id="ctl">stop</span> <span>+</span>&nbsp;&nbsp; <span class="fontsty">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div>
      </div>
    </div>

#picSwitch .boxpst .flashpic img{
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
}
.fontsty{
    color:#FF9900;
    font-weight:bold;
}
.num{
    margin-top:-25px;
    text-align:left;
    position:relative;
    color:#fff;
}
.num img{
    margin-left:8px;
}
.num div{
    margin-top:-20px;
    margin-left:12px;
    position:absolute;
    _position:relative;
}
.num div span{
    cursor:pointer;
}


qin 2011-09-09 14:02 发表评论
]]>