#3讲项目实战js广告轮播器
*{margin:0px;padding:0px;} #Top{width:100%;height:149px;background:url("../images/headbg.jpg");}/*背景图片headbg平铺满整个Top盒子*/ #Top .head{width:1000px;height:30px;margin:0px auto;/*head水平居中*/font-size:13px;font-family:"微软雅黑";color:#666;line-height:30px;} #Top .head span{color:#e20076;font-weight:bold;padding:0px 4px;} #Top .head a{color:#666;text-decoration:none;font-weight:bold;padding:0px 5px;} #Top .head a:hover{color:#e20076;} #header {height:70px;width:1000px;margin:0px auto;} #header .banner{width:221px;height:44px;float:left;padding-top:14px;} #header .logo{width:510px;height:70px;float:left;line-height:70px;font-size:16px;font-family:"微软雅黑";padding-left:80px;} #header .logo a{font-weight:bold;text-decoration:none;color:#000;padding:0px 20px;float:left} #header .logo a:hover{color:#e20076;} #header .search{width:180px;height:35px;float:right;padding-top:18px;position:relative;} #header .search input.txt{width:140px;height:23px;border:1px solid #e1e1e1;font-size:12px;color:#999;text-indent:10px;position:absolute;left:0px;top:20px;} #header .search input.but{width:26px;height:25px;background:url('../images/sosoh.jpg');border:0px;position:absolute;left:141px;top:20px;} #Top .Nav{height:49px;width:1000px;margin:0px auto;} #Top .Nav .mainNav{width:550px;height:49px;float:left;} #Top .Nav .mainNav ul li{list-style-type:none;width:100px;height:49px;float:left;line-height:49px;text-align:center;font-size:16px;font-family:"微软雅黑";position:relative;} #Top .Nav .mainNav ul li a{color:#fff;text-decoration:none;} #Top .Nav .mainNav ul li .menu{display:none;width:350px;border:2px solid #e10076;border-top:0px;position:absolute;top:49px;left:0px;background:#fff;filter:Alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;padding:10px;} #Top .Nav .smallNav{width:150px;height:49px;float:right;} #Top .Nav .mainNav ul li.hover{background:#b80064;} #Top .Nav .mainNav ul li p{text-align:left;line-height:35px;border-bottom:1px dotted #ddd;} #Top .Nav .mainNav ul li p span{font-weight:bold;} #Top .Nav .mainNav ul li p a{color:#666;} #Top .Nav .mainNav ul li p a:hover{color:#b80064;} #Top .Nav .smallNav{line-height:49px;font-size:14px;font-family:"微软雅黑";} #Top .Nav .smallNav a{color:#fff;text-decoration:none;float:left;padding:0px 10px;} #Top .Nav .smallNav a:hover{text-decoration:underline;} #Adv{width:100%;height:421px; background:red; position:relative;} #Adv .ImgList{width:100%; height:421px; position:absolute;/*绝对定位*/ left:0px; top:0px;z-index:2;} #Adv ul.button li{width:50px; height:10px; background:#000; border:1px dotted #fff; float:left; margin:0px 5px; list-style-type:none; } #Adv ul.button{ height:20px; position:absolute;left:43%; bottom:50px;z-index:3; display:inline-block;/*行内块级元素*/} #Adv ul.button li.hover{background:#fff;} <!doctype html> <html lang="zh-cn"> <head> <meta charset="gb2312"> <meta name="author" content="李明杰"> <meta name="keywords" content="湖南海外旅游有限公司 湖南长沙最好旅行社 湖南海外旅行社 长沙旅行社排名"> <meta name="description" content="湖南海外旅行社是湖南首批五星级旅行社,连续三年评为全国百强旅行社,国家特许经营出境 游组团社,长沙从事旅游业务最早、综合实力最强的旅游公司,主营出境旅游、国内旅游、入 境旅游、会议展览。"> <title>湖南海外旅游</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div id="Top"> <!-- 头部信息开始 --> <div class="head"><img src="images/cart.png" align="absmiddle"/> 全省免费服务热线: <span>96556</span> <span>0731-84635555</span>旅行社同行热线:<span>0731-84402588</span> <a href="#">登陆</a><a href="#">注册</a> </div> <!-- 头部信息结束 --> <!-- banner开始 --> <div id="header"> <div class="banner"><a href="#"><img src="images/logo.png"/></a></div> <div class="logo"> <a href="#">首 页</a> <a href="#">出境游</a> <a href="#">国内游</a> <a href="#">特价游</a> <a href="#">签 证</a> </div> <div class="search"> <form> <input type="text" class="txt" value="输入目的地" /> <input type="submit" class="but" value=""/> </form> </div> </div> <!-- banner结束 --> <!-- 导航开始 --> <div class="Nav"> <div class="mainNav"> <ul> <li ><a herf="#">出境跟团游</a> <div class="menu"> <p><span>台湾港澳:</span> <a href="#">台湾 </a>|<a href="#"> 香港 </a>| <a href="#">澳门</a></p> <p><span>东南亚:</span> <a href="#">泰国</a> | <a href="#">新加坡</a> | <a href="#">马来西亚</a> | <a href="#">越南 </a>| <a href="#">柬埔寨</a> | <a href="#">老挝 </a>| <a href="#">印度</a> | <a href="#">尼泊尔</a></p> </div> </li> <li><a herf="#">国内跟团游</a> <div class="menu"></div> </li> <li><a herf="#">国内自由行</a> <div class="menu"></div> </li> <li><a herf="#">湖南周边游</a> <div class="menu"></div> </li> <li><a herf="#">出境自由行</a> <div class="menu"></div> </li> </ul> </div> <div class="smallNav"> <a herf="#">泰国</a><a herf="#">台湾</a><a herf="#">普吉</a> </div> </div> <!-- 导航结束 --> </div> <!--网站头部结束--> <!--广告开始--> <div id="Adv"> <!--图片列表--> <div class="ImgList" style="background:url('images/adv1.jpg') center"></div> <div class="ImgList" style="background:url('images/adv2.jpg') center"></div> <div class="ImgList" style="background:url('images/adv3.jpg') center"></div> <div class="ImgList" style="background:url('images/adv4.jpg') center"></div> <!--轮播的按扭--> <ul class="button"> <li class="hover"></li> <li></li> <li></li> <li></li> </ul> </div> <!--广告结束-->
<!--整站建设步骤如下:
1.构建一个宽度100% 高度149px 这样一个长方形,为了保证浏览器的兼容,我们加了*{margin:0px;padding:0px;}Top样式中的宽度100%也可以不写,因为浏览器已给出默认为100%宽。 2.给个长方形盒子,添加一个背景图片,背景图片默认的会沿着水平方向平铺 3.Top盒子里头部信息的构建 head里假如图片标签cart图像 4.如何控制图片和文字对齐方式在垂直方向居中,控制文字的样式。单独控制某些文字可以加span标准单独控制样式。 5.a标签特性,如何控制a标签的样式,去除标签自身的样式并重新定义,a标签的一个伪类a:hover。 6.构建header盒子,设置居中,在里面构建三个盒子,设置三个盒子的浮动定位, 7.制作导航,提到了a标签做导航布局时候各个标签间会有一个空隙的兼容问题(浮动)来解决。 8.制作站内搜索部分,构建两个盒子 , 9.单独建立一个样式文件,通过外部引用调用样式表,注意外部CSS样式中引用的图片的位置变化,要向上返回一级目录 10.构建用来放导航的长方形,然后居中,在这个长方形里构建连个小盒子 浮动布局 一个在左一个在右 11.利用ul无序列表制作导航,这里么复习了以下文字的样式效果和a标签样式设置。 12.构建长方形div,利用相对和绝对定位来控制它的位置。并且利用了透明技术和边框上边框的隐藏,代码的优先级别,后面的会覆盖前面的样式 13.js 制作菜单活动效果 14.二级菜单里面的样式,特别强调了,代码的一个继承关系 右边小导航的制作 15.构建一个大的长方形,用来放图片列表和按扭,然后我们在里面构建四个大小一样的长方形,用来放图片列表(图片是当成背景图片插入进去,千万不能直接插入图片) 16.相对和绝对定位,把四个长方形图片区块,放在一起; 17.利用ul 无序列表来制切换按扭,同样是通过相对和绝对定位来进行位置的调整 18.如何让ul 的宽度,自适应(他里面的内容有多宽,他就有多宽)定位的元素会在所有没有定位的元素上面 19.发现导航出不来,是因为背图片给覆盖了,我们通过z-index:3;来改控制那个在上面,(值越大越在上面) 20.利用js搞定,鼠标放上去时的图片切换效果 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" > var d_Value=$(".search input.txt").val();// 获取到它的默认值 //获取焦点时,即鼠标点击到输入框时,将文本框清空内容 $(".search input.txt").focus(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点 //$(this)等同于我们的$(".search input.txt") if($(this).val()==d_Value){//如果文本框值为默认值"输入目的地点",则重新赋值文本框内容为空 $(this).val(""); } }); //失去焦点时 $(".search input.txt").blur(function(){// $查找获取对象元素.txt 鼠标放上时文本输入框获取焦点 //$(this)等同于我们的$(".search input.txt") if($(this).val()==""){//如果值为空,则赋值为默认值"输入目的地点" $(this).val(d_Value); } }); //二级菜单的现实和隐藏。移动鼠标到li标签上和离开li标签所执行的两个函数即两个动作 $(".Nav .mainNav ul li").hover(function(){ $(this).find(".menu").show();//显示menu盒子即二级菜单 $(this).addClass("hover");//给li标签添加hover样式 },function(){ $(this).find(".menu").hide();//隐藏menu盒子即二级菜单 $(this).removeClass("hover");//去除li标签hover样式 });
//=======广告轮播图的实现=======
var _index=0;//初始化序列 var timePlay=null; $("#Adv .ImgList").eq(0).show().siblings("div").hide();//最开始显示第一张
$("ul.button li").hover(function(){/*鼠标在上面*/
clearInterval(timePlay);//清处定时播放器 _index=$(this).index();//获取当前li序列号 //alert(_index);//弹窗 $(this).addClass("hover").siblings().removeClass("hover");//显示按扭 //fadeIn 淡入 fadeOut 淡出 $("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//显示图片 },function(){/*鼠标移开*/ autoPlay();//启用定时播放器 });
//自动轮播
//构建自动轮播的函数 function autoPlay(){ //alert("sss"); //设置定时器 timePlay=setInterval(function(){ _index++; if(_index<4){ $("ul.button li").eq(_index).addClass("hover").siblings().removeClass("hover");//显示按扭 $("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//显示图片 //alert(_index); }else{_index=-1;/*设置序列号为-1,跳到播放第一张图片*/} },2000); }; autoPlay();//调用和执行
</script>
</body> </html> ![]() ![]() ![]() ![]() |
3讲项目实战js广告轮播器
最新推荐文章于 2024-04-20 08:20:08 发布