简洁的双向缓冲滑动图片自动播放类,,CIO之家

简洁的双向缓冲滑动图片自动播放类

hannover　　http://www.cnblogs.com/hannover/　　综合　　编辑:dezai　　图片来源:网络

"COLOR: #000000">! "COLOR: #000000">DOCTYPEhtmlPUBLIC "COLOR: #000000">"

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>
<base href="http://www.dhooo.com/web/" />
<style>
li,ul{margin:0;padding:0;list-style-type:0}
body{background:#eee; text-align:center;}
li img{vertical-align:bottom; }
.dhooo_tab{
    width:460px;     margin:10px;
    background:#fff url(images/main_bg.gif) repeat-x 0 100%;
    border:1px solid #aaa;position:relative;
    float:left;
}
.tab_btn li{    float:left; width:60px}
.tab_btn li {
    font-size:12px;display:block;
    padding:10px;margin-right:5px;
    zoom:1;    text-decoration:none;
    color:#fff;line-height:50%;
    cursor:pointer;
}
.tab_btn li.hot {
    background:#fff;
    color:#333;font-weight:bold;
    cursor:default;
}
.tab_btn{
    overflow:hidden;    height:28px;
    padding-left:20px;     padding-top:5px;
    background:url(images/tabbar.gif) repeat-x ;
}
.tab_btn_num{
    position:absolute;
    right:50px;bottom:15px;
}
.tab_btn_num li{
    width:20px;height:20px;
    background: #CC3300;
    border:2px solid #993300;
    overflow:hidden; color:#fff;
    filter:alpha(opacity=80);opacity:0.8;
    float:left;cursor:default; font-size:12px;line-height:20px;
    margin:0px 5px; font-family:Arial;
}
.tab_btn_num li.hot{
    background:#FFCC00; color:#993300;
    border:2px solid #FF0000;
}
.shell{
    width:99999px;     height:100%;
}
.shell li{
    float:left;
    width:360px;     height:100%;
}

.main{
    width:360px;height:190px;
    overflow:hidden;
    margin:10px auto;
    text-align:left;    font-size:12px;
}

</style>
</head>

<body>
<div class="dhooo_tab">
         <ul class="tab_btn" id="myTab_btns1">
          <li class="hot">嘉年华</li>

完美冬日</li><li>年终庆</li>

妈咪宝贝</li><li>冬季氛围</li>
         </ul>
         <div class="main" id="main1">
            <div class="shell">
                <ul id="content1">
                 <li><img src="images/1.jpg" /></li>
                 <li><img src="images/2.jpg" /></li>
                 <li><img src="images/3.jpg" /></li>
                 <li><img src="images/4.jpg" /></li>
                 <li><img src="images/5.jpg" /></li>
                </ul>
            </div>
         </div>
</div>
<div class="dhooo_tab">
        <div style="height:30px;background:#CC0000;margin-bottom:10px;border-bottom:2px solid #990000;position:relative"><div style="background:#fff;width:80px;font-size:12px;position:absolute;bottom:-2px;left:20px;padding:5px">我的幻灯片</div></div>
         <ul class="tab_btn_num" id="myTab_btns2">
          <li class="hot">1</li>

2</li><li>3</li>

4</li><li>5</li>
         </ul>
         <div class="main" id="main2">
                <ul class="content">
                 <li><img src="images/5.jpg" /></li><li><img src="images/4.jpg" /></li><li><img src="images/3.jpg" /></li><li><img src="images/2.jpg" /></li><li><img src="images/1.jpg" /></li>
                </ul>
         </div>
<

本文作者:hannover 来源:http://www.cnblogs.com/hannover/
CIO之家 www.ciozj.com 微信公众号:imciow

　　　　>>频道首页　　 >>网站首页　　纠错　　 >>投诉