一、轮播图之左右切换
1、html部分
2、js部分
var slider = Swipe(document.getElementById('slider'), { auto: 3000,//轮播时间 continuous: true,//是否连续播放 disableScroll: false, callback: function(pos) { var i = bullets.length; while (i--) { bullets[i].className = ' '; } bullets[pos].className = 'on'; } }); var bullets = document.getElementById('position').getElementsByTagName('li'); 3、css部分
.center { position: relative; width: 100%; top: 1.28rem; } .center .carousel { width: 100%; height: 3rem; background: red; overflow: hidden; } .center .carousel img { width: 100%; height: 3rem; } 4、sass部分
.center{ position:relative; width: 100%; top:1.28rem; .carousel { width: 100%; height: 3rem; background: red; overflow: hidden; img{ width: 100%; height: 3rem; } } } 二、轮播图之上下切换
1、html部分
- 111111
- 222222
- 333333
- 444444
- 555555
- 666666
- 777777
- 111111
2、css部分
.contain{ width: 100%; height: 50px; overflow: hidden; } li{ width: 100%; height: 50px; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center; background: lightpink; } li:nth-child(odd){ background: burlywood; } 3、js部分
三、全屏轮播
1、html部分
2、css部分
.banner-box{ min-width: 1210px; max-width: 1920px; height: 500px; margin: 0px auto; position: relative; overflow: hidden; z-index: 1;}.banner_innerBox{ left: 0px; top: 0px; width: 100%;}.banner_ul { position: absolute; left: 0px; top: 0px; width: 100%;}.banner_innerBox li{ float: left;}.banner_ul li a { display: block; width: 100%; height: 500px; z-index: 1; top: 0px; background: #FFF; opacity: 0; filter: Alpha(Opacity=0);}.dianhao_ul { position: absolute; left: 48%; bottom: 10px; width: 100%; font-size: 0px; text-align: center; height: 20px; z-index: 100; margin: 0 auto;}.dianhao_ul li { display: inline-block; width: 15px; height: 15px; /*background: url(../images/liticon.png) no-repeat 0px -320px;*/ margin-right: 7px; cursor: pointer; background: #ff5837; border-radius: 15px;}.dianhao_ul li.cur { /*background: url(../images/liticon.png) no-repeat 0px -280px;*/ background: #FFF;}.index_bannerBtn { position: absolute; top: 50%; margin-top: -30px; width: 38px; height: 60px; line-height: 60px; text-align: center; font-size: 30px; background: rgba(0, 0, 0, 0.5); color: #fff; cursor: pointer; display: none;}.banner-box:hover .index_bannerBtn { display: block;}.banner-box .Pre { left: 0;}.banner-box .Next { right: 0;} 3、js部分
window.οnlοad= function() { //首页banner效果 var banner_ul=$('#banner_ul'); banner_ul.append(banner_ul.find('li').clone()); var bannerCounts=$('#banner_ul li').length; var banner_lis=banner_ul.find('li'); banner_lis.css({ 'width':100/bannerCounts+'%' }); banner_ul.css({ 'width':bannerCounts*100+'%' }); //当前编号 var cBIndex=(function(){ var curIndex=0; return function(curI){ if(curI!==undefined){ curIndex=curI; } return curIndex; } })(); //点号样式控制 function dianhaoCssFn(dh_index){ var dh_in=dh_index%(bannerCounts/2); $('#dianhao_ul li').removeClass('cur'); $('#dianhao_ul li').eq(dh_in).addClass('cur'); } //内部元素摇摆特效 function ybFn(flag){ var curI=cBIndex(); var flyDiv=banner_lis.eq(cBIndex()).find('.flyPic_Box'); flyDiv.animate({ 'left':parseInt(flyDiv.css('left'))+30*flag+'px' },300,function(){ flyDiv.animate({ 'left':parseInt(flyDiv.css('left'))-30*flag+'px' },300); }); } function bannerPreFn(){ $('#bannerNext_A,#bannerPre_A').unbind('click'); $('#dianhao_ul').undelegate('mouseenter'); if(cBIndex()==0){ banner_ul.css('left',-(bannerCounts/2)*100+'%'); cBIndex(bannerCounts/2); } banner_ul.animate({ 'left':-(cBIndex()-1)*100+'%' },500,'swing',function(){ cBIndex(cBIndex()-1); dianhaoCssFn(cBIndex()); //内部元素摇摆 ybFn(1); $('#bannerPre_A').bind('click',bannerPreFn); $('#bannerNext_A').bind('click',bannerNextFn); $('#dianhao_ul').delegate('li','mouseenter',function(){ dianhaoAniFn($(this)); }) }); } function bannerNextFn(){ $('#bannerNext_A,#bannerPre_A').unbind('click'); $('#dianhao_ul').undelegate('mouseenter'); if(cBIndex()>=bannerCounts-1){ banner_ul.css('left',-(bannerCounts/2-1)*100+'%'); cBIndex(bannerCounts/2-1); } banner_ul.animate({ 'left':-(cBIndex()+1)*100+'%' },500,'swing',function(){ cBIndex(cBIndex()+1); dianhaoCssFn(cBIndex()); //内部元素摇摆 ybFn(-1); $('#bannerPre_A').bind('click',bannerPreFn); $('#bannerNext_A').bind('click',bannerNextFn); $('#dianhao_ul').delegate('li','mouseenter',function(){ dianhaoAniFn($(this)); }) }); }// 点击点号控制飞入飞出 function dianhaoAniFn(curElment) { banner_ul.stop(); var curLiIndex=curElment.index(); var tarIndex=0; if(cBIndex()>(bannerCounts/2-1)){ tarIndex=curLiIndex+bannerCounts/2; }else{ tarIndex=curLiIndex; } if(tarIndex-cBIndex()==0){ return; } $('#bannerNext_A,#bannerPre_A').unbind('click');// $('#dianhao_ul').undelegate('mouseenter'); var ybfnFlag=tarIndex>cBIndex()?-1:1; banner_ul.animate({ 'left':-tarIndex*100+'%' },500,'swing',function(){ cBIndex(tarIndex); dianhaoCssFn(tarIndex); //内部元素摇摆 ybFn(ybfnFlag); $('#bannerPre_A').bind('click',bannerPreFn); $('#bannerNext_A').bind('click',bannerNextFn); /* $('#dianhao_ul').delegate('li','mouseenter',function(){ dianhaoAniFn($(this)); })*/ }); } $('#dianhao_ul').delegate('li','mouseenter',function(){ dianhaoAniFn($(this)); }) var banner_Timer=setInterval(bannerNextFn,5000); //向前按钮 $('.Pre').click(function(){ bannerPreFn(); clearInterval(banner_Timer); }); //向后按钮 $('.Next').click(function(){ bannerNextFn(); }); //点击左右按钮时定时器清除 离开时添加 $('.Pre').mouseleave(function(){ banner_Timer=setInterval(bannerNextFn,5000); }); //点击圆点时定时器清除 离开时添加 不能同时添加清除定时器 $('.dianhao_ul li').mouseenter(function(){ clearInterval(banner_Timer); }); $('.dianhao_ul li').mouseleave(function(){ banner_Timer=setInterval(bannerNextFn,5000); }); }