轮播海报html代码 |
您所在的位置:网站首页 › html网页设计banner轮播 › 轮播海报html代码 |
代码介绍 我们在做网站时,经常需要制作轮播图,可以在自己的网站上进行图片的轮播切换。今天给大家介绍一种jquery自动全屏轮播图banner,先让我们看下效果图: 相关代码 代码实例 以下是这款jquery自动全屏轮播图banner切换图的代码: HTML代码
JQUERY代码 /** * 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: 4000, 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 += ' ';for (var i = 0; i < sliderCount; i++) { if (i == 0) { html += ' '}else{ html += ' '} } html += ' '$slider.append(html); // 指示器居中 var $pointer = $slider.find('.slider-pointer'); $pointer.css({ left: '50%', marginLeft: - $pointer.width()/2 }); } // pointerControl if (settings.arrowControl) { var html = ""; html += '' $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) { if (currentIndex != $(this).index()) { 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() { sliderFun.stop(); 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(); }); 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; } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |