简单的前端轮播(无自动跳转)

来源：互联网发布：js中div显示隐藏编辑：程序博客网时间：2024/06/06 03:18
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><!-- bookstrap导入三个 --><link rel="stylesheet" href="bootstrap3.3.7/css/bootstrap.min.css"><script src="js/jquery-3.1.1.min.js"></script><script src="bootstrap3.3.7/js/bootstrap.min.js"></script></head><style>.biankuang{border: 2px solid red;}li{float: left;list-style: none;margin-right: 10px;}</style><body><center><div style="color:red;z-index: 5;top: 30%;left: 0px;" id="houtui"><span class="glyphicon glyphicon-backward"></span></div><div ><img src="image/1.jpg" width="50%" class="tu" /><img src="image/2.jpg" width="50%"  class="tu" /><img src="image/3.jpg" width="50%"  class="tu" /><img src="image/4.jpg" width="50%"  class="tu" /><img src="image/5.jpg" width="50%"  class="tu" /><img src="image/6.jpg" width="50%"  class="tu" /></div><div style="color:red;z-index: 5;top: 30%;right: 0px;" id="qianjin"><span class="glyphicon glyphicon-forward"></span></div><ul ><li class="xiatu"><img src="image/1.jpg" width="50px"  /></li><li class="xiatu"><img src="image/2.jpg" width="50px"  /></li><li class="xiatu"><img src="image/3.jpg" width="50px"  /></li><li class="xiatu"><img src="image/4.jpg" width="50px"  /></li><li class="xiatu"><img src="image/5.jpg" width="50px"  /></li><li class="xiatu"><img src="image/6.jpg" width="50px"  /></li></ul></center><script>//创建一个索引为0的指向最前面var  i=0;//一进来显示第一个图，其余的兄弟隐藏$('.tu').eq(0).show().siblings('.tu').hide();//点下面图事件$('.xiatu').click(function(){//获取当前数字赋值给ii=$(this).index();//调用zhanshi()方法zhanshi();});//点下一图事件$("#qianjin").click(function(){//判断当前索引是最后一个if(i==5){//索引变成第一个i=0;}else{//否则索引就加1i++;}//调用zhanshi()方法zhanshi();});//点上一图事件$("#houtui").click(function(){//判断当前索引是最前一个if(i==0){//索引变成第一个i=5;}else{//否则索引就减1i--;}//调用zhanshi()方法zhanshi();});//zhanshi()方法function zhanshi(){//显示出点击那个数字对应图片以动画形式展现，其余的退出动画//可加入其他翻转动画，详情问亮哥$('.tu').eq(i).show().siblings('.tu').hide();//给当前点击的添加边框样式.其他兄弟去掉样式$('.xiatu').eq(i).addClass("biankuang").siblings('.xiatu').removeClass("biankuang");}</script></body></html>
阅读全文
0 0