一、轮播图之左右切换
1、html部分
<div class="carousel"> <div id="slider" class="swipe" style="visibility:visible;"> <div class="swipe-wrap"> <figure> <div class="face faceInner"> <img src="img/find/swip1.jpg"/> </div> </figure> <figure> <div class="face faceInner"> <img src="img/find/swip1.jpg" /> </div> </figure> <figure> <div class="face faceInner"> <img src="img/find/swip1.jpg"/> </div> </figure> <figure> <div class="face faceInner"> <img src="img/find/swip1.jpg"/> </div> </figure> </div> <!--圆点--> <nav> <ul id="position"> <li class="on"></li> <li></li> <li></li> <li></li> </ul> </nav> </div> </div>
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;
100%;
top: 1.28rem;
}
.center .carousel {
100%;
height: 3rem;
background: red;
overflow: hidden;
}
.center .carousel img {
100%;
height: 3rem;
}
4、sass部分
.center{
position:relative;
100%;
top:1.28rem;
.carousel {
100%;
height: 3rem;
background: red;
overflow: hidden;
img{
100%;
height: 3rem;
}
}
}
二、轮播图之上下切换
1、html部分
<div id="scroll0" class="contain"> <ul id="ul"> <li>111111</li> <li>222222</li> <li>333333</li> <li>444444</li> <li>555555</li> <li>666666</li> <li>777777</li> <li>111111</li> </ul> </div>
2、css部分
.contain{
100%;
height: 50px;
overflow: hidden;
}
li{
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部分
<script type="text/javascript">
var index = 0;
var length = $('li').length;
var height = $('li').height();
function move(){
index++;
if(index == -1){
index = length-1;
}else if(index == length){
index = 0;
$('ul').css({'margin-top':0});
}
$('ul').animate({
marginTop:-index*height+'px'
},600);
}
function autoMove(){
interval = setInterval(function(){
move();
},3000)
}
autoMove();
</script>
三、全屏轮播
1、html部分
<!--轮播图-->
<div class="banner_innerBox" id="banner_innerBox">
<ul class="banner_ul" id="banner_ul">
<li class="num0{$i+1}" style="background:url(img/banner/1600-900-200k-3_305-355458_1600x900.jpg) center no-repeat;">
<a href="{$bannerLi.b_url}" target="_blank"></a>
</li>
<li class="num0{$i+1}" style="background:url(img/banner/NSD-2016-1600x900_305-285624_1600x900.jpg) center no-repeat;">
<a href="{$bannerLi.b_url}" target="_blank"></a>
</li>
<li class="num0{$i+1}" style="background:url(img/banner/1600-900-200k-3_305-355458_1600x900.jpg) center no-repeat;">
<a href="{$bannerLi.b_url}" target="_blank"></a>
</li>
</ul>
<ul class="dianhao_ul" id="dianhao_ul">
<li class="cur"></li>
<li class=""></li>
<li class=""></li>
</ul>
<div class='index_bannerBtn Pre'><</div>
<div class='index_bannerBtn Next'>></div>
</div>
2、css部分
.banner-box{
min- 1210px;
max- 1920px;
height: 500px;
margin: 0px auto;
position: relative;
overflow: hidden;
z-index: 1;
}
.banner_innerBox{
left: 0px;
top: 0px;
100%;
}
.banner_ul {
position: absolute;
left: 0px;
top: 0px;
100%;
}
.banner_innerBox li{
float: left;
}
.banner_ul li a {
display: block;
100%;
height: 500px;
z-index: 1;
top: 0px;
background: #FFF;
opacity: 0;
filter: Alpha(Opacity=0);
}
.dianhao_ul {
position: absolute;
left: 48%;
bottom: 10px;
100%;
font-size: 0px;
text-align: center;
height: 20px;
z-index: 100;
margin: 0 auto;
}
.dianhao_ul li {
display: inline-block;
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;
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.onload= 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);
});
}