jquery图片带左右按钮切换特效
<style type="text/css"> /*70px是图像和按钮的高度*/* { margin: 0; padding: 0; } ul { list-style: none; } ul li { margin-left: 10px; margin-right: 10px; float: left; } #imgList { height: 70px; float: left; width: 360px; overflow: hidden; } #swihLeft { background: url(images/leftward.png) 0 0 no-repeat; display: block; height: 70px; width: 30px; } #swihRight { background: url(images/rightward.png) 0 0 no-repeat; display: block; height: 70px; width: 30px; } /*左按钮层——为了暂位*/#swihLeftDiv { float: left; width: 30px; height: 70px; } /*右按钮层——为了暂位*/#swihRightDiv { float: left; width: 30px; height: 70px; } /*图片*/.Img { height: 70px; width: 70px; } </style><script type="text/javascript"> var imgLeftLenght = 0; var movePx=90;//每次切换的像素(包含图片宽度与间距) 公式：（左右边距+图片宽度）*每次切换的图片数量 var imgNum=4;//每次显示的图片个数__修改此处必须连同#imgList样式的宽度一起修改公式：（左右边距+图片宽度）*imgNum var speedSwitch=500;//切换速度(毫秒) $(document).ready(function() { var imgLiNum = $("#imgList>ul>li").length; $("#swihLeft").click(function() { imgLeftLenght += movePx; $("#imgListUl").animate({ marginLeft: imgLeftLenght }, 500); $("#swihRight").css("display", "block"); if (imgLeftLenght == 0) { $("#swihLeft").css("display", "none"); } }).css("display", "none"); $("#swihRight").css("display", "none").click(function() { imgLeftLenght -= movePx; $("#imgListUl").animate({ marginLeft: imgLeftLenght }, speedSwitch); $("#swihLeft").css("display", "block"); if (0 == (imgLiNum - imgNum) * movePx + imgLeftLenght) { $("#swihRight").css("display", "none"); } }); if (imgLiNum > imgNum) { $("#swihRight").css("display", "block"); } $("#imgListUl>li").click(function() { $(this).siblings().removeClass("boRed"); $(this).addClass("boRed"); }) }) </script>
<div> <div id="swihLeftDiv"> <a id="swihLeft" href="javascript:void(0);"></a> </div> <div id="imgList"> <ul id="imgListUl"> <li> <img class="Img" src='uploaded/201201/0c89b113-9fdb-4194-b46e-7a80122256da.jpg' /> </li> <li> <img class="Img" src='uploaded/201201/0ccf0ed1-571c-496d-a6f2-f164a14d90de.jpg' /> </li> <li> <img class="Img" src='uploaded/201201/0c89b113-9fdb-4194-b46e-7a80122256da.jpg' /> </li> <li> <img class="Img" src='uploaded/201201/0ccf0ed1-571c-496d-a6f2-f164a14d90de.jpg' /> </li> <li> <img class="Img" src='uploaded/201201/0c89b113-9fdb-4194-b46e-7a80122256da.jpg' /> </li> <li> <img class="Img" src='uploaded/201201/0ccf0ed1-571c-496d-a6f2-f164a14d90de.jpg' /> </li> </ul> </div> <div id="swihRightDiv"> <a id="swihRight" href="javascript:void(0);"></a> </div> </div>
页:
[1]