您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery选项卡特效 > 正文

导航网站谷歌浏览器初始页jQuery滑动切换特效

2015-04-09 06:04:35 作者:天外飞仙 人气:798 Views

导航网站谷歌浏览器初始页jQuery滑动切换特效
20150409161245
部分jquery代码

<script type="text/javascript"> $(function() { var w = 100 + "%"; var n = $('.roll_ul li').size(); $('.roll_ul').width(100 * n + "%"); $('.roll_ul li').width(100 / n + "%"); var t = 0; $('#banner_next').bind('click', function() { t++; $('#banner_prev').show(); var f = $('.roll_ul').css('left'); $('.roll_ul').animate({ 'left': '-=100%' }, 300); if (t == n - 1) { $('#banner_next').hide() } $('.scroll_nav b').eq(t).siblings().removeClass('current'); $('.scroll_nav b').eq(t).addClass('current'); }) $('#banner_prev').click(function() { t--; $('#banner_next').show(); var l = $('.roll_ul').css('left'); $('.roll_ul').animate({ 'left': '+=100%' }, 300) if (t == 0) { $('#banner_prev').hide() } $('.scroll_nav b').eq(t).siblings().removeClass('current'); $('.scroll_nav b').eq(t).addClass('current'); }) $('.scroll_nav b').each(function(i) { $(this).click(function() { i = $(this).index(); $('#banner_prev').show(); if (i == 0) { $('#banner_prev').hide(); $('#banner_next').show(); } if (i == n - 1) { $('#banner_next').hide(); } var cd = -100 * i + "%"; $('.roll_ul').animate({ 'left': cd }, 500); $(this).siblings().removeClass('current'); $(this).addClass('current') }) }) })</script>

下载地址
预览地址

链接:http://www.jqueryba.com/5476.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!