<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> *{padding: 0;margin: 0;}.box{position: relative;width: 100%;height: 450px;}.box .pic{position: relative;width: 1120px;height: 350px;margin: 0 auto;top: 100px;}.box .pic ul li{position: absolute;top: 0;left: 0;list-style: none;width: 1120px;height: 350px;display: none;}.box .btn_left{position: absolute;top: 215px;left: 130px; width: 75px;height: 70px;cursor: pointer;background: url("images/arrow.png") no-repeat 5px 0;}.box .btn_right{position: absolute;top: 215px;right: 130px;width: 72px;height: 71px;cursor: pointer;background: url("images/arrow.png") no-repeat 2px -70px;}.box .btn{position: absolute;bottom:0;left: 400px;width: 593px;height: 47px;padding-left:50px ;}.box .btn ul{width:400px;height: 30px; padding-left:100px;padding-top: 9px;}.box .btn ul li{list-style: none;border: 1px solid white;width: 20px;height: 20px;border-radius: 10px;margin: 5px 12px;float: left;cursor: pointer;}.box .btn ul li.sir{background: white;}</style></head><body> <div> <div> <ul> <li style="background: url('images/1.jpg'); display:block"></li> <li style="background: url('images/2.jpg')"></li> <li style="background: url('images/3.jpg')"></li> <li style="background: url('images/4.jpg')"></li> <li style="background: url('images/5.jpg')"></li> <li style="background: url('images/6.jpg')"></li> <li style="background: url('images/7.jpg')"></li> <li style="background: url('images/8.jpg')"></li> </ul> </div> <span></span> <span></span> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <script src="js/jquery-2.1.4.js"></script> <script> $('.box .btn ul li').hover(function(){ var _index=$(this).index(); $(this).addClass('sir').siblings().removeClass('sir'); $('.box .pic ul li').eq(_index).fadeIn().siblings().fadeOut(); }); $('.box .btn_left').click(function(){ var _index=0; var _index=$(this).index(); _index++; if(_index>7){ _index=0; } $('.box .btn ul li').eq(_index).addClass('sir').siblings().removeClass('sir'); $('.box .pic ul li').eq(_index).fadeIn().siblings().fadeOut(); }); $('.box .btn_right').click(function(){ var _index=0; var _index=$(this).index(); _index--; if(_index<0){ _index=7; } $('.box .btn ul li').eq(_index).addClass('sir').siblings().removeClass('sir'); $('.box .pic ul li').eq(_index).fadeIn().siblings().fadeOut(); }); </script></body></html>
- 1 回答
- 0 关注
- 1522 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消