jquery怎么实现左右滑动的问题

 var len = $("#b span").length,

  	curindex = 0;

$("#leftRun").click(function(){

	if(curindex) {
		curindex--;
	}else{
		return;
	}

	$("#b").animate({
    	left: "-" + curindex * 105
	}, 300);

	$(".ser_nav>span").eq(curindex).mouseover();

});

$("#rightRun").click(function(){

		if(curindex == len - 5) {
			return;
		}else{
			curindex++;
		}

		$("#b").animate({
	    	left: "-" + curindex * 105
		},300);

		$(".ser_nav>span").eq(curindex).mouseover();

});

  

<script>

		function clicktabs(tit_id,box_id,cur){
			var g_tags=$(tit_id),
				g_conts=$(box_id),
				g_current=cur;
			g_tags.live(‘mouseover‘,function(){
				var g_index=g_tags.index(this);
				$(this).addClass(g_current).siblings().removeClass(g_current);
				g_conts.eq(g_index).show().siblings().hide();
			})
		}
		clicktabs(".ser_nav>span",".ser_all>ul","cur");

	</script>

  

时间: 2024-10-27 08:09:16

jquery怎么实现左右滑动的问题的相关文章

jQuery层动画定位滑动效果代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery层动画定位滑动</title&

基于jQuery超级酷动画滑动插件

分享一款基于jQuery超级酷动画滑动插件.这是一款基于jquery.pogo-slider插件实现的多个滑块切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="pogoSlider" id="js-main-slider"> <div class="pogoSlider-slide" data-transition="slideOverLeft" data-

jQuery层动画定位滑动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery层动画定位滑动</titl

jquery 实现导航栏滑动效果

精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现: 3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m

jQuery实现页面底部滑动置顶

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery实现页面底部滑动置顶 | alleyloft.com</title> <link type="text/css" rel="stylesheet" href="css/main.css" /> <script

基于jQuery鼠标悬停上下滑动导航条

基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2" class="menu"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">预报预警</a

jQuery元素跟随鼠标手势滑动【原】

使用jquery编写的简洁易用的鼠标hover交互效果:可以传递3个参数:cover[Boolean]: 隐藏元素滑动时是否覆盖默认显示的元素:speed[Number]: 元素滑动的速度:easing[String]: 动画缓动效果,需要另外调用jquery.easing.js <!DOCTYPE html> <html> <head> <title>mouseDirectorySlide</title> <meta charset=&q

使用 jQuery 和 CSS3 制作滑动导航菜单

这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件 本文

一款基于jQuery的图片左右滑动焦点图

今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的,看上去十分大气,很适合产品图片的展示.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="friend"> <div class="mr_frbox"> <img class="mr_frB

jquery手机触屏滑动拼音字母城市选择器代码

今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src="images/dizhi.png" alt=""><em>北京</em></div> <!--省份列表--> <div class="dzhc_xs"> <nav> <di