(笔记)banner轮播（wap）淡入淡出

来源：互联网发布：安川机器人编程技巧编辑：程序博客网时间：2024/06/06 00:23

样式：

.p_index_new { background-color: #eee; height: 100%; }
.p_index_new .banner img { width: 100%; height: 3.81rem; display: block; }

.banner { width: 100%; position: relative; overflow: auto; height: 3.81rem; }
.banner-moveul li { width: 100%; height: 3.81rem; position: absolute; top: 0; left: 0; }
.banner-moveul li a { display: block; width: 100%; height: 3.81rem; }
.banner-moveul li a img { width: 100%; display: block; }
.banner .dots { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; width: 100%; overflow: hidden; }
.banner .dots li { width: 0.2rem; height: 0.2rem; display: inline-block; margin: 0 4px; border-radius: 50%; background-color: #fff; }
.banner .dots li.current { background-color: #666; }

结构

</div>

JS部分

$(function(){
var num=$('.dots .dot').length;
var i_mun=0;
var timer_banner=null;
$('.dots .dot').eq(0).addClass('current');
$('.banner-moveul li:gt(0)').hide();//页面加载隐藏所有的li 除了第一个
//底下小图标点击切换
// $('.dots .dot').click(function(){
// $(this).addClass('active')
// .siblings('.dot').removeClass('current');
// var i_mun1=$('.dots .dot').index(this);
// $('.banner-moveul li').eq(i_mun1).fadeIn(1000)
// .siblings('li').fadeOut(1000);

// i_mun=i_mun1;
// });
//自动播放函数
function bannerMoveks(){
timer_banner=setInterval(function(){
move_banner()
},3000)
};
bannerMoveks();//开始自动播放

// // 鼠标移动到banner上时停止播放
// $('.banner').mouseover(function(){
// clearInterval(timer_banner);
// });

// //鼠标离开 banner 开启定时播放
// $('.banner').mouseout(function(){
// bannerMoveks();
// });

//banner 右边点击执行函数
function move_banner(){
if(i_mun==num-1){
i_mun=-1
}
//大图切换
$('.banner-moveul li').eq(i_mun+1).stop().fadeIn(1000)
.siblings('li').stop().fadeOut(1000);
//小图切换
$('.dots .dot').eq(i_mun+1).addClass('current')
.siblings('.dot').removeClass('current');

i_mun++
}

//左右滑动js
$('.banner').touchwipe({
wipeLeft:function(){
clearInterval(timer_banner);
move_banner();
timer_banner = setInterval(move_banner,3000);
},wipeRight:function(){
clearInterval(timer_banner);
if(i_mun==-1){
i_mun=num-1
}
//大图切换
$('.banner-moveul li').eq(i_mun-1).stop().fadeIn(1000)
.siblings('li').stop().fadeOut(1000);
//小图切换
$('.dots .dot').eq(i_mun-1).addClass('current')
.siblings('.dot').removeClass('current');

i_mun--
timer_banner = setInterval(move_banner,3000);
},
min_move_x:20,
min_move_y:20,
preventDefaultEvents:true
});
});

</script>

0 0