笔记

轮播图Tab组件实现

最新推荐文章于 2025-05-09 23:37:25 发布

原创最新推荐文章于 2025-05-09 23:37:25 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个基于JavaScript的轮播图Tab组件实现方案，支持click及hover事件。该组件通过定时器自动切换图片，并利用按钮点击事件手动切换，同时为当前显示的图片添加高亮效果。

/**
 * @fileoverview tab组件，支持click, hover事件
 * @author yangle | yorsal.coms
 * @created 2012-05-09
 * @updated 2012-05-09
 */


define(function(require, exports, module) {
	var curIndex=0;  
	var timeInterval=3000;
	var arr=new Array(); 
	  arr[0]="/images/home/banner-pic1.jpg"; 
	  arr[1]="/images/home/slide-2.jpg";
	  arr[2]="/images/home/slide-3.jpg";
	  arr[3]="/images/home/slide-4.jpg"; 
	var ar=new Array(); 
	  ar[0]="#button1"; 
	  ar[1]="#button2";
	  ar[2]="#button3";
	  ar[3]="#button4"; 
	  setInterval(changeImg,timeInterval);
	     $("#button1").click(function (){
		  $(ar[curIndex]).attr("class","");
		  curIndex=0;
		  $("#b-pic1").attr("src",arr[curIndex]);
		  $(ar[curIndex]).attr("class","bar-cur");
	      });
		$("#button2").click(function (){
			  $(ar[curIndex]).attr("class","");
			  curIndex=1;
			  $("#b-pic1").attr("src",arr[curIndex]);
			  $(ar[curIndex]).attr("class","bar-cur");
		  });
		$("#button3").click(function (){
			  $(ar[curIndex]).attr("class","");
			  curIndex=2;
			  $("#b-pic1").attr("src",arr[curIndex]);
			  $(ar[curIndex]).attr("class","bar-cur");
		  });
		$("#button4").click(function (){
			  $(ar[curIndex]).attr("class","");
			  curIndex=3;
			  $("#b-pic1").attr("src",arr[curIndex]);
			  $(ar[curIndex]).attr("class","bar-cur");
		  });
   
  function changeImg() {     
  if (curIndex==arr.length-1){ 
          curIndex=0;     
  }else{ 
          curIndex+=1;    
   } 
    $("#b-pic1").attr("src",arr[curIndex]);
  	$(ar[curIndex]).attr("class","bar-cur");
  	if(curIndex == 0)
  		$(ar[3]).attr("class","");
  	else
  	$(ar[curIndex-1]).attr("class","");
 }
});