<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:border="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.left {
display: none;
position: absolute;
top: 50%;
left: -20px;
transform: translateY(-50%);
width:50px;
height: 50px;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
.left i {
display: block;
margin-top: 10px;
margin-left: 20px;
width: 30px;
height: 30px;
background: no-repeat;
background-size: 30px 30px;
}
.right {
display: none;
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
width:50px;
height: 50px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
.right i {
display: block;
margin-top: 10px;
margin-right: 20px;
width: 30px;
height: 30px;
background: no-repeat;
background-size: 30px 30px;
}
.span1{
color: white;
}
.span2{
color: yellow;
}
.span3{
color:yellow;
}
.span4{
color: white;
}
ul li,ol li {
list-style: none;
}
.picture {
position: absolute;
width: 100%;
}
.list {
position: absolute;
bottom: 10px;
left: 10px;
}
.list li {
float: left;
margin-right: 10px;
width: 10px;
height: 10px;
border-radius: 10px;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
}
.list .current {
background-color: #fff;
}
.picture li {
position: absolute;
width: 100%;
height: 200px;
}
img {
width: 100%;
height: 100%;
}
#cn{
list-style-type: none;
line-height: 36px;
background-color: black;
text-align: center;
width: 100%;
}
.cn1{
display: inline;
}
.cn1 a{
text-decoration: none;
color:white;
font-size: 15px;
margin: 0;
padding: 9px 7%;
word-spacing: 4px;
}
.menu {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
color: #000000;
padding-top: 5px;
border-top: 1px solid #000000;
background-color: #000000;
}
.subMenu {
width: 20%;
cursor: pointer;
margin:0 auto;
text-align: center;
}
.menu_name {
height: 12px;
color: white;
font-size: 12px;
margin-top: 8px;
width: 100%;
line-height: 12px;
}
img.menu_img {
height: 18px;
width: 18px;
}
img {
vertical-align: middle;
border: 0;
}
.active {
color: #FFA129;
}
.text-center {
text-align: center
}
</style>
</head>
<body>
<div class="container">
<span class="left"><i></i></span>
<span class="right"><i></i></span>
<ul class="picture">
<li><img src="/images/li1.jpg" ></li>
<li><img src="/images/li2.jpg" ></li>
<li><img src="/images/li3.jpg" ></li>
<li><img src="/images/li4.jpg" ></li>
</ul>
<ol class="list">
</ol>
</div>
<script type="text/javascript">
var picture = document.querySelector('.picture');
var list = document.querySelector('.list');
var num=0;
var circle=0;
for (i=0;i<picture.children.length;i++)
{
// 设置图片的位置
picture.children[i].style.left = i*window.screen.width + 'px';
// 自动生成有序列表
var li = document.createElement('li');
li.setAttribute('index',i);
list.appendChild(li);
// 给li添加点击事件
li.addEventListener('click',function () {
for (var i=0;i<list.children.length;i++) {
list.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
num = index;
circle = index;
animate(picture,-index*window.screen.width);
})
}
// 设置第一个ol孩子的类名
list.children[0].className = 'current';
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var container = document.querySelector('.container');
// 设置鼠标经过离开事件
container.addEventListener('mouseover',function () {
left.style.display = 'block';
right.style.display = 'block';
clearInterval(timer)
timer = null;
})
container.addEventListener('mouseleave',function () {
left.style.display = 'none';
right.style.display = 'none';
timer = setInterval(function () {
right.click();
},3000);
})
// js动画函数
function animate (obj,target,callback) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
},15)
}
var first = picture.children[0].cloneNode(true);
picture.appendChild(first);
picture.lastChild.style.left = (picture.children.length-1)*window.screen.width + 'px';
//右侧点击事件
right.addEventListener('click',function () {
if (num==picture.children.length-1) {
picture.style.left = 0;
num = 0;
}
num++;
animate(picture,-num*window.screen.width);
circle ++;
if (circle == list.children.length) {
circle = 0;
}
for (var i = 0;i<list.children.length;i++) {
list.children[i].className = '';
}
list.children[circle].className = 'current';
})
// 左侧点击事件
left.addEventListener('click',function () {
if (num==0) {
picture.style.left = -(picture.children.length-1)*window.screen.width +'px';
num = picture.children.length-1;
}
num--;
animate(picture,-num*window.screen.width);
circle --;
if (circle < 0) {
circle = list.children.length-1;
}
for (var i = 0;i<list.children.length;i++) {
list.children[i].className = '';
}
list.children[circle].className = 'current';
})
var timer = setInterval(function () {
// 手动调用
right.click();
},3000);
</script>
<script>
$(document).ready(function() {
//添加图片
$("div .subMenu>img").each(function() {
var name = $(this).attr("data-imgname");
var src = "http://www.jq22.com/img/cs/500x300-" + name + ".png"
//设置img的属性和值。
$(this).attr("src", src);
});
//点击事件
$("div .subMenu").click(function() {
// 取消当前激活状态
var $img = $(".active>img");
//返回被选元素的属性值
var name = $img.attr("data-imgname");
var src = "http://www.jq22.com/img/cs/500x300-" + name + ".png";
$img.attr("src", src);
$(".active").removeClass("active");
// 添加新状态
$(this).addClass("active");
//找到所有 div(subMenu) 的子元素(img)
$img = $(this).children("img");
name = $img.attr("data-imgname");
src = "http://www.jq22.com/img/cs/500x300-" + name + ".png";
//设置img的属性和值。
$img.attr("src", src);
//content根据点击按钮加载不同的html
var page = $(this).attr("data-src");
if (page) {
$("#content").load("../html/" + page)
}
});
// 自动点击第一个菜单
$("div .subMenu")[0].click();
});
/*content高度*/
function initSize() {
var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height();
$("#content").height(height + "px");
}
</script>
<div id="cn">
<li class="cn1"><a>数字藏品</a></li>
<li class="cn1"><a>发售计划</a></li>
<li class="cn1"><a>积分空投</a></li>
</div>
<div id="co" style="overflow:hidden">
<div id="cp" th:each="cangpin,cangpinStat:${cangpinlist}">
<div id="cq" width="80%" height="auto">
<img th:src="'/images/'+${cangpin.path2}">
</div>
<div>
<nobr class="span1" >1</nobr><br>
<nobr class="span2">2</nobr>
<nobr class="span2">限量</nobr>
<nobr class="span3">3</nobr>
<nobr class="span3" >4</nobr><br>
<nobr class="span4">5</nobr>
<nobr class="span1">6</nobr>
</div>
</div>
</div>
<div id="menu" class="menu">
<div id="one" class="subMenu text-center" style="position: fixed;left: 8%">
<img class="menu_img" src="/images/home.png" width="18px" height="18px">
<div class="menu_name">首页</div>
</div>
<div id="two" class="subMenu text-center" style="position: fixed;left: 41%">
<img class="menu_img" src="/images/cube.png" width="18px" height="18px">
<div class="menu_name">藏品</div>
</div>
<div id="three" class="subMenu text-center" style="position: fixed;left: 74%">
<img class="menu_img" src="/images/person.png" width="18px" height="18px">
<div class="menu_name">我的</div>
</div>
</div>
</body>
</html>
这是我的html代码，要怎么样，这几个nobr标签里的文字才能显示在以cp为id的那个div的内部，cq为id的那个div的下方。我知道用css,可是我不会css，怎么办呢？
