溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

產(chǎn)品橫向展示效果

發(fā)布時(shí)間：2020-06-19 12:24:34 來(lái)源：網(wǎng)絡(luò) 閱讀：350 作者：lflianglan 欄目：web開發(fā) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示效果</title>
<style type="text/css">
    *{padding:0; margin:0;}
    ul,li{list-style:none;}
    #wrap{width:960px; padding:100px 0; pink;  margin:0 auto; position:relative;}
    #slideWrap{width:790px; height:188px; overflow:hidden; position:relative; margin-left:90px;}
    #slide{width:3200px; position:absolute; top:0;}
    #slide ul{width:3200px; clear:both;}
    #slide ul li{float:left; width:196px; padding:0 1px;}
    .prev,.next,.next1,.prev1{width:50px; height:50px; display:block; position:absolute;  color:#fff; top:158px;}
    .prev,.next{background:#906;}
    .prev1,.next1{background:#09F;}
    .prev,.prev1{left:20px;}
    .next,.next1{right:20px;}
</style>
<script type="text/javascript" src="../../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#next").click(function(){
            $("#prev").removeClass("prev").addClass("prev1");
            var x=$("#slide").position().left;
            if(x>(-2300)){
                $("#slide").stop(true,false).animate({left:"-=790px"},"normal");
            }else{
                $("#next").removeClass("next1").addClass("next");
                       
            };
        });
        $("#prev").click(function(){
            $("#next").removeClass("next").addClass("next1");
            var x=$("#slide").position().left;
            if(x<=(-790)){
                $("#slide").stop(true,false).animate({left:"+=790px"},"normal");
                       
            }else{
                $("#prev").removeClass("prev1").addClass("prev");
            };
        });
    })
</script>
</head>
<body>
    <div id="wrap">
        <a href="#" class="prev" id="prev">prev</a>
        <a href="#" class="next1" id="next">next</a>
        <div id="slideWrap">
            <div id="slide">
                <ul>
                    <li><a href="#"><img src="20120220.png" /></a></li>
                    <li><a href="#"><img src="20120217.jpg" /></a></li>
                    <li><a href="#"><img src="20120218.jpg" /></a></li>
                    <li><a href="#"><img src="20120219.png" /></a></li>
                    <li><a href="#"><img src="20120220.png" /></a></li>
                    <li><a href="#"><img src="20120217.jpg" /></a></li>
                    <li><a href="#"><img src="20120218.jpg" /></a></li>
                    <li><a href="#"><img src="20120219.png" /></a></li>
                    <li><a href="#"><img src="20120220.png" /></a></li>
                    <li><a href="#"><img src="20120217.jpg" /></a></li>
                    <li><a href="#"><img src="20120218.jpg" /></a></li>
                    <li><a href="#"><img src="20120219.png" /></a></li>
                    <li><a href="#"><img src="20120220.png" /></a></li>
                    <li><a href="#"><img src="20120217.jpg" /></a></li>
                    <li><a href="#"><img src="20120218.jpg" /></a></li>
                    <li><a href="#"><img src="20120219.png" /></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>




向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手