简单有缝JQbanner轮播;自适应屏幕宽度;用于手机端;我是初学者;欢迎大牛点评

来源：互联网发布：unity3d 导出android 编辑：程序博客网时间：2024/04/29 21:36

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js"></script>
<title>手机端自适应屏幕宽度轮播</title>
<style>
*{margin: 0;padding: 0;}
ul,ol{ list-style-type:none;}
.bannerbox{width: 100%;overflow: hidden;position: relative;}
.bigbox{position: absolute;top: 0;left:0;}
.bigbox li{float: left;}
.bigbox li a{display:block;width: 100%;height: 100%;}
.bigbox li a img{display:block;width: 100%;height: 100%;}
.yuandian{position: absolute;bottom: 1rem;right:1rem;}
.yuandian li{width: 30px;height:30px; background: #ffffff;float: left;margin-right: 1rem;border-radius: 50%;}
.yuandian li.curt{background: red;}
</style>
</head>
<body>
<div class="bannerbox">
<ul class="bigbox">
<li><a href="#"><img src="images/banner.png" alt="" /></a></li>
<li><a href="#"><img src="images/banner.png" alt="" /></a></li>
<li><a href="#"><img src="images/banner.png" alt="" /></a></li>
<li><a href="#"><img src="images/banner.png" alt="" /></a></li>
<p style="clear:both"></p>
</ul>
<ul class="yuandian">
<li class="curt"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
$(function(){
var see_width=document.body.clientWidth;//获取屏幕宽度
$('.bigbox li').width(see_width);//给li宽度与屏幕宽度一致
var li_len=$('.bigbox li').length;//获取li个数
$('.bigbox').width(see_width*li_len);
var img_height=$('.bigbox li img').height();//获取li高度//
var img =$('.bigbox li').eq(0).find('img');
$("<img/>").attr("src", $(img).attr("src")).load(function() {//根据第一张图片比例给高度
realWidth = this.width;
realHeight = this.height;
var gheight=see_width/realWidth*realHeight;
$('.bannerbox').height(gheight);
$('.bigbox').height(gheight);
})
$('.yuandian li').click(function(){
window.clearInterval(timer1)
var see_width=document.body.clientWidth;
var li_d=$(this).index();
var this_left=-(see_width*li_d);
$('.bigbox').animate({left:this_left+"px"},"normal");
$('.yuandian li').removeClass('curt');
$(this).addClass('curt');
timer1=window.setInterval(function(){letgo()},3000)
})
})
function letgo(){
var see_width=document.body.clientWidth;//获取屏幕宽度
var li_len=$('.bigbox li').length;//获取li个数
var lu_left=parseInt($('.bigbox').css('left'));
var kkk=-see_width*(li_len-1);
// alert(kkk);
if(lu_left<=kkk){//判断是否是最后一个li
$('.bigbox').animate({left:"0px"},"normal");
$('.yuandian li').removeClass('curt');
$('.yuandian li').eq(0).addClass('curt');
}else{
$('.bigbox').animate({left:lu_left-see_width+"px"},"normal");
var li=-(lu_left-see_width)/see_width;
$('.yuandian li').removeClass('curt');
$('.yuandian li').eq(li).addClass('curt');
}
}
timer1=window.setInterval(function(){letgo()},3000);
</script>
</body>
</html>

阅读全文

0 0