<!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>