带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变⽽改
变
---恢复内容开始---
在做这个的时候，最不会的是中间轮播图下边的数字是如何实现转变的，后来加⼊了jQuery就能实现了。
css部分：
1<style type="text/css">
2 *{
3 margin: 0;
4 padding: 0;
5 list-style: none;
6 }
7 #head_nav{
8 width: 1170px;
9 height: 50px;
10 background:#A40200 ;
11 display: flex;
12 flex: row;
13 text-align: center;
14 line-height: 50px;
15 margin: 0 auto;
16 }
17 #head_nav ul li{
18 margin-left: 5px;
19 width: 60px;
20 float: left;
21 }
22 #head_nav ul li a{
23 text-decoration: none;
24 color: white;
25 font-weight: bold;
26 }
27 #nav{
28 width: 1170px;
29 margin: 0 auto;
30 height: 30px;
31 display: flex;
32 flex: row;
33 background: #F0F0F0;
34 margin-bottom: 10px;
35 }
36 #nav ul li{
37 float: left;
38 width: 77px;
39 height: 30px;
40 line-height: 30px;
41 text-align: center;
42 }
43 #nav ul li a{
44 color: black;
45 text-decoration: none;
46 }
47 #add{
48 width: 1170px;
49 margin: 0 auto;
50 height: 85px;
51 margin-bottom: 10px;
52 }
53 #add img{
54 width: 1170px;
55 }
56 #product{
57 width: 1170px;
58 height: 470px;
59 margin: 0 auto;
60 }
61 #product_left{
62 float: left;
63 width: 417px;
64 height: 445px;
65 padding: 11px;
66 border: 1px solid gainsboro;
67 }
68 #product_left_img{
69 width:420px;
70 }
71 #product_left_bottom{
72 text-align: center;
73 border-top: 1px solid gainsboro;
74 margin-top: 15px;
75 padding-top: 4px;
76 }
77 #product_left_bottom img{
78 margin: 4px;
79 width: 85px;
80 border: 1px solid gainsboro;
81 }
82 #right_banner{
83 float: right;
84 width: 723px;
85 height: 400px;
86 }
87 #right_banner ul{
88 width: 723px;
89 }
90 #right_banner img{
91 width: 720px;
92 margin-left: 5px;
93 }
94 .banner_span{
95 display: inline-block;
96 width: 40px;
97 height: 40px;
99 border: 1px solid white;
100 background: url(images/spritesbgcon.png) no-repeat;
101 background-position: -120px -100px;
102 }
103 #right_banner_text ul{
104 float: left;
105 display: flex;
106 flex: row;
107 font-size: 12px;
108 }
109 #right_banner_text ul li{
110 list-style: disc !important;
111 margin: 13px;
112 }
113 #right_banner_text ul li a{
114 text-decoration: none;
115 margin-top:15px;
116 color: black;
117 }
118/*轮播图下边的数字的样式*/
119 .num{
120 position: absolute;
121 text-align: center;
122 width: 100%;
123 left: 450px;
124 top: 550px;
125 }
126 .num li{
127 display: inline-block;
128 width: 20px;
129 height: 20px;
130 background-color: darkgray;
131 color: white;
132 text-align: center;
133 line-height: 20px;
134 border-radius: 50%;
135 margin: 0 20px;
136 }
137/*轮播图下边数字变化之后显⽰的样式*/
138 .current{
139 background-color: red!important;
140 }
141 </style>
中间HTML部分：
1<!--头部导航栏-->
2<div id="head_nav">
3<ul>
4<li><a href="#">⾸页</a></li>
5<li><a href="">T恤</a></li>
6<li><a href="">帆布鞋</a></li>
7<li><a href="">衬衫</a></li>
8<li><a href="">POLO衫</a></li>
9<li><a href="">休闲裤</a></li>
10<li><a href="">裙⼦</a></li>
11<li><a href="">袜⼦</a></li>
12<li><a href="">NBA</a></li>
13<li><a href="">短裤</a></li>
14<li><a href="">⽜仔</a></li>
15<li><a href="">针织衫</a></li>
16<li><a href="">休闲包</a></li>
17<li><a href="">运动鞋</a></li>
18<li><a href="">优鲨</a></li>
19<li><a href="">Justyle</a></li>
20<li><a href=""></a></li>
21<li ><a href=""><img src="images/spritesbg.png" /></a></ 22</ul>
23</div>
24<!--中间导航栏部分-->
25<div id="nav">
26<ul>
27<li><a href="#">男⼈</a></li>
28<li><a href="">⼥⼈</a></li>
29<li><a href="">童装</a></li>
30<li><a href="">男鞋</a></li>
31<li><a href="">⼥鞋</a></li>
32<li><a href="">运动鞋</a></li>
33<li><a href="">内⾐</a></li>
34<li><a href="">配饰</a></li>
35<li><a href="">家居</a></li>
36<li><a href="">箱包</a></li>
js导航栏下拉菜单37<li><a href="">化妆品</a></li>
38<li><a href="">时尚⼥装</a></li>
39<li><a href="">达⼈街拍</a></li>
40<li><a href="">今⽇团购</a></li>
41<li><a href="">最新到货</a></li>
42</ul>
43</div>
44<!--⼴告部分-->
45<div id="add">
46<img src="images/ad1.png"/>
47</div>
48<!--中间商品部分，左右两部分，左边商品，右边轮播图-->
49<div id="product">
50<div id="product_left">
51<img src="images/flash_box_left/1.jpg" id="product_left_img"/>
52<div id="product_left_bottom">
53<img src="images/flash_box_left/2.jpg"/>
54<img src="images/flash_box_left/3.jpg"/>
55<img src="images/flash_box_left/4.jpg"/>
56<img src="images/flash_box_left/5.jpg"/>
57</div>
58</div>
59<!--轮播图下边的数字-->
60<div >
61<ul class="num">
62<li class="current">1</li>
64<li>3</li>
65<li>4</li>
66</ul>
67</div>
68<div id="right_banner">
69<div id="banner">
70<img src="images/flash/6.jpg" id="banner_img"/>
71</div>
72<div id="right_banner_text">
73<ul>
74<li ><span class="banner_span"></span></li>
75<li ><a href="#">休闲短袖衬衫新品上市 79元起</a></li>
76<li ><a href="">礼品卡购物折上折</a></li>
77<li ><a href="">关注有礼，凡客诚品官⽅商城</a></li>
78<li ><a href="">新款休闲包9万</a></li>
79</ul>
80</div>
81</div>
82</div>
最后是js部分，这边导⼊的jQuery包为学习版的jquery-1.8.3.js。
1 <script src="js/jquery-1.8.3.js"></script>
2 <script type="text/javascript">
3// 轮播图部分
4 $(function(){
5 setInterval("banner()",3000)
6 });
7var i=1;
8function banner(){
9 i++;
10 $("#banner_img")[0].src="images/flash/"+i+".jpg";
11if(i==7){i=0}
12 }
13// 轮播图下边⽂字的改变
14//设置⼀个定时器
15var time=setInterval(move,3000);
16//定义改变样式的函数
17function move() {
18 index++;
19if (index==4){
20 index=0
21 }
22//jquery中sibling是取得⼀个包含匹配的元素集合中每⼀个元素的所有唯⼀同辈元素的元素集合。
23//jQuery中eq是获取第N个元素
24//addclass是添加类样式
25//removeClass是从所有匹配的元素中删除全部或者指定的类。
26//这jQuery语法的意思是，.num类选择器下的下标为index的li添加current样式，其他同辈（也就是其他li）删除current样式
27 $(".num li").eq(index).addClass("current").siblings().removeClass("current");
28 };
29 </script>
---恢复内容结束---
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论