图片自己添加，或者使用本人的上传照片，拉到最下面即可看见
<div> <div> <ul> <li><a href="#" ><img src="https://www.jb51.net/images/slidepic1.jpg" alt=""/></a></li> <li><a href="#" ><img src="https://www.jb51.net/images/slidepic2.jpg" alt=""/></a></li> <li><a href="#" ><img src="https://www.jb51.net/images/slidepic3.jpg" alt=""/></a></li> <li><a href="#" ><img src="https://www.jb51.net/images/slidepic4.jpg" alt=""/></a></li> <li><a href="#" ><img src="https://www.jb51.net/images/slidepic5.jpg" alt=""/></a></li> </ul> <div> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </div>
css代码段：
初始化 reset
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0 } body, button, input, select, textarea { font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif; color: #666; } ol, ul { list-style: none; } a { text-decoration: none; } fieldset, img { border: 0; vertical-align: top; } a, input, button, select, textarea { outline: none; } a, button { cursor: pointer; } .wrap { width: 1200px; margin: 100px auto; } .slide { height: 500px; position: relative; } .slide li { position: absolute; left: 200px; top: 0; } .slide li img { width: 100%; } .arrow { opacity: 0; position: absolute; top: 50%; z-index: 1000; width: 100%; } .prev, .next { width: 76px; height: 112px; position: absolute; z-index: 99; } .prev { left: 0; background: url(../images/prev.png) no-repeat; } .next { right: 0; background-image: url(../images/next.png); }
js代码段：
这个是封装好的的js代码，直接引用即可
function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { if (k === "opacity") { var leader = getStyle(obj, k) * 100; var target = json[k] * 100; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader / 100; } else if (k === "zIndex") { obj.style.zIndex = json[k]; } else { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; } if (leader != target) { flag = false; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 15); } function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } }
定义onload函数，获取每一个对象，设置鼠标经过事件，鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失；然后.设置图片位置(给对象赋值)
window.onload = function () { //alert("外部的JS"); //找人 var wrap = document.getElementById("wrap"); var arrow = document.getElementById("arrow"); var arrLeft = document.getElementById("arrLeft"); var arrRight = document.getElementById("arrRight"); var slide = document.getElementById("slide"); var ul = slide.children[0]; var lis = ul.children;//所有图片 //1.鼠标经过轮播图 让箭头渐渐地显示 鼠标离开渐渐消失 wrap.onmouseover = function () { animate(arrow, {"opacity": 1}); }; wrap.onmouseout = function () { animate(arrow, {"opacity": 0}); }; //2.设置图片位置 var config = [ { "width": 400, "top": 20, "left": 50, "opacity": 0.2, "zIndex": 2 },//0 { "width": 600, "top": 70, "left": 0, "opacity": 0.8, "zIndex": 3 },//1 { "width": 800, "top": 100, "left": 200, "opacity": 1, "zIndex": 4 },//2 { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 },//3 { "width": 400, "top": 20, "left": 750, "opacity": 0.2, "zIndex": 2 }//4 ];//其实就是一个配置单 规定了每张图片的大小位置层级透明度 //获取页面上所有的li 让他们从当前的位置 以动画的效果到指定的位置 function assign() { for (var i = 0; i < lis.length; i++) { animate(lis[i], config[i], function () { flag = true;//动画执行完成后重新打开阀门 }); } } assign(); //3.点击箭头旋转 //点击右箭头 arrRight.onclick = function () { if (flag) { flag = false;//关闭阀门 //把开始的元素放到最后 config.push(config.shift()); assign(); } }; //点击左箭头 arrLeft.onclick = function () { if (flag) { flag = false; //把最后的元素放到开始 config.unshift(config.pop()); assign(); } }; //4.添加节流阀 var flag = true;//表示阀门是打开的 };
本人刚刚开始入行前端，希望大佬有什么意见的话，欢迎给我留言，你们的支持就是我最大的动力
精彩专题分享：