jQuery如何实现焦点图轮播效果？（代码示例一） |
您所在的位置：网站首页 › jquery轮播图怎么实现 › jQuery如何实现焦点图轮播效果？（代码示例一） |
jQuery如何实现焦点图轮播效果？（代码示例一）
|
本篇文章给大家带来的内容是jQuery如何实现焦点图轮播效果？（代码示例一）。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
JQ实现焦点图轮播效果（一） 效果图：
图片素材 ：
代码如下，复制即可使用： （不过里面的JQ路径和图片路径需要自己改成自己的JQ路径和图片路径，否则是没有效果显示的哦） JQ实现焦点图轮播效果（一） * { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative; } #list { width: 4200px; height: 400px; position: absolute; z-index: 1; } #list img { float: left; } #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px; } #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; } #buttons .on { background: orangered; } .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0, 0, 0, .3); color: #fff; } .arrow:hover { background-color: RGBA(0, 0, 0, .7); } #container:hover .arrow { display: block; } #prev { left: 20px; } #next { right: 20px; } $(function() { var container = $('#container'); var list = $('#list'); var buttons = $('#buttons span'); var prev = $('#prev'); var next = $('#next'); var index = 1; var len = 5; var interval = 3000; var timer; function animate(offset) { var left = parseInt(list.css('left')) + offset; if(offset > 0) { offset = '+=' + offset; } else { offset = '-=' + Math.abs(offset); } list.animate({ 'left': offset }, 300, function() { if(left > -200) { list.css('left', -600 * len); } if(left < (-600 * len)) { list.css('left', -600); } }); } function showButton() { buttons.eq(index - 1).addClass('on').siblings().removeClass('on'); } function play() { timer = setTimeout(function() { next.trigger('click'); play(); }, interval); } function stop() { clearTimeout(timer); } next.bind('click', function() { if(list.is(':animated')) { return; } if(index == 5) { index = 1; } else { index += 1; } animate(-600); showButton(); }); prev.bind('click', function() { if(list.is(':animated')) { return; } if(index == 1) { index = 5; } else { index -= 1; } animate(600); showButton(); }); buttons.each(function() { $(this).bind('click', function() { if(list.is(':animated') || $(this).attr('class') == 'on') { return; } var myIndex = parseInt($(this).attr('index')); var offset = -600 * (myIndex - index); animate(offset); index = myIndex; showButton(); }) }); container.hover(stop, play); play(); });
;
;
更多前端开发知识，请查阅 HTML中文网 ！！ 以上就是jQuery如何实现焦点图轮播效果？（代码示例一）的详细内容，更多请关注html中文网其它相关文章！ |
【本文地址】
今日新闻 |
推荐新闻 |