<!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>
