自动滑动的banner图
实例:
HTML页面:
<div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-width: 1200px;"> <div class="slider" id="slider"> <div class="slider-inner"> <div class="item"> <img src="/public/home/images/1.jpg" "> </div> <div class="item"> <img src="/public/home/images/21.jpg" "> </div> </div> </div> </div>
CSS代码:
.slider { position: relative; height: 400px; min-width: 1004px; width: 100%; overflow: hidden; } .slider .slider-pointer { position: absolute; bottom: 20px; color: #fff; list-style: none; padding: 0; z-index: 999; } .slider .slider-pointer li { display: inline-block; margin: 0 15px; width: 15px; height: 15px; border-radius: 15px; background-color: #ffffff; opacity: 0.85; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5); transition: all 320ms ease; } .slider .slider-pointer li:hover { background-color: #e30006; } .slider .slider-pointer li.active { background-color: #b00005; } .slider .slider-inner { width: 100%; height: 100%; position: relative; } .slider .slider-inner .item { width: 100%; height: 100%; float: left; } .slider .slider-inner .img { background-position: center top !important; width: 100%; height: 100%; } .slider .slider-control { position: absolute; width: 30px; height: 30px; z-index: 999; border-radius: 30px; text-align: center; font-weight: 900; font-size: 20px; line-height: 30px; background-color: #ffffff; opacity: 0.5; cursor: pointer; top: 40%; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5); transition: all 320ms ease; } .slider .slider-control:hover { opacity: 0.65; background-color: #b00005; } .slider .slider-control:active { opacity: 0.85; } .slider .slider-control.prev { display: none; left: 20px; } .slider .slider-control.next { display: none; right: 20px; } .slider:hover .slider-control.prev { display: block; left: 20px; } .slider:hover .slider-control.next { display: block; right: 20px; }
Javascript代码:
/** * Author : CheneyLiu * Date : date * isAuto: true, 自动播放 * transTime: 3000, 自动播放间隔 * animateSpeed: 1000, 动画速度 * sliderMode: 'slide', 类型//'slide | fade', * pointerControl: true, 指示器开关 * pointerEvent: 'click', 指示器类型//'hover' | 'click', * arrowControl: true, 左右控制 */ ; (function($) { $.fn.Slider = function(options) { "use strict"; var settings = $.extend({ isAuto : true, transTime : 3000, animateSpeed : 1000, sliderMode : 'slide', //'slide | fade', pointerControl : true, pointerEvent : 'click',//'hover' | 'click', arrowControl : true, }, options); var interval; var isAnimating = false; var $slider = $(this); var $sliderWrap = $slider.find('.slider-inner'); var sliderCount = $sliderWrap.find('> .item').length; var sliderWidth = $slider.width(); var currentIndex = 0; var sliderFun = { controlInit : function() { // pointerControl if (settings.pointerControl) { var html = ''; html += '<ol class="slider-pointer">'; for (var i = 0; i < sliderCount; i++) { if (i == 0) { html += '<li class="active"></li>' } else { html += '<li></li>' } } html += '</ol>' $slider.append(html); // 指示器居中 var $pointer = $slider.find('.slider-pointer'); $pointer.css({ left : '50%', marginLeft : -$pointer.width() / 2 }); } // pointerControl if (settings.arrowControl) { var html = ""; html += '<span class="slider-control prev"><</span>'; html += '<span class="slider-control next">></span>' $slider.append(html); } $slider.on('click', '.slider-control.prev', function( event) { sliderFun.toggleSlide('prev'); }); $slider.on('click', '.slider-control.next', function( event) { sliderFun.toggleSlide('next'); }); }, // slider sliderInit : function() { sliderFun.controlInit(); // 模式选择 if (settings.sliderMode == 'slide') { // slide 模式 $sliderWrap.width(sliderWidth * sliderCount); $sliderWrap.children().width(sliderWidth); } else { // mode 模式 $sliderWrap.children().css({ 'position' : 'absolute', 'left' : 0, 'top' : 0 }); $sliderWrap.children().first().siblings().hide(); } // 控制事件 if (settings.pointerEvent == 'hover') { $slider.find('.slider-pointer > li').mouseenter( function(event) { sliderFun.sliderPlay($(this).index()); }); } else { $slider.find('.slider-pointer > li').click( function(event) { sliderFun.sliderPlay($(this).index()); }); } // 自动播放 sliderFun.autoPlay(); }, // slidePlay sliderPlay : function(index) { sliderFun.stop(); isAnimating = true; $sliderWrap.children().first().stop(true, true); $sliderWrap.children().stop(true, true); $slider.find('.slider-pointer').children().eq(index) .addClass('active').siblings().removeClass( 'active'); if (settings.sliderMode == "slide") { // slide if (index > currentIndex) { $sliderWrap.animate({ left : '-=' + Math.abs(index - currentIndex) * sliderWidth + 'px' }, settings.animateSpeed, function() { isAnimating = false; sliderFun.autoPlay(); }); } else if (index < currentIndex) { $sliderWrap.animate({ left : '+=' + Math.abs(index - currentIndex) * sliderWidth + 'px' }, settings.animateSpeed, function() { isAnimating = false; sliderFun.autoPlay(); }); } else { return; } } else { // fade if ($sliderWrap.children(':visible').index() == index) return; $sliderWrap.children().fadeOut( settings.animateSpeed).eq(index).fadeIn( settings.animateSpeed, function() { isAnimating = false; sliderFun.autoPlay(); }); } currentIndex = index; }, // toggleSlide toggleSlide : function(arrow) { if (isAnimating) { return; } var index; if (arrow == 'prev') { index = (currentIndex == 0) ? sliderCount - 1 : currentIndex - 1; sliderFun.sliderPlay(index); } else if (arrow == 'next') { index = (currentIndex == sliderCount - 1) ? 0 : currentIndex + 1; sliderFun.sliderPlay(index); } }, // autoPlay autoPlay : function() { if (settings.isAuto) { interval = setInterval(function() { var index = currentIndex; (currentIndex == sliderCount - 1) ? index = 0 : index = currentIndex + 1; sliderFun.sliderPlay(index); }, settings.transTime); } else { return; } }, //stop stop : function() { clearInterval(interval); }, }; sliderFun.sliderInit(); } })(jQuery); jQuery(document).ready(function($) { $('#slider').Slider(); });
以上是做banner的基本代码实例。