admin 管理员组文章数量: 887031
html几张图片轮播效果,HTML5
图片轮播，多张效果：
HTML5--图片轮播html,body{
padding:0px;
margin:10px auto;
}
#warpper{
width:1120px;/*一列展示几个的宽度 ,4*280 动态算*/
height:150px;
margin:0 auto;
position:relative;
overflow:hidden;
border:1px solid red;
}
#inner{
/*元素个数*280(div宽度) 动态算 1120px[4个元素] 1440px[5个元素] 1680px[6个元素] 2240px[8个元素]
用JS动态设置改值
*/
width:2240px;
position:absolute;
}
#inner div{
width:270px;
height:150px;
background:#555;
float:left;
margin:0 5px;
}
#optrbtn{
text-align:center;
font-size:20px;
}
#optrbtn span {
display:inline-table;
border:1px solid red;
width:50px;
cursor:pointer;
margin-right:5px;
}
$(function(){
var curNum=0;
var count=$("#inner").children('div').length;
//左滑动
$(".btnleft").click(function(){
//如果到了最后一个元素 停止
if((count-curNum)<=4){
return false;
}
//
curNum+=1;
$("#inner").animate({
left:'-=280'
},500,function(){
//curNum+=1; //写在这里 如果快速点击 这句没有执行 应经开始执行第二次了
});
});
//右滑动
$(".btnright").click(function(){
//如果到了第一个元素 停止
if(curNum<=0){
return false;
}
//
curNum-=1;
$("#inner").animate({
left:'+=280'
},500,function(){
//curNum-=1; //写在这里同样问题
});
});
});
1 2 3 4 5 6 7 8«
»
本文标签： html几张图片轮播效果 Html5
版权声明：本文标题：html几张图片轮播效果,HTML5 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1693780715h242498.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论