<!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);