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

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

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

jquery灵活可控的图文幻灯片特效

2014-03-08 06:03:57 作者:天外飞仙 人气:1148 Views

jquery灵活可控的图文幻灯片特效
jquery灵活可控的图文幻灯片特效
引用js代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function() { var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length; // Remove scrollbar in JS $('#slidesContainer').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides.wrapAll('<div id="slideInner"></div>') // Float left to display horizontally, readjust .slides width .css({ 'float': 'left', 'width': slideWidth }); // Set #slideInner width equal to total width of all slides $('#slideInner').css('width', slideWidth * numberOfSlides); // Insert controls in the DOM $('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>'); // Hide left arrow control on first load manageControls(currentPosition); // Create event listeners for .controls clicks $('.control').bind('click', function() { // Determine new position currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1; // Hide / show controls manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft': slideWidth * ( - currentPosition) }); }); // manageControls: Hides and Shows controls depending on currentPosition function manageControls(position) { // Hide left arrow if position is first slide if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() } // Hide right arrow if position is last slide if (position == numberOfSlides - 1) { $('#rightControl').hide() } else { $('#rightControl').show() } } });</script>

下载地址
预览地址

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

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

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

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

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

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