<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>当当网首页轮播图-By小黑</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#wrap {
margin: 50px auto;
/* 图片的宽和高 */
width: 800px;
height: 330px;
/* 超出的影藏 */
overflow: hidden;
position: relative;
}
#list {
position: absolute;
bottom: 15px;
right: 250px;
}
#list li {
float: left;
margin-right: 15px;
cursor: pointer;
width: 23px;
height: 23px;
line-height: 23px;
text-align: center;
background: #ADA79D;
color: #FFF;
border-radius: 50%;
}
#list .on {
background: red;
}
/* 左箭头有箭头 */
#bar_left,
#bar_right {
width: 33px;
height: 80px;
line-height: 80px;
position: absolute;
top: 130px;
background: rgba(0, 0, 0, 0.3);
}
#bar_left {
left: -33px;
}
#bar_right {
right: -35px;
}
/*下面利用伪元素实现左侧和右侧的小箭头*/
#bar_left:after,
#bar_left:before,
#bar_right:before,
#bar_right:after {
content: "";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
top: 25px;
}
/*左边箭头*/
#bar_left:before {
border-left: 15px solid transparent;
border-right: 15px solid #FFF;
right: 10px;
}
#bar_left:after {
border-left: 15px solid transparent;
border-right: 15px solid rgba(0, 0, 0, 0.3);
right: 7px;
}
/*右边箭头*/
#bar_right:before {
border-right: 15px solid transparent;
border-left: 15px solid #FFF;
left: 10px;
}
#bar_right:after {
border-right: 15px solid transparent;
border-left: 15px solid rgba(0, 0, 0, 0.3);
left: 7px;
}
#wrap:hover #bar_left {
left: 0;
cursor: pointer;
transition: left 0.5s;
}
#wrap:hover #bar_right {
/* display: block; */
right: 5px;
cursor: pointer;
transition: right 0.5s;
}
.tex {
margin: 20px auto;
width: 400px;
}
.tex ul li {
list-style-type: circle;
color: red;
font-weight: bold;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="pic">
<li><img src="images/dang1.jpg" alt=""></li>
<li><img src="images/dang2.jpg" alt=""></li>
<li><img src="images/dang3.jpg" alt=""></li>
<li><img src="images/dang4.jpg" alt=""></li>
<li><img src="images/dang5.jpg" alt=""></li>
<li><img src="images/dang6.jpg" alt=""></li>
<li><img src="images/dang7.jpg" alt=""></li>
<li><img src="images/dang8.jpg" alt=""></li>
</ul>
<div id="bar_left"></div>
<div id="bar_right"></div>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
</div>
<div class="tex">
<ul>
<li>功能如下：</li>
<li>图片会自动播放，鼠标放上面会暂停播放</li>
<li>点击左右出现的箭头可以切换到上一张/下一张图片</li>
<li>点击序号会跳转到对应图片</li>
</ul>
</div>
<script>
var wrap = document.getElementById('wrap');
var pics = document.getElementById('pic');
var lists = document.getElementById('list').getElementsByTagName('li');
var point_l = document.getElementById('bar_left');
var point_r = document.getElementById('bar_right');
var index = 0;
var counter = null;
function change() { //计时器
counter = setInterval(function() {
index++;
if (index === lists.length) {
index = 0;
}
img(index);
}, 2000)
}
change();
function img(curIndex) { //切换图片
for (var i = 0; i < lists.length; i++) {
if (curIndex === i) {
lists[i].className = 'on';
} else {
lists[i].className = '';
}
}
index = curIndex;
pics.style.marginTop = -330 * curIndex + 'px'; //图片上移
wrap.οnmοuseοver = function() { //鼠标放到图片上时图片停止播放
pics.style.cursor = "pointer";
clearInterval(counter); //清除计时器
}
pics.οnmοuseοut = change;
}
//鼠标放到指定序号切换到指定图片
for (var i = 0; i < lists.length; i++) {
lists[i].id = i;
lists[i].οnmοuseοver = function() {
img(this.id);
this.className = 'on';
}
}
//当鼠标放在箭头上时，点击箭头切换到下一张图片
point_l.οnmοusedοwn = function() { //点击左边箭头
if (index <= 0) {
index = lists.length;
}
img(index - 1);
}
point_r.οnmοusedοwn = function() { //点击右边箭头
if (index >= lists.length - 1) {
index = -1;
}
img(index + 1);
}
</script>
</body>
</html>
