AI时代，找源码已成为过去式，纪念我过去的十年0(回)
80天前
还有人吗2(回)
98天前会python真的可以为所欲为0(回)
577天前
这里还有人吗2(回)
763天前这里还有人吗0(回)
763天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
987天前<!DOCTYPE html> |
<html> |
<head lang="en"> |
<meta charset="UTF-8"> |
<title></title> |
<style> |
li{ |
list-style: none; |
} |
.cur{ |
color: red; |
} |
.f_tab{ |
position: relative; |
width: 500px; |
height: 300px; |
overflow: hidden; |
padding: 0; |
margin: 0; |
} |
.f_num{ |
width: 500px; |
height: 20px; |
} |
.th{ |
width: 500px; |
height: 250px; |
overflow: hidden; |
padding: 0; |
margin: 0; |
} |
.f_num dd{ |
float: left; |
width: 20px; |
height: 20px; |
background: #666; |
color: #fff; |
text-align: center; |
line-height: 20px; |
} |
.f_num dd.cur{ |
background: #fb5732; |
color: #fff; |
} |
</style> |
</head> |
<body> |
<div class="f_tab home_flash_c"> |
<ul class="th"> |
<li style="display:block;"><a href="javascript:;" target="_blank"><img src="http://img.kekenet.com/statics/image/index/end.jpg" /> |
<p class="black">12012世界末日学习专题</p> |
</a></li> |
<li><a href="javascript:;"><img src="http://img.kekenet.com/Images/2012/fanyi.jpg" /> |
<p class="black">2阎老师翻译小讲堂</p> |
</a></li> |
<li><a href="javascript:;" target="_blank"><img src="http://img.kekenet.com/Images/2012/cet46.jpg" /> |
<p class="black">32012年12月英语四六级冲刺备考</p> |
</a></li> |
<li><a href="javascript:;" target="_blank"><img src="http://img.kekenet.com/statics/image/index/ikeke.jpg" /> |
<p class="black">4可可微英语 微信号:ikekenet 欢迎大家关注</p> |
</a></li> |
<li><a href="javascript:;"><img src="http://img.kekenet.com/statics/image/index/1ju.jpg" /> |
<p class="black">5美剧每日一句</p> |
</a></li> |
<li><a href="javascript:;"><img src="http://img.kekenet.com/statics/image/index/i4.jpg" /> |
<p class="black">6可可英语安卓版客户端下载</p> |
</a></li> |
</ul> |
<div class="f_num home_flash_num"> |
<dl> |
<dd class="cur">1</dd> |
<dd>2</dd> |
<dd>3</dd> |
<dd>4</dd> |
<dd>5</dd> |
<dd>6</dd> |
</dl> |
</div> |
</div> |
<a href="javascript:;" class="sper">向左</a> |
<a href="javascript:;" class="snext">向右</a> |
<script type="text/javascript" src="js/jquery.js"></script> |
<script type="text/javascript" src="focue-1.js"></script> |
<script> |
$(".f_tab").focue({"conBox":".th li","mainCell":".f_num dd"/*,"autoPlay":"false"*/}) |
</script> |
</body> |
</html> |
/** |
* Created by Administrator on 2015/11/5. |
*/ |
///大眼睛效果改进 |
(function($){ |
$.fn.focue=function(options){ |
var defaults={ |
speed : '2000', //图片切换的速度 |
conBox:" ", //图片所在位置 |
mainCell:" ", //数字所在位置 |
autoPlay:"true" //是否自动播放 |
}; |
var opts = $.extend(defaults, options); |
return this.each(function () { |
var _wrap=$(this); |
var sw = 0; |
var conBox =opts.conBox; |
var mainCell =opts.mainCell; |
var autoPlay =opts.autoPlay; |
var speed =opts.speed; |
var myTime; |
var lengtLi=conBox.length; |
//滑入停止动画，滑出开始动画 |
_wrap.hover(function(){ |
clearInterval(myTime); |
},function(){ |
if(autoPlay=="true"){ |
myTime = setInterval(function(){ |
myShow(sw); |
sw++; |
if(sw==lengtLi){sw=0;} |
} , speed); |
}else{ |
clearInterval(myTime); |
} |
}).trigger('mouseleave'); |
//引导文字切换图片 |
$(mainCell).mouseover(function(){ |
sw = $(mainCell).index(this); |
myShow(sw); |
}); |
//点击导航目录出来相应内容 |
function myShow(i){ |
$(mainCell).eq(i).addClass("cur").siblings("dd").removeClass("cur"); |
$(conBox).eq(i).stop(true,true).fadeIn(100).siblings("li").fadeOut(100); |
} |
//左右箭头效果 |
$(".sper").click(function(){ |
//clearInterval(myTime); |
sw--; |
if(sw==-1){sw=(lengtLi-1);myShow(sw); } |
myShow(sw); |
}).trigger('mouseleave'); |
$(".snext").click(function(){ |
if(sw==lengtLi){sw=0;myShow(sw);}else{ |
myShow(sw); |
sw++; |
} |
}).trigger('mouseleave') |
}) |
} |
})(jQuery); |
