以下案例的html以及css代码

 <!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/bootstrap/css/animate.min.css">
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/home.css">
    <link rel="stylesheet" id="skin-css" href="styles/skin/skin-normal.css">
    <title>购物网首页</title>
</head>
<body>
    <header>
        <div class="container">
            <div class="header-top">
                <div class="logo-wrapper">
                    <img src="data:images/logo.gif" class="logo" alt="img"/>
                </div>
                <input type="text" id="input-search" class="search" name="search" defaultValue="请输入商品名称"/>
                <ul class="skin">
                    <li class="skin-blue"></li>
                    <li class="skin-green"></li>
                    <li class="skin-orange"></li>
                    <li class="skin-tianlan"></li>
                    <li class="skin-red"></li>
                    <li class="skin-pure"></li>
                </ul>
            </div>
            <nav>
                <ul class="nav-bar">
                    <li><a href="#">首页</a></li>
                    <li>
                        <a href="#">品牌</a>
                        <div class="subitem">
                                <dl class="fore">
                                    <dt>
                                        <a href="#nogo">品牌:</a>
                                    </dt>

                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd ><a href="#nogo">安踏</a></dd>
                                    <dd ><a href="#nogo">奥康</a></dd>
                                    <dd ><a href="#nogo">骆驼</a></dd>
                                    <dd ><a href="#nogo">特步</a></dd>
                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd class="noborder"><a href="#nogo">特步</a></dd>

                                </dl>
                                <dl>
                                    <dt>
                                        <a href="#nogo">品牌:</a>
                                    </dt>

                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd ><a href="#nogo">安踏</a></dd>
                                    <dd ><a href="#nogo">奥康</a></dd>
                                    <dd ><a href="#nogo"  >骆驼</a></dd>
                                    <dd ><a href="#nogo">特步</a></dd>
                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo"  >阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd class="noborder"><a href="#nogo">特步</a></dd>

                                </dl>
                            </div>
                    </li>
                    <li>
                        <a href="#">女装</a>
                        <div class="subitem"  >
                                <dl class="fore">
                                    <dt>
                                        <a href="#nogo">女装:</a>
                                    </dt>

                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd ><a href="#nogo">安踏</a></dd>
                                    <dd ><a href="#nogo">奥康</a></dd>
                                    <dd ><a href="#nogo">骆驼</a></dd>
                                    <dd ><a href="#nogo">特步</a></dd>
                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd class="noborder"><a href="#nogo">特步</a></dd>

                                </dl>
                                <dl>
                                    <dt>
                                        <a href="#nogo">女装:</a>
                                    </dt>

                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd ><a href="#nogo">安踏</a></dd>
                                    <dd ><a href="#nogo">奥康</a></dd>
                                    <dd ><a href="#nogo">骆驼</a></dd>
                                    <dd ><a href="#nogo">特步</a></dd>
                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd class="noborder"><a href="#nogo">特步</a></dd>

                                </dl>
                        </div>
                    </li>
                    <li>
                    <a href="#">男装</a>
                    <div class="subitem"  >
                            <dl class="fore" >
                                <dt>
                                    <a href="#nogo">男装:</a>
                                </dt>

                                <dd ><a href="#nogo">耐克</a></dd>
                                <dd ><a href="#nogo">阿迪达斯</a></dd>
                                <dd ><a href="#nogo">达芙妮</a></dd>
                                <dd ><a href="#nogo">李宁</a></dd>
                                <dd ><a href="#nogo">安踏</a></dd>
                                <dd ><a href="#nogo">奥康</a></dd>
                                <dd ><a href="#nogo" class="promoted">骆驼</a></dd>
                                <dd ><a href="#nogo">特步</a></dd>
                                <dd ><a href="#nogo">耐克</a></dd>
                                <dd ><a href="#nogo" class="promoted">阿迪达斯</a></dd>
                                <dd ><a href="#nogo">达芙妮</a></dd>
                                <dd ><a href="#nogo">李宁</a></dd>
                                <dd class="noborder"><a href="#nogo">特步</a></dd>

                            </dl>
                            <dl>
                                <dt>
                                    <a href="#nogo">男装:</a>
                                </dt>

                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd ><a href="#nogo">安踏</a></dd>
                                    <dd ><a href="#nogo">奥康</a></dd>
                                    <dd ><a href="#nogo">骆驼</a></dd>
                                    <dd ><a href="#nogo">特步</a></dd>
                                    <dd ><a href="#nogo">耐克</a></dd>
                                    <dd ><a href="#nogo">阿迪达斯</a></dd>
                                    <dd ><a href="#nogo">达芙妮</a></dd>
                                    <dd ><a href="#nogo">李宁</a></dd>
                                    <dd class="noborder"><a href="#nogo">特步</a></dd>

                            </dl>
                        </div>
                    </li>
                    <li><a href="#">鞋包配饰</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="main-body container">
        <aside>
            <h3 class="aside-banner">
                商品分类
            </h3>
            <div class="aside-content">
                <h4>
                    推荐品牌
                </h4>
                <ul class="aside-ul clear">
                    <li><a href="#nogo" >耐克</a></li>
                    <li><a href="#nogo" class="promoted">阿迪达斯</a></li>
                    <li class="promoted"> <a href="#nogo" >达芙妮</a></li>
                    <li><a href="#nogo" >李宁</a></li>
                    <li><a href="#nogo" >安踏</a></li>
                    <li><a href="#nogo" >奥康</a></li>
                    <li><a href="#nogo" class="promoted">骆驼</a></li>
                    <li><a href="#nogo" >特步</a></li>
                </ul>

                <h4>
                    女装
                </h4>
                <ul class="aside-ul clear">
                    <li><a href="#nogo" >呢大衣</a></li>
                    <li><a href="#nogo" >T恤</a></li>
                    <li><a href="#nogo" >羽绒</a></li>
                    <li><a href="#nogo" >衬衫</a></li>
                    <li><a href="#nogo" >羊绒衫</a></li>
                    <li><a href="#nogo" >针织</a></li>
                    <li><a href="#nogo" >连衣裙</a></li>
                    <li><a href="#nogo" >皮外套</a></li>
                </ul>

                <h4>男装</h4>
                <ul class="aside-ul clear">
                    <li><a href="#nogo" >衬衫</a></li>
                    <li><a href="#nogo" >T恤衫</a></li>
                    <li><a href="#nogo" >夹克</a></li>
                    <li><a href="#nogo" >大皮衣</a></li>
                    <li><a href="#nogo" >风衣</a></li>
                    <li><a href="#nogo" >牛仔裤</a></li>
                    <li><a href="#nogo" >西服</a></li>
                    <li><a href="#nogo" >卫衣</a></li>
                </ul>

                <h4>鞋包配饰</h4>
                <ul class="aside-ul clear">
                    <li><a href="#nogo" >围巾</a></li>
                    <li><a href="#nogo" >旅行箱</a></li>
                    <li><a href="#nogo" >真皮包</a></li>
                    <li><a href="#nogo" >韩版</a></li>
                    <li><a href="#nogo" >达芙妮</a></li>
                    <li><a href="#nogo" >单肩包</a></li>
                    <li><a href="#nogo" >毛线</a></li>
                    <li><a href="#nogo" >清仓靴子</a></li>
                </ul>

            </div>
        </aside>

        <div class="content">
            <!--大幅广告栏-->
            <div>
            <div class="carousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <a href="#"><img src="data:images/ads/1.jpg" alt="相约情人节"/></a>
                    </div>
                    <div class="item">
                        <a href="#"><img src="data:images/ads/2.jpg" alt="新款上线"/></a>
                    </div>
                    <div class="item">
                        <a href="#"><img src="data:images/ads/3.jpg" alt="愤怒小鸟特卖"/></a>
                    </div>
                    <div class="item">
                        <a href="#"><img src="data:images/ads/4.jpg" alt="男鞋促销第一波"/></a>
                    </div>
                    <div class="item">
                        <a href="#"><img src="data:images/ads/5.jpg" alt="春季新品发布"/></a>
                    </div>
                </div>
                <div class="carousel-control">
                    <a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
                    <a href="###2"><em>新款上线</em><em>全场357元起</em></a>
                    <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
                    <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
                    <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
                </div>
            </div><!--大幅广告栏 end-->
            <div class="ads">
                <div class="ads-photo">
                    <a href="#"><img src="data:images/upload/20120216.jpg"/></a>
                </div>
                <div class="ads-activity">
                    <h4>最新动态</h4>
                    <ul>
                        <li><a href="#"><span>活动</span>伊伴春鞋迎春大促</a></li>
                        <li><a href="#"><span>活动</span>千百度冬靴新品火热让利</a></li>
                        <li><a href="#"><span>活动</span> 千百度冬靴新品火热让利</a></li>
                        <li><a href="#"><span>活动</span>伊伴春鞋迎春大促</a></li>
                        <li><a href="#"><span>活动</span>千百度冬靴新品火热让利</a></li>
                    </ul>
                </div>
            </div><!--广告栏右侧-->
            </div>

            <div class="brand-activity">
                <div class="brand-title">
                    <h4>品牌活动</h4>
                    <ul class="category">
                        <li><a href="#">运动</a></li>
                        <li><a href="#">女鞋</a></li>
                        <li><a href="#">男鞋</a></li>
                        <li><a href="#">童鞋</a></li>
                    </ul>
                </div>
                <div class="brand-content">
                    <ul class="brand-gallery">

                        <li>
                            <a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
                            <span><a href="###1">耐克</a></span>
                        </li>
                        <li>
                            <a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
                            <span><a href="###2">阿迪达斯</a></span>
                        </li>
                        <li>
                            <a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
                            <span><a href="###3">李宁</a></span>
                        </li>
                        <li>
                            <a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
                            <span><a href="###4">安踏</a></span>
                        </li>
                        <li>
                            <a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
                            <span><a href="###1">耐克</a></span>
                        </li>
                        <li>
                            <a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
                            <span><a href="###2">阿迪达斯</a></span>
                        </li>
                        <li>
                            <a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
                            <span><a href="###3">李宁</a></span>
                        </li>
                        <li>
                            <a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
                            <span><a href="###4">安踏</a></span>
                        </li>
                        <li>
                            <a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
                            <span><a href="###1">耐克</a></span>
                        </li>
                        <li>
                            <a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
                            <span><a href="###2">阿迪达斯</a></span>
                        </li>
                        <li>
                            <a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
                            <span><a href="###3">李宁</a></span>
                        </li>
                        <li>
                            <a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
                            <span><a href="###4">安踏</a></span>
                        </li>
                        <li>
                            <a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
                            <span><a href="###1">耐克</a></span>
                        </li>
                        <li>
                            <a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
                            <span><a href="###2">阿迪达斯</a></span>
                        </li>
                        <li>
                            <a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
                            <span><a href="###3">李宁</a></span>
                        </li>
                        <li>
                            <a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
                            <span><a href="###4">安踏</a></span>
                        </li>

                    </ul>
                </div>

            </div>
        </div>
        <!--右侧内容-->
    </div>

    <script src="scripts/jquery-2.1.4.min.js"></script>
    <script src="scripts/jquery.cookie.js"></script>
    <script src="scripts/home.js"></script>

</body>

html源码

header{
    width:%;
    background: url(  #FFFFFF;
    height:105px;
}
header .header-top{
    height:68px;
    line-height:68px;
}
header .logo-wrapper{
    float:left;
}
header .search{
    border:1px solid #BABEBF;
    height:30px;
    line-height:30px;
    width:215px;
    font-size:14px;
    margin-left:30px;
    color:#;
    padding:2px;
}
ul.skin{
    float:right;
}
ul.skin li{
    width:15px;
    height:15px;
    border-radius:3px;
    display:inline-block;
    z-index:;
    background:url("../images/theme.gif");
}
ul.skin li.skin-blue{
    background-position: ;
}
ul.skin li.skin-blue.selected{
    background-position: -15px;
}
ul.skin li.skin-green{
    background-position:-20px ;
}
ul.skin li.skin-green.selected{
    background-position:-20px -15px;
}
ul.skin li.skin-orange{
    background-position:-40px ;
}
ul.skin li.skin-orange.selected{
    background-position:-40px -15px;
}

ul.skin li.skin-tianlan{
    background-position:-60px ;
}
ul.skin li.skin-tianlan.selected{
    background-position:-60px -15px;
}
ul.skin li.skin-red{
    background-position:-80px ;
}
ul.skin li.skin-red.selected{
    background-position:-80px -15px;
}
ul.skin li.skin-pure{
    background-position:-100px ;
}
ul.skin li.skin-pure.selected{
    background-position:-100px -15px;
}
/*导航栏*/
nav>ul{
    height:36px;
    line-height:36px;
    background-color:#4A4A4A;
}
nav ul>li{
    display:inline-block;
    position:relative;
}
nav ul>li>a{
    font-size:15px;
    font-family:"宋体";
    font-weight:bold;
    color:#fff;
    display:block;
    padding-left:35px;
}
nav ul>li>a:hover{
    text-decoration:underline;
}
/*二级导航栏*/
nav ul>li>div.subitem{
    position:absolute;
    top:36px;
    left:35px;
    height:auto;
    border:1px solid #aaa;
    width:470px;
    display:none;
}
nav ul>li:hover>div.subitem{
    display:block;
}
div.subitem{
    background-color:#fff;
}
div.subitem dl{
    clear:both;
    margin: 10px;

}
div.subitem dt{
    float:left;
    line-height:60px;
    font-size:14px;
    font-weight:bold;
    padding: 15px;

}
div.subitem dd{
    margin-top:10px;
    float:left;
    padding: 8px;
    height:16px;
    line-height:16px;
    border-right:1px solid #CCC;
}
div.subitem dd>a{
    font-size:12px;
     color:#aaa;
    display:block;
}
div .subitem dl:nth-child(){
    border-top:1px  dashed #;
}
.main-body{
    margin-top:10px;
}
/*侧边栏布局*/
aside{
    width:187px;
    height:auto;
    float:left;
    padding: 10px 10px 15px;
    border:1px solid #6E6E6E;
    margin:;
    padding:;
}
aside h3{
    background-color:#6E6E6E;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    height:30px;
    line-height:30px;
    padding: 15px;
}
.aside-content{
    padding: 15px 20px 15px;
}
.aside-content h4{
    font-size:12px;
    color:#;
    font-weight:bold;
    margin-top:10px;
    padding-bottom:3px;
    border-bottom:1px solid #ccc;
}
.aside-content ul li{
    float:left;
    position:relative;

}
.aside-content ul li .hot{
    background: url(  transparent;
    height: 16px;
    position: absolute;
    right:20px;
    top:;
    width: 21px;
}

.aside-content ul li>a{
    width:70px;
    display:block;
    height:24px;
    line-height:24px;
}
.aside-content ul li>a.promoted{
    color:red;
}

/*右侧大幅轮播广告栏*/
.content{
    width:797px;
    float:right;    

    overflow:hidden;
}
.carousel{
    position:relative;
    height:320px;
    width:550px;
    overflow:hidden;
    float:left;
}
.carousel .item{
    position:absolute;
    top:;
    left:;
}
.carousel .item.active{
    position:absolute;
    left:;
    top:;
}
.carousel .carousel-control{
    position:absolute;
    bottom:;
    left:;
    width:550px;

}
.carousel .carousel-control  a{
    float:left;
    color:#fff;
    width:%;
    border-right:1px solid rgba(,,,0.2);
    background-color:rgba(,,,0.5);
    height:44px;
}
/*下方箭头的效果不对,因为hover本身有一个动画的过渡时长?*/
.carousel .carousel-control  a.cuttent{
    background-color:#37A7D7;
    background:url("../images/adindex.gif") no-repeat center 41px #37A7D7;     

}
.carousel .carousel-control  a em{
    font-style:normal;
    display:block;
    text-align:center;
    line-height:22px;
}

/*轮播右侧小广告栏*/
.ads{
    width:230px;
    height:320px;
    float:right;
}
.ads img{
    height:180px;
    margin-bottom:10px;
    transition:all 1s ease;
}
.ads img:hover{
    transform:rotate(-359deg);
}
.ads .ads-activity{
    border:1px solid #ccc;
    font-size:12px;
}
.ads-activity h4{
    border-bottom:1px solid #ccc;
    height:24px;
    line-height:24px;
    font-weight:bold;
    padding: 15px;
}
.ads-activity ul li span:before{
    content:"[";
}
.ads-activity ul li span:after{
    content:"]";
}
.ads-activity ul li>a{
    color:#;
    padding: 15px;
    display:block;
    height:21px;
    line-height:21px;
}
.ads-activity ul li>a:hover{
    color:#008CD7;
}
/*品牌活动*/
.brand-activity{
    clear:both;

}
.brand-activity .brand-title{
    padding-top:15px;
    border-bottom:1px solid #E4E4E4;
    overflow:hidden;
}
.brand-title h4{
    float:left;
    padding-bottom:7px;
    font-weight:bold;
    color:#;
}
.brand-title  ul{
    float:right;
}
.brand-title  ul>li{
    display:inline-block;
}
.brand-title  ul>li a{
    display:block;
    color:#;
    background-color:#E4E4E4;
    padding: 3px 10px;
}
.brand-title ul>li:hover{
    background: url(% bottom transparent;

  padding-bottom: 3px;
}
.brand-title  ul>li a:hover{
    background-color:#FA5889;
}

/*品牌活动图片展示区*/
div.brand-content{
    width:%;
    height:200px;
    overflow:hidden;
    position:relative;
}
ul.brand-gallery{
    width:4000px;
    position:absolute;
    top:;
    left:;
}
ul.brand-gallery li{
    float:left;
    position:relative;
    margin:15px 10px 20px 5px;
}
ul.brand-gallery li a{
    display:block;
}
ul.brand-gallery li span{
    position:absolute;
    bottom:-16px;
    left:;
    right:;
    height:24px;
    line-height:24px;
    text-align:center;
    background-color:#EFEFEF;
}

css源码

一、输入框的focus和blur

/*搜索框的效果*/
$(function(){
    $("#input-search").focus(function(){
        var defaultValue=$(this).attr("defaultValue");
        if(this.value==defaultValue){
            this.value="";
        }

    }).blur(function(){
        if(this.value==""){
            this.value=$(this).attr("defaultValue");
        }

    }).keyup(function(e){
        ){
            alert("回车提交表单");
        }

    });

})

输入框的focus与blur

二、网页换肤功能(需要结合jquery的cookie插件,来记录用户的选择)

/*换肤的效果,不知道为什么,cookie的效果没有出来*/
function switchSkin(myskin){
    $("#skin-css").attr("href","styles/skin/"+myskin+".css");
    $("."+myskin).addClass("selected").siblings().removeClass("selected");$
    //为了用户下次打开以及刷新的时候,依旧显示上次的皮肤,需要使用cookie来记录当前的选择
    $.cookie(});

}
$(function(){
    var my_skin=$.cookie("myCssSkin");
    alert(my_skin);
    if(my_skin){
        switchSkin(my_skin);
    }
    $(".skin li").click(function(){
        my_skin=$(this).attr("class");
        switchSkin(my_skin);
    });
});

jquery实现网页换肤效果

三、广告栏轮播效果(目前实现的是fadeIn和fadeOut的效果,之后研究下如何实现从左到右的滑动效果)

/*大幅广告栏轮播的效果*/
function showImg(index){
    $(".carousel-control a").eq(index).addClass("cuttent").siblings().removeClass("cuttent");
    $(".carousel-inner div").eq(index).stop(true,true).fadeIn()
                                          .siblings().stop(true,true).fadeOut();
}
$(function(){
    //添加广告自动执行效果
    //进入广告区域时候,停止动画,否则开始动画;初始化的时候开始动画
    ;
    var adTimer=null;
    $(".carousel").mouseenter(function(){
        clearInterval(adTimer);
    }).mouseleave(function(){
        adTimer=setInterval(function(){
            showImg(index);
            var length=$(".carousel-control a").length;

            index++;
            ){
                index=;
            }
        },);
    }).trigger("mouseleave");

    //用户手动触发效果
    $(".carousel-control a").mouseover(function(){

        var index=$(".carousel-control a").index(this);
        showImg(index);
    }).eq().mouseover();

});

四、gallery的左右滚动效果

 /*实现品牌活动的左右滑动效果*/
 /*在布局的时候需要注意,ul外围的div的宽度设置正好合适,并且overflow:hidden,内部ul的宽度设置大一些*/
 function show_page(index){
     $ul_show=$(".brand-gallery");
     var li_width=$ul_show.find("li").outerWidth(true);

     ;    

     $ul_show.stop(true,false).animate({left:-pageWidth*index},"slow");

 }

 $(function(){
     $(".brand-title li>a").click(function(){
         var index=$(".brand-title li>a").index(this);
         show_page(index);
         //禁止超链接的默认行为
         return false;

     });
 });

gallery左右滚动效果

五、新闻上下滚动的效果

基本思路:通过设置滚动ul的margin-Top来实现,将margin-Top设置为负值,令其上移,当上移动画结束的时候,将margin-top恢复为原来的值,同时将以上去的第一个元素移动到ul的最后一个。

在布局上需要注意:将滚动ul上方的元素设置为relative或者absolute布局,使得当ul设置margin-top为负值的时候,消失在原上方元素的下面。

<div class="main-content">
            <aside>
                <div class="dongtai">
                    <h4 class="dongtai-title">
                    最新动态
                    </h4>
                    <ul class="dongtai-content">
                        <li><a href="#">瑞丽都疯狂推荐的秋装</a></li>
                        <li><a href="#">48元长款针织小开衫卖疯啦.</a></li>
                        <li><a href="#">长袖雪纺衫单穿内搭都超美..</a></li>
                        <li><a href="#">甜美宽松毛衣今秋一定红.</a></li>
                        <li><a href="#">夏末雪纺店主含泪大甩卖.</a></li>
                        <li><a href="#">秋装百搭小马甲不到50元..</a></li>
                        <li><a href="#">修身韩版小西装万人疯抢..</a></li>
                    </ul>
                </div>
</div>

滚动新闻html片段

aside h4{
    position:relative;
    font-weight:bold;
    color:#fff;
    background-color:#3B5998;
    font-size:12px;
    height:26px;
    line-height:26px;
    padding-left:10px;
    z-index:;
}
ul.dongtai-content{
    padding: 15px 3px 15px;
    border-bottom:7px solid #eee;
    height:95px;
    overflow:hidden;
}
ul.dongtai-content li>a{
    height:22px;
    line-height:22px;
    color:#0287CA;
}

滚动新闻css片段

/*最新动态上下循环的效果*/
function scrollNews( $obj){
    //var $ul-news=$("ul.dongtai-content");
    var lineHeight=$obj.find("li:first").height();
    $obj.animate({,function(){
        $obj.css({});
        $obj.find("li:first").appendTo($obj);
    });

}
$(function(){
    var $ul_news=$("ul.dongtai-content");
    var scrollTimer;
    scrollTimer=setInterval(function(){
        scrollNews($ul_news);
    },);
});

滚动新闻实现的js代码

六、树状目录折叠效果的实现

基本思路:使用next()选择器,以及slideUp和slideDown动画

<div class="global_module procatalog">
                    <h4  class="dongtai-title" >
                        产品分类
                    <span> </span>
                    </h4>
                    <ul class="m-treeview">
                        <li class="m-expanded">
                            <span>衬衫</span>
                            <ul>
                                <li><span>短袖衬衫</span></li>
                                <li><span>长袖衬衫</span></li>
                            </ul>
                        </li>
                        <li class="m-expanded">
                            <span>卫衣</span>
                            <ul>
                                <li ><span>开襟卫衣</span></li>
                                <li ><span>套头卫衣</span></li>
                            </ul>
                        </li>
                        <li class="m-expanded">
                            <span>裤子</span>
                            <ul>
                                <li><span>休闲裤</span></li>
                                <li><span>免烫卡其裤</span></li>
                                <li><span>牛仔裤</span></li>
                                <li><span>短裤</span></li>
                            </ul>
                        </li>
                   </ul>
                </div>

下方内容折叠html代码

ul.m-treeview{
    padding:7px 10px 3px 10px;
    border-bottom:7px solid #eee;
}
ul.m-treeview li span{
    display:block;
    height:22px;
    line-height:22px;
    cursor:pointer;
}
li.m-expanded{
    padding-left:16px;
    background:url(../img/treeview-expanded.gif) no-repeat 0 3px;
}
li.m-expanded.collapsed{
    background:url(../img/treeview-collapsed.gif) no-repeat 0 3px;
}
.m-expanded ul>li{
    padding-left:20px;
    background:url(../img/treeview-item.gif) no-repeat 0 3px;
}

内容折叠的css代码

/*树状目录的展开和折叠*/
$(function(){
    $(".dongtai-title").toggle(
        function(){
            $(this).next("ul").slideUp();
            $(this).find("span").addClass("up");
        },function(){
            $(this).next("ul").slideDown();
            $(this).find("span").removeClass("up");
        }
    );
});
$(function(){
    $("li.m-expanded>span").toggle(
        function(){
            $(this).next("ul").slideUp();
            $(this).parent("li.m-expanded").addClass("collapsed");
        },function(){
            $(this).next("ul").slideDown();
            $(this).parent("li.m-expanded").removeClass("collapsed");
        }

    );
});

树状目录折叠的js实现

六、上下滑动广告栏效果

基本思路:

1.在css布局中,将包围ul的外围div的高度固定,并设置overflow:hidden,position:relative;将其包裹的ul,ul中的li设置为绝对布局。

2.上下滑动的过程就是更改ul的top值的过程(注意不是更改li的top值)。

<div class="ads-wrapper">
                    <ul class="ads">
                        <li class="ads1"><a href="#"><img src="img/ads/1.gif"/></a></li>
                        <li class="ads2"><a href="#"><img src="img/ads/2.gif"/></a></li>
                        <li  class="ads3"><a href="#"><img src="img/ads/3.gif"/></a></li>
                        <li class="ads4"><a href="#"><img src="img/ads/4.gif"/></a></li>
                        <li class="ads5"><a href="#"><img src="img/ads/5.gif"/></a></li>
                    </ul>
                    <ul class="ads-index">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </div>

广告栏html代码

/*广告栏的布局*/
.ads-wrapper{
    position:relative;
    height:150px;
    width:590px;
    overflow:hidden;
}
ul.ads{
    position:relative;
}
.ads .ads1{
    position:absolute;
    top:0;
    left:0;

}

.ads .ads2{
    position:absolute;
    top:150px;
    left:0;
}
.ads .ads3{
    position:absolute;
    top:300px;
    left:0;
}
.ads .ads4{
    position:absolute;
    top:450px;
    left:0;
}
.ads .ads5{
    position:absolute;
    top:600px;
    left:0;
}
ul.ads-index{
    position:absolute;
    right:15px;
    bottom:5px;
}

.ads-index li{
    width:17px;
    height:17px;
    text-align:center;
    float:left;
    border:1px solid orange;
    color:orange;
    margin-left:10px;
    background-color:#fff;
}
.ads-index li.current{
    height:20px;
    background-color:orange;
    color:#fff;
    font-weight:bold;
}

广告栏css样式代码

/*大屏幕广告栏的上下滚动效果实现*/
function scrollAds($ul_ads,index){
    var height=$ul_ads.find("li:first").height();
    var position=height*index+"px";
    //注意是给ul增加动画,而不是给其中的li增加
    $ul_ads.stop(true,false).animate({top:"-"+position},1000);
    $(".ads-index>li").eq(index).addClass("current").siblings().removeClass("current");

}
$(function(){
    var adsTimer;
    var index=0;
    $("ul.ads").hover(function(){
        clearInterval(adsTimer);
    },function(){
        adsTimer=setInterval(function(){
            scrollAds($("ul.ads"),index);
            if(index==4){
                index=0;
            }else{
                index++;
            }
        },3000);
    }).trigger("mouseleave");

    $(".ads-index>li").mouseover(function(){
        index=$(".ads-index>li").index($(this));
        scrollAds($("ul.ads"),index);
        $(this).addClass("current").siblings().removeClass("current");
    }).eq(0).mouseover();
});

广告栏上下滚动效果实现

六、左右滑动效果

基本思路:

1.在css布局中,将包围ul的外围div的宽度固定,并设置overflow:hidden,position:relative;

2.将其包裹的ul设置为绝对布局。

3.左右滑动的过程就是更改ul的left值的过程。

4,对于向左向右按钮的控制,有些类似于数据库的分类查询,设置page_count,page_size,current_page这几个属性,这几个元素的值通过调用width()等获得外围元素的宽度,以及内部li的宽度来获得。

    <div class="product-wrapper">
                    <div class="product-title">
                        <h4>新款上市</h4>
                        <div class="product-nav">
                            <span class="left">left</span>
                            <span class="right">right</span>
                        </div>
                    </div>

                    <div  class="prolist_content">
                        <ul>
                            <li>
                                <a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                            </li>
                                <li>
                                <a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                            </li>
                                <li>
                                <a href="detail.html"><img src="img/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                            </li>
                            <li>
                                <a href="detail.html"><img src="img/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                            </li>
                        </ul>
                    </div>
                </div>

左右滑动html代码

/*右下方的产品展示区域*/
.product-wrapper{
    border-top:10px solid #eee;
    border-bottom:10px solid #eee;
    overflow:hidden;
}
.product-title{
    height:27px;
    line-height:27px;
    background-color:#3B5998;
}
.product-title h4{
    display:inline-block;
    color:#fff;
    font-weight:bold;
    margin-left:5px;
}
.product-nav{
    float:right;
    margin-right:20px;

}
.product-nav span{
    margin-top:5px;
    width:17px;
    height:17px;
    display:inline-block;
    text-indent:99999px;
    overflow:hidden;
}
.product-nav .left{
    background-image:url(../img/left.gif);
}
.product-nav .right{
    background-image:url(../img/right.gif);
}
.prolist_content{
    width:auto;
    height:200px;
    border-bottom:1px solid #eee;
    position:relative;
}
.prolist_content ul{
    position:absolute;
    top:0;
    left:0;
    height:200px;
    margin-top:20px;
    width:5000px;
}
.prolist_content  ul li{
    float:left;
    margin-right:15px;
    margin-left:10px;
}
.prolist_content  ul li img{
    width:124px;
    height:124px;
}
.prolist_content  ul li>span{
    display:block;
    text-align:center;
}

左右滑动区域的css代码

/*产品展示区域的左右滚动效果*/
$(function(){
    var index=0;
    var v_width=$(".product-wrapper").width();
    var item_width=$(".prolist_content  ul li:first").width();    

    var page_count=Math.floor(v_width/item_width);
    var item_count=$(".prolist_content  ul li").length;
    var page_size=Math.ceil(item_count/page_count);
    var current_page=0;

    var left_position=0;
    $(".product-nav .left").click(function(){
        if(current_page==0){
            current_page=page_size-1;
        }else{
            current_page--;
        }
        left_position=-v_width*current_page;
        $(".prolist_content ul").animate({"left":left_position+"px"},1000);
    });

    $(".product-nav .right").click(function(){
        if(current_page==page_size-1){
            current_page=0;
        }else{
            current_page++;
        }
        left_position=-v_width*current_page;
        $(".prolist_content ul").animate({"left":left_position+"px"},1000);
    });
});

实现左右滑动的js代码

可复用的js效果的更多相关文章

  1. 类js效果

    类似js效果,点击看看  代码 onclick="return confirm('您确定要看看吗?')" 放入a标签里面

  2. m.jd.com首页中的js效果

    m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...

  3. Tab选项卡切换卡JS效果

    <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...

  4. JS效果的步骤

    一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a.  display:none;         显示为无,不占据空间 b.  vi ...

  5. Github上html页面(包括CSS样式和JS效果)如何显示出来

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  6. WebView 实现JS效果和a标签的点击事件

    目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该控件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可 ...

  7. js效果-多选只能选两项,如果超出自动取消第一次选的

    这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...

  8. 常用JS效果 需要时更新。。。

    1.手风琴效果 JS: $(function() {     var aMenuOneLi = $(".menu-one > li");     var aMenuTwo = ...

  9. 用js效果做的简单焦点图

    /*js代码*/ <script src="js/js/myfocus-2.0.1.min.js" type="text/javascript">& ...

随机推荐

  1. [故障处理]联想笔记本故障0x0000007B

    同事笔记本故障,莫名其妙的快捷方式就找不到了.开始程序中的内容也无法正常查看. 解决步骤: 1.怀疑用户配置的问题,新建一个用户,没有解决. 2.使用自带的一键恢复ThinkVantage,恢复后,重 ...

  2. 20145235 《Java程序设计》第一次实验报告

    实验一Java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验知识点 1.JVM.JRE.JDK的安装位置与区 ...

  3. BIgInteger类和BigDecimal类的理解

    第一部分: 这两个类位于java.math包内,要使用它们必须在类前面引用该包:import java.math.BigInteger;和import java.math.BigDecimal; Bi ...

  4. Ubuntu 14.04 为 root 帐号开启 SSH 登录

    1. 修改 root 密码 sudo passwd root 2. 以其他账户登录,通过 sudo nano 修改 /etc/ssh/sshd_config : xxx@ubuntu14:~$ su ...

  5. mysql之触发器trigger 详解

    为了梦想,努力奋斗! 追求卓越,成功就会在不经意间追上你 mysql之触发器trigger 触发器(trigger):监视某种情况,并触发某种操作. 触发器创建语法四要素:1.监视地点(table)  ...

  6. IO流学习小结

    今天刚刚看完java的io流操作,把主要的脉络看了一遍,不能保证以后使用时都能得心应手,但是最起码用到时知道有这么一个功能可以实现,下面对学习进行一下简单的总结: IO流主要用于硬板.内存.键盘等处理 ...

  7. App之百度云推送

    集成SDK 下载最新的Android SDK压缩包并解压,在新建工程或已有工程中增加百度云推送功能. 我下载的是 ,里面有一个同名的文件夹,文件夹中有 导入云推送jar包和so文件: 将解压后的lib ...

  8. 把Java程序打包成jar文件包并执行

    1.首先要确认自己写的程序有没有报错. 2.第一次我写的是Web Project到现在,我一直没有执行成功,所以最好创建的是java Project 打包步骤: 1.在项目上,右键,选择Export. ...

  9. js文档视口高度函数

    objwin=window;objBody=document.body;objDel=document.documentElement;   关于弹窗时候用到 function getPageHeig ...

  10. opencv提取截获图像(总结摘来)

    opencv提取截获图像(总结摘来) http://blog.csdn.net/wuxiaoyao12/article/details/7305865 版权声明:本文为博主原创文章,未经博主允许不得转 ...