Html js 选项卡效果
来源：互联网 发布：yy网络直播红人 编辑：程序博客网 时间：2024/05/29 23:47
先上图，如果不是你要的效果，直接略过，不要浪费时间，选项卡定时循环播放，下面有文字描述，这里显示不出来，下边有下载链接，很简单的jquery效果
<!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">* { margin:0; padding:0;} body { font:12px Verdana, Geneva, sans-serif; color:#404040;}.tabs { width:960px; position:relative; margin:0 auto;top:100px;}.tabs ul{list-style:none;border: 1px solid rgb(215, 213, 201);height: 25px;}.tabs ul li { z-index:2; font-size:12px; //background:url(pic.gif) no-repeat; width:158px; height:25px; line-height:25px; text-align:center; float:left; margin-right:5px;}.tabs ul li.active { //background-position:0 -25px; background-color:#03C;color:#fff;}.tabs ul li a{text-decoration:none;width:100%;color:inherit;display:block;}#tab_01, #tab_02, #tab_03 ,#tab_04, #tab_05{ position:absolute; top:25px; left:0; width:940px; height:300px;border:1px solid #ace;z-index:1;margin:0 auto;padding-top:20px; }#tab_02, #tab_03, #tab_04, #tab_05{ display:none;}.pics_div .single_pic_div{width:230px;height:300px;float:left;margin-right:5px;}.pics_div .single_pic_div img{width:220px;height:220px;border:none;}.last_single_pic_div{margin-right:auto;}.pics_div .single_pic_div a{display:block;color: #FF7D86;font-family: tahoma, arial, 宋体;font-size: 12px;text-align:center;margin-bottom:10px;text-decoration:none;}.pics_div .single_pic_div a:hover{text-decoration:underline;}</style><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">var tab_num = 1;var timer_id = null;function move_to_next_tab(){ //供定时器调用，自动转换，切换到下一个tabif(tab_num == 5){//穿入当前的tab，如果已经到达最后一个，则返回第一个tab_num = 1;}else{tab_num = tab_num+1;}var tab_id= "0"+tab_num; //tab的标题id 即li标签var show_div_id = "tab_0"+tab_num; //每个tab页对应的div//alert(show_div_id);$('.tabs div').hide();$('#'+tab_id).siblings('li').removeClass('active').end().addClass('active');$('#'+show_div_id).show().children('div').show();}$(document).ready(function() {$('.tabs li').mouseover(function() {var id= $(this).attr("id");var show_div_id = "tab_"+id;$('.tabs div').hide();$(this).siblings('li').removeClass('active').end().addClass('active');$('#'+show_div_id).show().children('div').show();});$('.tabs li,.single_pic_div').mouseenter(function(){ //当鼠标指针移动到元素上面的时候，暂停计时器if(timer_id){window.clearInterval(timer_id);}});$('.tabs li,.single_pic_div').mouseleave(function(){timer_id=window.setInterval(move_to_next_tab,3000); //鼠标离开恢复计时器});});//循环启动，每隔3秒timer_id=window.setInterval(move_to_next_tab,3000);</script></head><body> <div class="tabs"> <ul> <!-- 默认第一个tab为激活状态 --> <li class="active" id="01"><a href="javascript:void(0);">品种一</a></li> <li id="02"><a href="javascript:void(0);">品种二</a></li> <li id="03"><a href="javascript:void(0);">品种三</a></li> <li id="04"><a href="javascript:void(0);">品种四</a></li> <li id="05"><a href="javascript:void(0);">品种五</a></li> </ul> <div id="tab_01" class="pics_div"> <div class="single_pic_div" > <a href="#"><img src="imgs/T1eO6fFjlXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" > <a href="#"><img src="imgs/T1eO6fFjlXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" > <a href="#"><img src="imgs/T1eO6fFjlXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" style="margin-right:0px;"> <a href="#"><img src="imgs/T1eO6fFjlXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> </div> <div id="tab_02" class="pics_div"> <div class="single_pic_div" > <a href="#"><img src="imgs/T1qpCrFaVXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" > <a href="#"><img src="imgs/T1qpCrFaVXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" > <a href="#"><img src="imgs/T1qpCrFaVXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" > <a href="#"><img src="imgs/T1qpCrFaVXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> </div> <div id="tab_03" class="pics_div"> <div class="single_pic_div" > <a href="#"><img src="imgs/T1Ux2zFmhbXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" > <a href="#"><img src="imgs/T1Ux2zFmhbXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" > <a href="#"><img src="imgs/T1Ux2zFmhbXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> <div class="single_pic_div" > <a href="#"><img src="imgs/T1Ux2zFmhbXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a> <a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a> </div> </div> <div id="tab_04">品种四</div> <div id="tab_05">品种五</div> </div></body></html>- Html js 选项卡效果
- html+css+js实现选项卡效果
- HTML+JS+CSS选项卡效果[搜集整理]
- 用html+css+js实现选项卡切换效果
- js实现选项卡效果
- tab选项卡js效果
- JS 选项卡效果案例
- JS实现选项卡效果
- JS实现选项卡效果
- CSS学习笔记-附加篇( CSS+JS实现的选项卡效果(html组件)）
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- JS实现选项卡切换效果
- 用JS制作tab选项卡效果
- css+div+js 选项卡效果 简洁
- css+js的选项卡效果
- js滑动效果，适用选项卡等
- tab -选项卡切换js效果
- 使用js实现tab选项卡效果
- 面试总结，多进程和多线程的区别
- 正则表达式常用例子总结
- (DS1.5.5)POJ 3306 Dirichlet's Theorem on Arithmetic Progressions(在一个数列之中寻找第n个素数)
- nodejs中的==、===、!=、!==的区别
- tomcat插件下载
- Html js 选项卡效果
- SendMessage 的各种参数
- 7 计算学习理论
- bootloader和bootstrap的区别
- php之jquery学习
- Android 中的 Service 全面总结
- c语言-连接！
- RCC_AHBPeriph_DMA DMA_Channel1 在那里定义的?
- 类的加载，初始化顺序
