笔记

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
 * @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","");
 }
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值