首页 新闻 搜索 专区 学院

点击按钮实现滑动功能

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;
        }
有缘无分的朋友的主页 有缘无分的朋友 | 初学一级 | 园豆:172
提问于:2017-03-30 13:50
< >
分享
最佳答案
0

hi,这个可能对你有帮助  http://www.jq22.com/jquery-info9506

收获园豆:5
MRGan | 初学一级 |园豆:71 | 2017-03-30 15:16

 这个下载不了源码啊!

有缘无分的朋友 | 园豆:172 (初学一级) | 2017-03-30 19:16
其他回答(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中就可以。

龙行天涯 | 园豆:1821 (小虾三级) | 2017-03-31 17:47
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册