JS带页码标识及左右按钮平滑滚动焦点图

时间：2014-08-14 来源：科e互联

特效说明：

一款JS带页码标识及左右按钮平滑滚动焦点图，可添加多图使用，基于jQuery插件，点击按钮及自动左右平滑切换图片特效。代码简单易用。新手编写JS入门代码教程。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

使用方法：

1、调用CSS样式：
<link href="css/style.css" rel="stylesheet" type="text/css" />

2、调用JS插件代码：
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>

3、添加HTML代码：
将......之间的html和js代码；放在<body></body>之间。

4、JS代码：
<script language="javascript">
var rnum=$(".mkeUl ul li").size();
var cnum=0;
$(".mke_ns2").html(rnum);
$(".mkeUl ul").width(rnum*588);
$(".mkeRbtn").click(function(){
   cnum++;
   if(cnum>(rnum-1)){
   cnum=0
   }
   $(".mkeUl ul").animate({"left":-cnum*588},300);
   $(".mke_ns1").html(cnum+1);
});
$(".mkeLbtn").click(function(){
   cnum--;
   if(cnum<0){
   cnum=rnum-1;
   }
   $(".mkeUl ul").animate({"left":-cnum*588},300);
   $(".mke_ns1").html(cnum+1);
});

function autoPlay(){
   cnum++;
   if(cnum>(rnum-1)){
   cnum=0
   }
   $(".mkeUl ul").animate({"left":-cnum*588},300);
   $(".mke_ns1").html(cnum+1);
}
var Timer=setInterval(autoPlay,4000);
$(".mkeFocus").hover(function(){clearInterval(Timer)},function(){Timer=setInterval(autoPlay,4000);});
</script>

标签平滑滚动左右按钮自动轮播 jQuery焦点图

预览收藏分享评论