- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/CSS">
- * {
- padding: 0;
- margin: 0;
- list-style: none;
- border: 0;
- }
- .all {
- width: 500px;
- height: 200px;
- padding: 7px;
- border: 1px solid #ccc;
- margin: 100px auto;
- position: relative;
- }
- .screen {
- width: 500px;
- height: 200px;
- overflow: hidden;
- position: relative;
- }
- .screen li {
- width: 500px;
- height: 200px;
- overflow: hidden;
- float: left;
- }
- .screen ul {
- position: absolute;
- left: 0;
- top: 0px;
- width: 3000px;
- }
- .all ol {
- position: absolute;
- right: 10px;
- bottom: 10px;
- line-height: 20px;
- text-align: center;
- }
- .all ol li {
- float: left;
- width: 20px;
- height: 20px;
- background: #fff;
- border: 1px solid #ccc;
- margin-left: 10px;
- cursor: pointer;
- }
- .all ol li.current {
- background: yellow;
- }
- #arr {
- display: none;
- }
- #arr span {
- width: 40px;
- height: 40px;
- position: absolute;
- left: 5px;
- top: 50%;
- margin-top: -20px;
- background: #000;
- cursor: pointer;
- line-height: 40px;
- text-align: center;
- font-weight: bold;
- font-family: '黑体';
- font-size: 30px;
- color: #fff;
- opacity: 0.3;
- border: 1px solid #fff;
- }
- #arr #right {
- right: 5px;
- left: auto;
- }
- </style>
- </head>
- <body>
- <div class="all" id='all'>
- <div class="screen" id="screen">
- <ul id="ul">
- <li><img src="images/carousel/1.jpg" width="500" height="200" /></li>
- <li><img src="images/carousel/2.jpg" width="500" height="200" /></li>
- <li><img src="images/carousel/3.jpg" width="500" height="200" /></li>
- <li><img src="images/carousel/4.jpg" width="500" height="200" /></li>
- <li><img src="images/carousel/5.jpg" width="500" height="200" /></li>
- </ul>
- <ol>
- </ol>
- <div id="arr">
- <span id="left"><</span>
- <span id="right">></span>
- </div>
- </div>
- </div>
- <script>
- //1. 获取事件源
- var all = document.getElementById("all");
- var screen = all.firstElementChild || all.firstChild;
- var imgWidth = screen.offsetWidth;
- var ul = screen.firstElementChild || screen.firstChild;
- var ol = screen.children[1];
- var div = screen.lastElementChild || screen.lastChild;
- var spanArr = div.children;
- //2. 复制第一张图片所在的 li, 添加到 ul 的最后面
- var ulNewLi = ul.children[0].cloneNode(true);
- ul.appendChild(ulNewLi);
- //3. 给 ol 添加 li,ul 的个数 - 1 个, 并点亮第一个按钮
- for (var i = 0; i <ul.children.length - 1; i++) {
- var olNewLi = document.createElement("li");
- olNewLi.innerHTML = i + 1;
- ol.appendChild(olNewLi);
- }
- var olLiArr = ol.children;
- olLiArr[0].className = "current";
- //4. 鼠标放到 ol 的 li 上, 切换图片
- for (var i = 0; i < olLiArr.length; i++) {
- olLiArr[i].index = i;
- olLiArr[i].onmouseover = function(){
- for (var j = 0; j < olLiArr.length; j++) {
- olLiArr[j].className = "";
- }
- this.className = "current";
- // 鼠标放到小的方块上的时候索引值和 key 以及 square 同步
- key = square = this.index;
- // 移动盒子
- animate(ul,-this.index * imgWidth);
- }
- }
- //5. 添加定时器
- var timer = setInterval(autoPlay,1000);
- // 固定向右切换图片, 两个定时器 (一个记录图片, 一个记录小方块)
- var key = 0;
- var square = 0;
- function autoPlay(){
- // 通过控制 key 的自增来模拟图片的索引值, 然后移动 ul
- key ++;
- if (key> olLiArr.length) {
- // 图片已经滑动到最后一张, 接下来, 跳转到第一张, 然后在滑动到第二张
- ul.style.left = 0;
- key = 1;
- }
- animate(ul,-key * imgWidth);
- // 通过控制 square 的自增来模拟小方块的索引值, 然后点亮盒子
- square ++;
- if (square> olLiArr.length - 1) {
- square = 0;
- }
- for (var i = 0; i <olLiArr.length; i++) {
- olLiArr[i].className = "";
- }
- olLiArr[square].className = "current";
- }
- // 鼠标放上去清除定时器, 移开后再开启定时器
- all.onmouseover = function(){
- div.style.display = "block";
- clearInterval(timer);
- }
- all.onmouseout = function(){
- div.style.display = "none";
- timer = setInterval(autoPlay, 1000);
- }
- //6. 左右切换图片, 鼠标放上去显示, 移开隐藏
- spanArr[0].onclick = function(){
- // 通过控制 key 的自增来模拟图片的索引值, 然后移动 ul
- key --;
- if (key < 0) {
- // 先移动到最后一张, 然后 key 的值取之前一张的索引值, 然后在向前移动
- ul.style.left = -imgWidth * (olLiArr.length) + "px";
- key = olLiArr.length - 1;
- }
- animate(ul, -key * imgWidth);
- // 通过控制 square 的自增来模拟小方块的索引值, 然后点亮盒子
- // 排他思想做小方块
- square--;
- if (square < 0) { // 索引值不能大于等于 5, 如果等于 5, 立刻变为 0;
- square = olLiArr.length - 1;
- }
- for (var i = 0; i < olLiArr.length; i++) {
- olLiArr[i].className = "";
- }
- olLiArr[square].className = "current";
- }
- spanArr[1].onclick = function() {
- // 右侧的和定时器一模一样
- autoPlay();
- }
- function animate(ele, target) {
- clearInterval(ele.timer);
- var speed = target> ele.offsetLeft ? 10 : -10;
- ele.timer = setInterval(function() {
- var val = target - ele.offsetLeft;
- ele.style.left = ele.offsetLeft + speed + "px";
- if (Math.abs(val) <Math.abs(speed)) {
- ele.style.left = target + "px";
- clearInterval(ele.timer);
- }
- }, 10)
- }
- //7.
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2563863.html