// 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> <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; }
|
|
|
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
---|
28 | 29 | 30 | 31 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|
公告
学更多的知识,交更多的朋友
导航
统计
- 随笔: 66
- 文章: 3
- 评论: 167
- 引用: 0
常用链接
留言簿(8)
随笔分类(37)
随笔档案(66)
文章分类(3)
积分与排名
最新评论
阅读排行榜
评论排行榜
|
|