slide.css
.ck-slide ul { margin:0; padding:0; list-style-type:none; } .ck-slide { overflow:hidden; position:relative; } .ck-slide ul.ck-slide-wrapper { top:0; left:0; z-index:1; margin:0; padding:0; position:absolute; } .ck-slide ul.ck-slide-wrapper li { position:absolute; } .ck-slide .ck-ctrl { } .ck-slide .ck-prev, .ck-slide .ck-next { top:50%; z-index:2; width:35px; height:70px; opacity:.15; background:red; margin-top:-35px; position:absolute; border-radius:3px; text-indent:-9999px; background-repeat:no-repeat; transition:opacity .2s linear 0s; } .ck-slide .ck-prev { left:5px; background:url(../images/arrow-left.png) #000 no-repeat center center; } .ck-slide .ck-next { right:5px; background:url(../images/arrow-right.png) #000 no-repeat center center; } .ck-slidebox { left:50%; z-index:30; position:absolute; bottom:12px; } .ck-slidebox ul { height:20px; padding:0 4px; background:rgba(0,0,0,0.5); border-radius:8px; } .ck-slidebox ul li { float:left; height:12px; margin:4px 4px; } .ck-slidebox ul li em { width:12px; height:12px; cursor:pointer; background:#fff; border-radius:100%; text-indent:-9999px; display:block; } .ck-slidebox ul li.current em { background:#FE6500; } .ck-slidebox ul li em:hover { background:#FE6500; } .ck-slidebox .dot-wrap { } .ck-slidebox .slideWrap{ }
slide.js
;(function($){ $.fn.ckSlide = function(opts){ opts = $.extend({}, $.fn.ckSlide.opts, opts); this.each(function(){ var slidewrap = $(this).find('.ck-slide-wrapper'); var slide = slidewrap.find('li'); var count = slide.length; var that = this; var index = 0; var time = null; $(this).data('opts', opts); // next $(this).find('.ck-next').on('click', function(){ if(opts['isAnimate'] == true){ return; } var old = index; if(index >= count - 1){ index = 0; }else{ index++; } change.call(that, index, old); }); // prev $(this).find('.ck-prev').on('click', function(){ if(opts['isAnimate'] == true){ return; } var old = index; if(index <= 0){ index = count - 1; }else{ index--; } change.call(that, index, old); }); $(this).find('.ck-slidebox li').each(function(cindex){ $(this).on('click.slidebox', function(){ change.call(that, cindex, index); index = cindex; }); }); // focus clean auto play $(this).on('mouseover', function(){ if(opts.autoPlay){ clearInterval(time); } $(this).find('.ctrl-slide').css({opacity:0.6}); }); // leave $(this).on('mouseleave', function(){ if(opts.autoPlay){ startAtuoPlay(); } $(this).find('.ctrl-slide').css({opacity:0.15}); }); startAtuoPlay(); // auto play function startAtuoPlay(){ if(opts.autoPlay){ time = setInterval(function(){ var old = index; if(index >= count - 1){ index = 0; }else{ index++; } change.call(that, index, old); }, 2000); } } // 修正box var box = $(this).find('.ck-slidebox'); box.css({ 'margin-left':-(box.width() / 2) }) // dir switch(opts.dir){ case "x": opts['width'] = $(this).width(); slidewrap.css({ 'width':count * opts['width'] }); slide.css({ 'float':'left', 'position':'relative' }); slidewrap.wrap('<div class="ck-slide-dir"></div>'); slide.show(); break; } }); }; function change(show, hide){ var opts = $(this).data('opts'); if(opts.dir == 'x'){ var x = show * opts['width']; $(this).find('.ck-slide-wrapper').stop().animate({'margin-left':-x}, function(){opts['isAnimate'] = false;}); opts['isAnimate'] = true }else{ $(this).find('.ck-slide-wrapper li').eq(hide).stop().animate({opacity:0}); $(this).find('.ck-slide-wrapper li').eq(show).show().css({opacity:0}).stop().animate({opacity:1}); } $(this).find('.ck-slidebox li').removeClass('current'); $(this).find('.ck-slidebox li').eq(show).addClass('current'); } $.fn.ckSlide.opts = { autoPlay: false, dir: null, isAnimate: false }; })(jQuery);
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/slide.css"> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/slide.js"></script> <style> .ck-slide { width:700px; height:320px; margin:20px auto 0 auto; } .ck-slide ul.ck-slide-wrapper { height:320px; } </style> </head> <body> <div class="ck-slide"> <ul class="ck-slide-wrapper"> <li> <a href="javascript:;"><img src="images/1.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/2.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/3.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/4.jpg" alt="" style="width:700px;"></a> </li> <li style="display:none"> <a href="javascript:;"><img src="images/5.jpg" alt="" style="width:700px;"></a> </li> </ul> <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a> <div class="ck-slidebox"> <div class="slideWrap"> <ul class="dot-wrap"> <li class="current"><em>1</em></li> <li><em>2</em></li> <li><em>3</em></li> <li><em>4</em></li> <li><em>5</em></li> </ul> </div> </div> </div> <script> $('.ck-slide').ckSlide({ autoPlay:true /*dir:"x"*/ }); </script> </body> </html>
效果图:
PS:兼容IE9+