189 8069 5689
jquery手机触屏左右滑动切换栏目
专业领域包括网站设计、成都网站设计、商城开发、微信营销、系统平台开发， 与其他网站设计及系统开发公司不同，成都创新互联的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。
$(function(){
TouchSlide({
slideCell:"#slideBox",
titCell:".myhd
ul",
//开启自动分页
autoPage:true
，此时设置
titCell
为导航元素包裹层
mainCell:".bd
ul",
effect:"leftLoop",
autoPage:true,//自动分页
autoPlay:true
//自动播放
});
div
id="slideBox"
class="slideBox"
div
class="bd"
ul
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news1.png"
//a
a
class="tit"
href="#"墨西哥教师罢工
与警察激烈冲突/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news2.jpg"//a
a
class="tit"
href="#"日右翼游行纪念钓岛"国有化"周年/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news3.jpg"//a
a
class="tit"
href="#"女兵竞选美国小姐鼓励女性自强/a
/li
li
a
class="pic"
href="#"img
src="${ctxStatic}/img/mobile/news4.jpg"//a
a
class="tit"
href="#"济南现“最窄人行道”
仅0.2米宽/a
/li
/ul
/div
div
class="myhd"
ul
style="height:
28px;"/ul
/div
/div
1.返回值:jQueryfadeIn([speed],[easing],[fn])
fadeOut([speed],[eas],[fn]);
speed:三种预定速度之一的字符串("slow","normal", or
"fast")或表示动画时长的毫秒数值 (如： 1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
2. 楼主上面的图片轮播（slide），想必用的是别人封装的插件吧。如果是插件的话，只能是别人传递的参数得知的情况下再设置了。
这个代码我写过，不过实现的不完美，现在没时间写，留着明天再给你发
#section5,
#section5 .fp-slide,
#section5 .fp-tableCell,
footer,
footer .fp-slide,
footer .fp-tableCell
{
height: auto !important;
}
这个是页面高度根据内容高度变化的，
autoScrolling:false, 这个是关闭自动滚一整屏的。
本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：
运行效果图如下：
主要代码如下：
$(function()
{
//加载时的图片
var
$loader=
$('#st_loading');
//获取的ul元素
var
$list=
$('#st_nav');
//当前显示的图片
var
$currImage
=
$('#st_main').children('img:first');
//加载当前的图片
//同时显示导航的项
$('img').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//滑出导航
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
//计算出将被显示的略缩图所在的div元素的宽度
buildThumbs();
function
buildThumbs(){
$list.children('li.album').each(function(){
var
$elem
=
$(this);
var
$thumbs_wrapper
=
$elem.find('.st_thumbs_wrapper');
var
$thumbs
=
$thumbs_wrapper.children(':first');
//每张略缩图占有180像素的宽度和3像素的间距(margin)
var
finalW
=
$thumbs.find('img').length
*
183;
$thumbs.css('width',finalW
+
'px');
//是这元素具有滚动性
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//点击菜单项目的时候（向上向下箭头切换）
//使略缩图的div层显示和隐藏当前的
//打开菜单（如果有的话）
$list.find('.st_arrow_down').live('click',function(){
var
$this
=
$(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var
$elem
=
$this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var
$thumbs_wrapper
=
$this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
var
$this
=
$(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//点击略缩图，改变大的图片
$list.find('.st_thumbs
img').bind('click',function(){
var
$this
=
$(this);
$loader.show();
$('img
class="st_preview"/').load(function(){
var
$this
=
$(this);
var
$currImage
=
$('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//隐藏当前已经打开了的菜单的函数
function
hideThumbs(){
$list.find('li.current')
.animate({'height':'50px'},400,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide(200)
.andSelf()
.find('.st_link
span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}
//是当前的略缩图div层滚动
//当鼠标移至菜单层的时候会自动地进行滚动
function
makeScrollable($outer,
$inner){
var
extra
=
800;
//获取菜单的宽度
var
divWidth
=
$outer.width();
//移除滚动条
$outer.css({
overflow:
'hidden'
});
//查找容器上的最后一张图片
var
lastElem
=
$inner.find('img:last');
$outer.scrollLeft(0);
//当用户鼠标离开菜单的时候
$outer.unbind('mousemove').bind('mousemove',function(e){
var
containerWidth
=
lastElem[0].offsetLeft
+
lastElem.outerWidth()
+
2*extra;
var
left
=
(e.pageX
-
$outer.offset().left)
*
(containerWidth-divWidth)
/
divWidth
-
extra;
$outer.scrollLeft(left);
});
}
});
希望本文所述对大家的jQuery程序设计有所帮助。
通过CSS把容器的滚动条隐藏即可
例如一般都是窗口出现滚动条:
body {
overflow-x:hidden;
}