web实现左右切换功能

来源：互联网发布：尼尔森数据网编辑：程序博客网时间：2024/06/05 08:33
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-1.12.0.min.js"></script><style type="text/css">div,ul,li{margin: 0px;padding: 0px;}.box{border: 5px solid orange;overflow: hidden;width: 500px;height: 400px;display: inline-block;background: green;position: relative;}.box-ul-li1{float: left;background: orangered;}.box-ul-li2{float: left;background: orange;}.box-ul-li3{float: left;background: green;}.box-ul-li1,.box-ul-li2,.box-ul-li3{width: 500px;height: 400px;position: relative;}.box-ul{position: absolute;width: 99999px;height: 400px;list-style: none;background: red;}.button-box{top: 50%;position: relative;width: 500px;height: 45px;z-index: 1;}.left-button{color: white;left: 0px;position: absolute;font-size: 26px;border-style: none;width: 50px;height: 45px;background: rgba(0,0,0,0.4);}.right-button{color: white;position: absolute;right: 0px;font-size: 26px;border-style: none;width: 50px;height: 45px;background: rgba(0,0,0,0.4);}.box-ul-img{width: 500px;height: 400px;}</style><script type="text/javascript">$(document).ready(function(){var value = 0;$(".box").mouseover(function(){$(".button-box").css("visibility","visible");});$(".box").mouseout(function(){$(".button-box").css("visibility","hidden");});//左边的按钮，把ul元素往右边移$(".left-button").click(function(){if(value >= -500){value-=500;$(".box-ul").animate({left:value},500);}});//右边的按钮，把ul元素往左边移$(".right-button").click(function(){if(value <= -500){value+=500;$(".box-ul").animate({left:value},500);}});});</script></head><body style="text-align: center;"><div class="box"><ul class="box-ul"><li class="box-ul-li1"><img class="box-ul-img" src="img/a.jpg"/></li><li class="box-ul-li2"><img class="box-ul-img" src="img/b.jpg"/></li><li class="box-ul-li3"><img class="box-ul-img" src="img/c.jpg"/></li></ul><div class="button-box"><button class="left-button"><</button><button class="right-button">></button></div></div></body></html>
效果图如下：
0 0