<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播</title> <!-- 轮播广告 css start--> <style> .flexslider{position:relative;width:100%;height:400px;overflow:hidden;zoom:1} .flexslider .slides li{width:100%;height:100%} .flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:1;filter:alpha(opacity=50)} .flex-control-nav{width:100%;position:absolute;bottom:10px;text-align:center} .flex-control-nav li{margin:0 2px;display:inline-block;zoom:1} .flex-control-paging li a{background:url(http://chzeze.cc/images/dot.png) no-repeat 0 -16px;display:block;height:16px;overflow:hidden;text-indent:-99em;width:16px;cursor:pointer} .flex-control-paging li a.flex-active,.flex-control-paging li.active a{background-position:0 0} .flexslider .slides a img{width:100%;height:400px;display:block} </style> <!-- 轮播广告 css end--> </head> <body style="margin: 0px;"> <!-- 轮播广告 --> <div id="banner_tabs" class="flexslider"> <ul class="slides"> <li> <a title="" target="_blank" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li> <li> <a title="" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner4.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li> <li> <a title="" href="#"> <img width="1920" height="482" alt="" style="background: url(http://www.chzeze.cc/Page/index/images/banner2.png) no-repeat center;" src="http://chzeze.cc/images/alpha.png"> </a> </li> </ul> <ol id="bannerCtrl" class="flex-control-nav flex-control-paging" style="padding-left: 0px;"> <li><a>1</a></li> <li><a>2</a></li> <li><a>2</a></li> </ol> </div> <script src="http://chzeze.cc/Page/jquery.js"></script> <script> <!--背景轮播 js 开始--> $(function($, window, document, undefined) { Slider = function(container, options) { "use strict"; if (!container) return; var options = options || {}, currentIndex = 0, cls = options.activeControllerCls, delay = options.delay, isAuto = options.auto, controller = options.controller, event = options.event, interval, slidesWrapper = container.children().first(), slides = slidesWrapper.children(), length = slides.length, childWidth = container.width(), totalWidth = childWidth * slides.length; function init() { var controlItem = controller.children(); mode(); event == ‘hover‘ ? controlItem.mouseover(function() { stop(); var index = $(this).index(); play(index, options.mode); }).mouseout(function() { isAuto && autoPlay(); }) : controlItem.click(function() { stop(); var index = $(this).index(); play(index, options.mode); isAuto && autoPlay(); }); isAuto && autoPlay(); } function mode() { var wrapper = container.children().first(); options.mode == ‘slide‘ ? wrapper.width(totalWidth) : wrapper.children().css({ ‘position‘: ‘absolute‘, ‘left‘: 0, ‘top‘: 0, ‘display‘:‘block‘ }).first().siblings().hide(); } function autoPlay() { interval = setInterval(function() { triggerPlay(currentIndex); }, options.time); } function triggerPlay(cIndex) { var index; (cIndex == length - 1) ? index = 0 : index = cIndex + 1; play(index, options.mode); } function play(index, mode) { slidesWrapper.stop(true, true); slides.stop(true, true); mode == ‘slide‘ ? (function() { if (index > currentIndex) { slidesWrapper.animate({ left: ‘-=‘ + Math.abs(index - currentIndex) * childWidth + ‘px‘ }, delay); } else if (index < currentIndex) { slidesWrapper.animate({ left: ‘+=‘ + Math.abs(index - currentIndex) * childWidth + ‘px‘ }, delay); } else { return; } })() : (function() { if (slidesWrapper.children(‘:visible‘).index() == index) return; slidesWrapper.children().fadeOut(delay).eq(index).fadeIn(delay); })(); try { controller.children(‘.‘ + cls).removeClass(cls); controller.children().eq(index).addClass(cls); } catch (e) {} currentIndex = index; options.exchangeEnd && typeof options.exchangeEnd == ‘function‘ && options.exchangeEnd.call(this, currentIndex); } function stop() { clearInterval(interval); } function prev() { stop(); currentIndex == 0 ? triggerPlay(length - 2) : triggerPlay(currentIndex - 2); isAuto && autoPlay(); } function next() { stop(); currentIndex == length - 1 ? triggerPlay(-1) : triggerPlay(currentIndex); isAuto && autoPlay(); } init(); return { prev: function() { prev(); }, next: function() { next(); } } }; }(jQuery, window, document)); $(function() { var bannerSlider = new Slider($(‘#banner_tabs‘), { time: 5000, delay: 400, event: ‘hover‘, auto: true, mode: ‘fade‘, controller: $(‘#bannerCtrl‘), activeControllerCls: ‘active‘ }); $(‘#banner_tabs .flex-prev‘).click(function() { bannerSlider.prev() }); $(‘#banner_tabs .flex-next‘).click(function() { bannerSlider.next() }); }) <!--背景轮播 js结束--> </script> </div> </body> </html>
原文：http://www.cnblogs.com/zeze/p/5127475.html