55bbs网站首页jQuery焦点图55bbs网站首页jQuery焦点图是一款带有缩略图，鼠标滑过缩略图自动切换特效代码。jQuery图片轮播鼠标滑过缩略图 所属专题：焦点图代码
<script type="text/javascript">
$(function(){
var cur = 0;
function autoRun(){//自动轮播函数
cur++;
// if(cur==7){
// cur = 0;
// }
cur = (cur==7)?0:cur;//判断cur是否该变化
// 变化大图div
var left = cur* -294;//计算大图div的left值
$('#flash .pic_box').animate({'left':left+'px'},300);//让大图div变换left值
// 变化小图列表
$('#flash ul li').eq(cur).addClass('cur').siblings('li').removeClass('cur');
// 小滑块
var huakuai_left = cur*42;//计算小滑块的left值
// $('#flash .huakuai').animate({'left':huakuai_left+'px'},300);
$('#flash .huakuai').css({'left':huakuai_left+'px'})
}
var timer = setInterval(autoRun,3000);//定时器设立
$('#flash ul li').mouseover(function(){
clearInterval(timer);
cur = $(this).index();//获得当前鼠标移入的li的序号
// 变化大图div
var left = cur* -294;//计算大图div的left值
$('#flash .pic_box').stop().animate({'left':left+'px'},300);//让大图div变换left值
// 变化小图列表
$('#flash ul li').eq(cur).addClass('cur').siblings('li').removeClass('cur');
// 小滑块
var huakuai_left = cur*42;//计算小滑块的left值
// $('#flash .huakuai').animate({'left':huakuai_left+'px'},300);
$('#flash .huakuai').css({'left':huakuai_left+'px'})
})
$('#flash ul li').mouseout(function(){
timer = setInterval(autoRun,3000);//定时器设立
})
})
</script>
本站资源仅限于学习研究，严禁从事商业或者非法活动!
源码搜藏网所有源码来自互联网转载与用户上传分享，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！
下一篇：jQuery仿百度百家首页焦点图
焦点图下载排行
-
2017-03-24
-
2019-06-28
-
2014-03-13
-
2018-07-11
-
2015-02-05
-
2017-03-24
-
2013-08-27
-
2017-03-24
最新文章
-
JQuery手风琴式相册图片特效是一款只需点击图片缩略图即可展开当前的图片
2022-03-15
-
-
Jquery带进度条提示焦点图是一款带进度条提示的图片淡出淡进切换效果代码
2022-03-15
-
2019-06-28
-
2018-07-11
-
2018-05-14
-
2017-03-24
-
2017-03-24
热门源码
