<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 408px;
height: 304px;
background: gray;
margin: auto;
padding-top: 4px;
}
.pic {
width: 400px;
height: 300px;
background: pink;
margin: auto;
position: relative;
}
.pic img{
width: 100%;
height: 100%;
}
#left,#right{
width: 40px;
height: 30px;
background: honeydew;
display: inline-block;
font-size:30px;
text-align: center;
top: 140px;
position: absolute;
}
#left{
left: 4px;
}
#right{
right: 4px;
}
#top{
width: 100%;
height: 34px;
background: rgba(0,0,0,0.7);
text-align: center;
color: #fff;
position: absolute;
line-height: 34px;
top: 0;
}
ul{
list-style: none;
overflow: hidden;
bottom: 0;
position: absolute;
width: 180px;
height: 130px;
left: 110px;
}
ul li{
width: 10px;
height: 10px;
background: gray;
border-radius: 50%;
float: left;
margin-left: 3px;
position: relative;
margin-top: 100px;
}
ul li p{
position: absolute;
top: -100px;
width: 86px;
height: 80px;
background-size: 100% 100%;
display: none;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="img/pic3.jpg" />
<span id="left"><</span>
<span id="right">></span>
<div id="top"></div>
<ul>
<li>
<p ></p>
</li>
<li>
<p ></p>
</li>
<li>
<p ></p>
</li>
<li>
<p ></p>
</li>
<li>
<p ></p>
</li>
</ul>
</div>
</div>
</body>
<script>
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
var oImg = document.getElementsByTagName('img')[0];
var oTop = document.getElementById('top');
var oBottom = document.getElementById('bottom');
var oLi = document.getElementsByTagName('li');
var arr = ['img/pic3.jpg','img/pic9.jpg','img/pic13.jpg','img/pic14.jpg','img/pic15.jpg'];
var num = 0;
oTop.innerHTML = 1 + "/ 5";
oLi[0].style.backgroundColor = 'red';
oLeft.onclick = function(){
num--;
for (var i=0;i<oLi.length;i++) {
oLi[i].style.backgroundColor = 'gray';
}
// a = 5;
if(num<0){
num = arr.length-1;
}
ni();
// oImg.src = arr[num];
// oTop.innerHTML = (num+1) + "/ 5";
// oLi[num].style.backgroundColor = 'red';
// console.log(a);
}
oRight.onclick = function(){
for (var i=0;i<oLi.length;i++) {
oLi[i].style.backgroundColor = 'gray';
}
num++;
if(num>arr.length-1){
num = 0;
}
ni();
}
for (var i=0;i<oLi.length;i++) {
oLi[i].index = i;
oLi[i].onclick = function(){
num = this.index;
for (var i=0;i<oLi.length;i++) {
oLi[i].style.backgroundColor = 'gray';
}
ni();
}
oLi[i].onmouseover = function(){
var oP = this.getElementsByTagName('p')[0];
oP.style.display = 'block';
oP.style.backgroundImage = 'url("'+ arr[this.index]+'")';
this.style.background = 'pink';
}
oLi[i].onmouseout = function(){
var oP = this.getElementsByTagName('p')[0];
oP.style.display = 'none';
this.style.background = '';
}
}
function ni(){
oImg.src = arr[num];
oTop.innerHTML = (num+1) + "/ 5";
oLi[num].style.backgroundColor = 'red';
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 408px;
height: 304px;
background: gray;
margin: auto;
padding-top: 4px;
}
.pic {
width: 400px;
height: 300px;
background: pink;
margin: auto;
position: relative;
}
.pic img{
width: 100%;
height: 100%;
}
#left,#right{
width: 40px;
height: 30px;
background: honeydew;
display: inline-block;
font-size:30px;
text-align: center;
top: 140px;
position: absolute;
}
#left{
left: 4px;
}
#right{
right: 4px;
}
#top{
width: 100%;
height: 34px;
background: rgba(0,0,0,0.7);
text-align: center;
color: #fff;
position: absolute;
line-height: 34px;
top: 0;
}
ul{
list-style: none;
overflow: hidden;
bottom: 0;
position: absolute;
width: 180px;
height: 130px;
left: 110px;
}
ul li{
width: 10px;
height: 10px;
background: gray;
border-radius: 50%;
float: left;
margin-left: 3px;
position: relative;
margin-top: 100px;
}
ul li p{
position: absolute;
top: -100px;
width: 86px;
height: 80px;
background-size: 100% 100%;
display: none;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="img/pic3.jpg" />
<span id="left"><</span>
<span id="right">></span>
<div id="top"></div>
<ul>
<li>
<p ></p>
</li>
<li>
<p ></p>
</li>
<li>
<p ></p>
</li>
<li>
<p ></p>
</li>
<li>
<p ></p>
</li>
</ul>
</div>
</div>
</body>
<script>
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
var oImg = document.getElementsByTagName('img')[0];
var oTop = document.getElementById('top');
var oBottom = document.getElementById('bottom');
var oLi = document.getElementsByTagName('li');
var arr = ['img/pic3.jpg','img/pic9.jpg','img/pic13.jpg','img/pic14.jpg','img/pic15.jpg'];
var num = 0;
oTop.innerHTML = 1 + "/ 5";
oLi[0].style.backgroundColor = 'red';
oLeft.onclick = function(){
num--;
for (var i=0;i<oLi.length;i++) {
oLi[i].style.backgroundColor = 'gray';
}
// a = 5;
if(num<0){
num = arr.length-1;
}
ni();
// oImg.src = arr[num];
// oTop.innerHTML = (num+1) + "/ 5";
// oLi[num].style.backgroundColor = 'red';
// console.log(a);
}
oRight.onclick = function(){
for (var i=0;i<oLi.length;i++) {
oLi[i].style.backgroundColor = 'gray';
}
num++;
if(num>arr.length-1){
num = 0;
}
ni();
}
for (var i=0;i<oLi.length;i++) {
oLi[i].index = i;
oLi[i].onclick = function(){
num = this.index;
for (var i=0;i<oLi.length;i++) {
oLi[i].style.backgroundColor = 'gray';
}
ni();
}
oLi[i].onmouseover = function(){
var oP = this.getElementsByTagName('p')[0];
oP.style.display = 'block';
oP.style.backgroundImage = 'url("'+ arr[this.index]+'")';
this.style.background = 'pink';
}
oLi[i].onmouseout = function(){
var oP = this.getElementsByTagName('p')[0];
oP.style.display = 'none';
this.style.background = '';
}
}
function ni(){
oImg.src = arr[num];
oTop.innerHTML = (num+1) + "/ 5";
oLi[num].style.backgroundColor = 'red';
}
</script>
</html>