素材网 素材网

jQuery图片轮播切换 带有左右箭头点击切换控制-xw素材网

下载资源()次

阅读次数()次

发布时间:2015-04-28

jQuery图片轮播切换 带有左右箭头点击切换控制-xw素材网
分享到:

用法简介:

来源:xw素材网

jQuery图片轮播切换 带有左右箭头点击切换控制-xw素材网。
文件引用:

<script type="text/javascript">
var index = 0;
var timer = 0;
var ulist = $('.img_list ul');
var blist = $('.btn_list ul');
var list = ulist.find('li');
var llength = list.length;//li的个数,用来做边缘判断
var lwidth = $(list[0]).width();//每个li的长度,ul每次移动的距离
var uwidth = llength * lwidth;//ul的总宽度
function init(){
	//生成按钮(可以隐藏)
	addBtn(list);
	//显示隐藏左右点击开关
	$('.link').css('display', 'block');
	$('.link').bind('click', function(event) {
		var elm = $(event.target);
		doMove(elm.attr('id'));
		return false;
	});
	//初始化描述
	var text = ulist.find('li').eq(0).find('img').attr('alt');
	var link = ulist.find('li').eq(0).find('a').attr('href');
	$('.img_intro .text a').text(text);
	$('.img_intro .text a').attr('href',link);
	auto();
}
function auto(){
	//定时器
	timer = setInterval("doMove('toRight')",3000);
	$('.img_list li, .btn_list li').hover(function() {
		clearInterval(timer);
	}, function() {
		timer = setInterval("doMove('toRight')",3000);
	});
}
function changeBtn(i){
	blist.find('li').eq(i).addClass('on').siblings().removeClass('on');
	var text = ulist.find('li').eq(i).find('img').attr('alt');
	var link = ulist.find('li').eq(i).find('a').attr('href');
	$('.img_intro .text a').text(text);
	$('.img_intro .text a').attr('href',link);
}
function addBtn (list){
	for (var i = 0; i < list.length; i++) {
		var imgsrc = $(list[i]).find('img').attr('src');            
		var listCon = '<li><img src="'+imgsrc+'""></li>';         
		$(listCon).appendTo(blist);
		//隐藏button中的数字
		//list.css('text-indent', '10000px');
	};
	blist.find('li').first().addClass('on');
	blist.find('li').click(function(event) {
		var _index = $(this).index();            
		doMove(_index);
	});
}
function doMove(direction){
	//向右按钮
	if (direction =="toRight") {
		index++;
		if ( index< llength) {
			uwidth = lwidth *index;
			ulist.css('left',-uwidth);
			//ulist.animate({left: -uwidth}, 1000);
		}else{
			ulist.css('left','0px');
			index = 0;
		}; 
	//向左按钮           
	}else if(direction =="toLeft"){
		index--;
		if ( index < 0) {
			index = llength - 1;                
		}
		uwidth = lwidth *index;
		ulist.css('left',-uwidth);
		//ulist.animate({left: -uwidth}, "slow");    
	//点击数字跳转  
	}else{
		index = direction;
		uwidth = lwidth *index;
		ulist.css('left',-uwidth);
	};
	changeBtn(index);
}
init();
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。