带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始---
在做这个的时候，最不会的是中间轮播图下边的数字是如何实现转变的，后来加入了jQuery就能实现了。
css部分：
<style type="text/css">
*{
margin:;
padding:;
list-style: none;
}
#head_nav{
width: 1170px;
height: 50px;
background:#A40200 ;
display: flex;
flex: row;
text-align: center;
line-height: 50px;
margin: 0 auto;
}
#head_nav ul li{
margin-left: 5px;
width: 60px;
float: left;
}
#head_nav ul li a{
text-decoration: none;
color: white;
font-weight: bold;
}
#nav{
width: 1170px;
margin: 0 auto;
height: 30px;
display: flex;
flex: row;
background: #F0F0F0;
margin-bottom: 10px;
}
#nav ul li{
float: left;
width: 77px;
height: 30px;
line-height: 30px;
text-align: center;
}
#nav ul li a{
color: black;
text-decoration: none;
}
#add{
width: 1170px;
margin: 0 auto;
height: 85px;
margin-bottom: 10px;
}
#add img{
width: 1170px;
}
#product{
width: 1170px;
height: 470px;
margin: 0 auto;
}
#product_left{
float: left;
width: 417px;
height: 445px;
padding: 11px;
border: 1px solid gainsboro;
}
#product_left_img{
width:420px;
}
#product_left_bottom{
text-align: center;
border-top: 1px solid gainsboro;
margin-top: 15px;
padding-top: 4px;
}
#product_left_bottom img{
margin: 4px;
width: 85px;
border: 1px solid gainsboro;
}
#right_banner{
float: right;
width: 723px;
height: 400px;
}
#right_banner ul{
width: 723px;
}
#right_banner img{
width: 720px;
margin-left: 5px;
}
.banner_span{
display: inline-block;
width: 40px;
height: 40px;
float: left;
border: 1px solid white;
background: url(images/spritesbgcon.png) no-repeat;
background-position: -120px -100px;
}
#right_banner_text ul{
float: left;
display: flex;
flex: row;
font-size: 12px;
}
#right_banner_text ul li{
list-style: disc !important;
margin: 13px;
}
#right_banner_text ul li a{
text-decoration: none;
margin-top:15px;
color: black;
}
/*轮播图下边的数字的样式*/
.num{
position: absolute;
text-align: center;
width: 100%;
left: 450px;
top: 550px;
}
.num li{
display: inline-block;
width: 20px;
height: 20px;
background-color: darkgray;
color: white;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin: 0 20px;
}
/*轮播图下边数字变化之后显示的样式*/
.current{
background-color: red!important;
}
</style>
中间HTML部分：
<!--头部导航栏-->
<div id="head_nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="">T恤</a></li>
<li><a href="">帆布鞋</a></li>
<li><a href="">衬衫</a></li>
<li><a href="">POLO衫</a></li>
<li><a href="">休闲裤</a></li>
<li><a href="">裙子</a></li>
<li><a href="">袜子</a></li>
<li><a href="">NBA</a></li>
<li><a href="">短裤</a></li>
<li><a href="">牛仔</a></li>
<li><a href="">针织衫</a></li>
<li><a href="">休闲包</a></li>
<li><a href="">运动鞋</a></li>
<li><a href="">优鲨</a></li>
<li><a href="">Justyle</a></li>
<li><a href=""></a></li>
<li style="width: 80px;height:20px;overflow:hidden;position: relative;margin-left: 40px;margin-top: 15px;"><a href=""><img src="data:images/spritesbg.png" style="position: absolute; right: 0;bottom: 0;"/></a></li>
</ul>
</div>
<!--中间导航栏部分-->
<div id="nav">
<ul>
<li><a href="#">男人</a></li>
<li><a href="">女人</a></li>
<li><a href="">童装</a></li>
<li><a href="">男鞋</a></li>
<li><a href="">女鞋</a></li>
<li><a href="">运动鞋</a></li>
<li><a href="">内衣</a></li>
<li><a href="">配饰</a></li>
<li><a href="">家居</a></li>
<li><a href="">箱包</a></li>
<li><a href="">化妆品</a></li>
<li><a href="">时尚女装</a></li>
<li><a href="">达人街拍</a></li>
<li><a href="">今日团购</a></li>
<li><a href="">最新到货</a></li>
</ul>
</div>
<!--广告部分-->
<div id="add">
<img src="data:images/ad1.png"/>
</div>
<!--中间商品部分，左右两部分，左边商品，右边轮播图-->
<div id="product">
<div id="product_left">
<img src="data:images/flash_box_left/1.jpg" id="product_left_img"/>
<div id="product_left_bottom">
<img src="data:images/flash_box_left/2.jpg"/>
<img src="data:images/flash_box_left/3.jpg"/>
<img src="data:images/flash_box_left/4.jpg"/>
<img src="data:images/flash_box_left/5.jpg"/>
</div>
</div>
<!--轮播图下边的数字-->
<div >
<ul class="num">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="right_banner">
<div id="banner">
<img src="data:images/flash/6.jpg" id="banner_img"/>
</div>
<div id="right_banner_text">
<ul>
<li style="list-style: none !important;"><span class="banner_span"></span></li>
<li style="width: 170px;"><a href="#">休闲短袖衬衫 新品上市 79元起</a></li>
<li style="width: 100px;"><a href="">礼品卡购物折上折</a></li>
<li style="width: 180px;"><a href="">微信关注有礼，凡客诚品官方商城</a></li>
<li style="width: 100px;"><a href="">新款休闲包9万</a></li>
</ul>
</div>
</div>
</div>
最后是js部分，这边导入的jQuery包为学习版的jquery-1.8.3.js。
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 轮播图部分
$(function(){
setInterval("banner()",3000)
});
var i=1;
function banner(){
i++;
$("#banner_img")[0].src="data:images/flash/"+i+".jpg";
if(i==7){i=0}
}
// 轮播图下边文字的改变
//设置一个定时器
var time=setInterval(move,3000);
//定义改变样式的函数
function move() {
index++;
if (index==4){
index=0
}
//jquery中sibling是取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
//jQuery中eq是获取第N个元素
//addclass是添加类样式
//removeClass是从所有匹配的元素中删除全部或者指定的类。
//这jQuery语法的意思是，.num类选择器下的下标为index的li添加current样式，其他同辈（也就是其他li）删除current样式
$(".num li").eq(index).addClass("current").siblings().removeClass("current");
};
</script>
---恢复内容结束---
带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变的更多相关文章
- BootStrap学习(三)——重写首页之导航栏和轮播图
1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...
- Android开源项目——带图标文字的底部导航栏IconTabPageIndicator
接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...
- iOS导航栏的正确隐藏方式【转】
简介:在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如 ...
- iOS导航栏的正确隐藏方式
在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如何做了 ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- 【VIP视频网站项目一】搭建视频网站的前台页面（导航栏+轮播图+电影列表+底部友情链接）
首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...
- Jquery实现动态导航栏和轮播导航栏
动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...
- bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来,图片始终有一部分的高度 被隐藏了 后来通 ...
- 导航栏视图设置 tabbleView 是设置总背景图
//导航栏视图设置 tabbleView 是设置总背景图 //默认的时白色半透明(有点灰的感觉), UIBarStyleBlack,UIBarStyleBlackTranslucent ,UIBarS ...
随机推荐
- 使用jQuery编辑删除页面内容，两种方式
第一种,比较少的编辑用这种,直接在那块内容上编辑,失去焦点即完成 前几天做编辑框的时候,需要只修改一个状态 //编辑角色 function editTr($this){ thatTd=$($this) ...
- 2014最新 iOS App 提交上架store 详细流程
http://blog.csdn.net/tt5267621/article/details/39430659
- c++ map 官方样例
#include <iostream> #include <string> #include <iomanip> #include <map> temp ...
- VC中编译报错：error C2011: 'fd_set' : 'struct' type redefinition
这是头文件包含顺序的问题,原因与解决办法见下面代码的注释. /* 包含下面这两个头文件时,必须把winsock2.h放在前面 否则编译报错,N多的重定义错误:例如 error C2011: 'fd_s ...
- delphi java 日期 转换 获取Unix时间戳
获取Unix时间戳 http://www.cnblogs.com/findumars/p/4716753.html 最简单准确一句话 Result:=IntToStr( DateTimeToUnix ...
- Delphi 使用MD5 比对文件
使用MD5的方法比对CXimage里图片是否改变: Delphi7实现方法: uses IdHashMessageDigest function TForm1.GetImageMD5(cxImage: ...
- XML报错：The reference to entity "characterEncoding" must end with the ';' delimite
解决方法: 在web.xml增加如下配置: <filter> <filter-name>encodingFilter</filter-name> <fil ...
- 一个rcu回调导致的简单死锁
在自有模块的处理中,我们设计了一个内核线程去做gc, 但同时,我们又用到了rcu,rcu中也会去抢gc的锁,由于该锁用的spin_lock,而不是spin_lock_bh,并没有关软中断,所以在rcu ...
- C++17尝鲜：变长 using 声明
using 声明 先来看 using 声明在类中的应用: 代码1 #include <iostream> using namespace std; struct A { void f(in ...
- python学习笔记之函数的参数
函数的参数有位置参数和关键字参数,位置参数一定要在关键字参数的前面,位置参数的优先级是高于关键字参数的,否则会报错 def my_abs(a,b): print(a) print(b) my_abs( ...