产品横向展示效果
更新:HHH   时间:2023-1-7


<!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>




返回web开发教程...