产品横向展示效果

发布时间:2020-06-19 12:24:34 作者:lflianglan
来源:网络 阅读:350
<!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>




推荐阅读:
  1. Revealing图片展示效果(jQuery)
  2. ivx如何自制轮播页展示效果?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery slide 左右展示

上一篇:Ubuntu系统的IP配置

下一篇:"跨域" ----cores By Ajax

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》