样式:
.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 class="banner">
<ul class="banner-moveul"><li>
<a href="#" class="a-banner abanner-one"><img src="images/banner1.jpg" width="100%" alt="" /></a>
</li>
<li>
<a href="#" class="a-banner abanner-two"><img src="images/banner2.jpg" width="100%" alt="" /></a>
</li>
<li>
<a href="#" class="a-banner abanner-three"><img src="images/banner3.jpg" width="100%" alt="" /></a>
</li>
<li>
<a href="#" class="a-banner abanner-three"><img src="images/banner4.jpg" width="100%" alt="" /></a>
</li>
</ul>
<ol class="dots">
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ol>
</div>
JS部分
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="js/banner.js"></script>
<script>
$(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>