您的位置: 首页 > IT文章 > 广告代码 > 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换) 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换) 分类: IT文章 • 2022-07-19 23:04:55 在线演示 http://img..net/online/tab08/index.htm <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <base href="http://img..net/online/tab08/"> <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> <div class="dhooo_tab"> <ul class="tab_btn" id="myTab_btns1"> <li class="hot">嘉年华</li> <li>完美冬日</li> <li>年终庆</li> <li>妈咪宝贝</li> <li>冬季氛围</li> </ul> <div class="main" id="main1"> <div class="shell"> <ul id="content1"> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzEuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzIuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzMuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzQuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzUuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></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> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="main" id="main2"> <ul class="content"> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzUuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzQuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzMuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzIuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> <li><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzLzEuanBn" alt="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)" title="漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)"></li> </ul> </div> </div> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
