点击按钮实现滑动功能
0
悬赏园豆：5
[已解决问题]
解决于 2017-06-02 16:32
上面是我需要实现的效果
下面是我的相关部分html代码
<div class="third_picture_1"> <div id="click"> <ul> <li style="border-top:1px solid #FFAC13"> <a href="mi5.html" > <img class="img" src="img/e991f1e2-20d8-40c3-bf1d-012b122c986b.png" /> </a> <h3 class="title"> <a href="mi5.html">小米5s Plus</a> </h3> <p class="introduce">5.7英寸大屏双摄手机，拍照黑科技</p> <p class="third_pic_price">2299元起</p> <> <li style="border-top:1px solid #83C44E"> <a href="#" > <img class="img" src="img/f35e0d0a-afae-443c-a7e6-3a49c40e2df1.png" /> </a> <h3 class="title"> <a href="#" style="margin:5px 54px;">红米Pro 十核双摄</a> </h3> <p class="introduce">双摄像头手机，像单反一样去拍照</p> <p class="third_pic_price">1099元起</p> <> <li style="border-top:1px solid #2196F3"> <a href="#" > <img class="img" src="img/0df5d106-ab01-4013-87de-a9793094245d.png" /> </a> <h3 class="title"> <a href="#" style="margin:5px 86px;">小米Max</a> </h3> <p class="introduce" style="margin:5px 28px;">享花呗分期，最高享 12 期</p> <p class="third_pic_price">1799元</p> <> <li style="border-top:1px solid #E53935"> <a href="#" > <img class="img" src="img/725a37e3-78b7-4298-8098-c40097bf179d.png" /> </a> <h3 class="title"> <a href="#">小米笔记本</a> </h3> <p class="introduce" style="margin:5px 23px;">独立显卡、超轻薄、金属机身</p> <p class="third_pic_price">3499元</p> <> <li style="border-top:1px solid #00C0A5"> <a href="#" > <img class="img" src="img/4c68c352-fbd3-452d-be90-7b47e4f6ce76.png" /> </a> <h3 class="title"> <a href="#" style="margin:5px 47px;">小米平板2 16GB现货</a> </h3> <p class="introduce" style="margin:5px 41px;">轻薄全金属，海量内容</p> <p class="third_pic_price">999元</p> <> <li style="border-top:1px solid #FFAC13"> <a href="mi5.html" > <img class="img" src="img/clickChange/1.png" /> </a> <h3 class="title"> <a href="mi5.html">小米5s Plus</a> </h3> <p class="introduce">小米移动电源2</p> <p class="third_pic_price">79元</p> <> <li style="border-top:1px solid #83C44E"> <a href="#" > <img class="img" src="img/clickChange/2.png" /> </a> <h3 class="title"> <a href="#" style="margin:5px 54px;">小米手环 2</a> </h3> <p class="introduce">OLED 显示屏幕，升级计步算法</p> <p class="third_pic_price">149元</p> <> <li style="border-top:1px solid #2196F3"> <a href="#" > <img class="img" src="img/clickChange/3.png" /> </a> <h3 class="title"> <a href="#" style="margin:5px 86px;">米家飞利浦智睿台灯二代</a> </h3> <p class="introduce" style="margin:5px 28px;">感知环境光，主动优化场景照明</p> <p class="third_pic_price">199元</p> <> <li style="border-top:1px solid #E53935"> <a href="#" > <img class="img" src="img/clickChange/4.png" /> </a> <h3 class="title"> <a href="#">小米净水器 厨下式</a> </h3> <p class="introduce" style="margin:5px 23px;">直出纯净水，隐藏式安装</p> <p class="third_pic_price">1999元</p> <> <li style="border-top:1px solid #00C0A5"> <a href="#" > <img class="img" src="img/clickChange/5.png" /> </a> <h3 class="title"> <a href="#" style="margin:5px 47px;">小米路由器 3</a> </h3> <p class="introduce" style="margin:5px 41px;">更快更强，不止四天线</p> <p class="third_pic_price">149元</p> <> </ul> </div> </div>
下面是相关样式
.third_picture_1{
width:1242px;
position: absolute;
top:840px;
left:60px;
}
#click{
width:1242px;
height: 350px;
position: relative;
}
.third_picture_1 ul{
width:2484px;
height: 350px;
display: inline;
position: absolute;
overflow: hidden;
top:0;
left:0px;
border: 1px solid red;
}
.third_picture_1 li{
list-style: none;
width:236px;
height: 350px;
float: left;
text-align: center;
margin-right: 12px;
background: #FAFAFA;
border-top-width: 1px;
}
最佳答案
0
hi,这个可能对你有帮助 http://www.jq22.com/jquery-info9506
收获园豆：5
这个下载不了源码啊！
其他回答(1)
0
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../../Scripts/jquery-1.11.1.min.js"></script> <style> * { margin: 0px; padding: 0px; } ul { width: 1300px; border: 1px solid #808080; height: 152px; } li { width: 150px; height: 150px; border: 1px solid #ff6a00; float: left; list-style: none; } input { width: 40px; } </style> <script> $(function () { var left = 0; //向左 $("#left").click(function () { left = parseInt($("#show").css("left")); if (left == 0) { return false; } left += 600; $("#show").animate({ left: "" + left + "px" }, "slow"); }) //向右 $("#right").click(function () { if (left == -600) { return false; } left = parseInt($("#show").css("left")); left -= 600; $("#show").animate({ left: "" + left + "px" }, "slow"); }) }) </script> </head> <body> <input type="button" id="left" value="<" /> <input type="button" id="right" value=">" /> <div style="width: 610px; overflow: hidden;"> <ul id="show" style="position: relative;"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </body> </html>
功能实现了，图片自己去放在li中就可以。
