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

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

首页 > jQuery > jQuery特效 > jQuery焦点图幻灯片特效 > 正文

jQuery带描述右侧选项卡焦点图效果

2014-03-08 12:03:14 作者:天外飞仙 人气:1196 Views

jQuery带描述右侧选项卡焦点图效果
jQuery带描述右侧选项卡焦点图效果
部分js代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript" src="jquery.easing.1.3.js"></script><script type="text/javascript"> $(function() { var current = 1; var iterate = function() { var i = parseInt(current + 1); var lis = $('#rotmenu').children('li').size(); if (i > lis) i = 1; display($('#rotmenu li:nth-child(' + i + ')')); } display($('#rotmenu li:first')); var slidetime = setInterval(iterate, 3000); $('#rotmenu li').bind('click', function(e) { clearTimeout(slidetime); display($(this)); e.preventDefault(); }); function display(elem) { var $this = elem; var repeat = false; if (current == parseInt($this.index() + 1)) repeat = true; if (!repeat) $this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function() { $(this).animate({ 'opacity': '0.7' }, 700); }); current = parseInt($this.index() + 1); var elem = $('a', $this); elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300); var info_elem = elem.next(); $('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function() { $('h1', $(this)).html(info_elem.find('.info_heading').html()); $(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad'); }); $('#rot1 .description').animate({ 'bottom': '-270px' }, 500, 'easeOutCirc', function() { $('p', $(this)).html(info_elem.find('.info_description').html()); $(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad'); }) $('#rot1').prepend($('<img/>', { style: 'opacity:0', className: 'bg' }).load(function() { $(this).animate({ 'opacity': '1' }, 600); $('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function() { $(this).remove(); }); }).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '800').attr('height', '300')); } });</script>

下载地址
预览地址

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

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

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

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

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

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