前端图片轮播带弹性效果
摘要： 前端开发必备技能 web前端开发专业技能 web前端开发专业技能介绍 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <meta name=&#……
| 前端开发必备技能 |
| web前端开发专业技能 |
| web前端开发专业技能介绍 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<title>javascript有弹性的上下滑动幻灯片</title>
<script type=”text/javascript” src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/domove.js”></script>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
border: none;
}
body {
background: #ecfaff;
}
.play {
width: 470px;
height: 150px;
overflow: hidden;
position: relative;
margin: 150px auto 0;
}
.play .text {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
height: 60px;
}
.play .text div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
filter: alpha(opacity, 40);
opacity: 0.4;
z-index: 99;
}
.play .text span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 60px;
color: white;
z-index: 999;
text-align: center;
font-size: 20px;
}
ol {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 99999;
}
ol li {
float: left;
margin-right: 3px;
display: inline;
cursor: pointer;
background: #fcf2cf;
border: 1px solid #f47500;
padding: 2px 6px;
color: #d94b01;
font-family: arial;
font-size: 12px;
}
.active {
padding: 3px 8px;
font-weight: bold;
color: #ffffff;
background: #ffb442;
position: relative;
bottom: 2px;
}
ul {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul li {
width: 470px;
height: 150px;
float: left;
}
ul img {
float: left;
width: 470px;
height: 150px;
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById(“play”);
var aOl = oBox.getElementsByTagName(“ol”)[0];
var aUl = oBox.getElementsByTagName(“ul”)[0];
var oBtn = aOl.children;
var oLi = aUl.children;
var iNow = 0;
var timer = null;
timer = setInterval(motion2, 2000);
function motion2() {
motion1() < br />
if (iNow==oBtn.length-1) {
iNow = -1 < br />
}
iNow++</p >
<p> }
for(var i=0;i<oBtn.length; i++){
(function (index) {
oBtn[i].onclick = function () {
iNow = index
motion()</p>
<p> }
})(i)
}
function motion1(){
for(vari=0;i<oBtn.length; i++){
(function (index) {
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].className = ”;
}
oBtn[iNow].className = ‘active’;
var fx = Tween.Bounce.easeOut;
doMove(aUl, { top: -iNow * oLi[0].offsetHeight }, { easing: fx });
})(i)
}
}
function motion(){
for(vari=0;i<oBtn.length; i++){
oBtn[i].className = ”;
}
oBtn[iNow].className=’active’;
var fx = Tween.Bounce.easeOut;
doMove(aUl,{top: -iNow*oLi[0].offsetHeight},{easing: fx});
}
oBox.onmouseover=function(){
clearInterval(timer)
}
oBox.onmouseout=function(){
timer = setInterval(motion2, 1000);
}
}
</script>
</head>
<body>
<div class=”play” id=”play”>
<ol>
<li class=”active”>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/1.jpg” alt=”广告一” /></a></li>
<li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/2.jpg” alt=”广告二” /></a></li>
<li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/3.jpg” alt=”广告三” /></a></li>
<li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/4.jpg” alt=”广告四” /></a></li>
<li><a href=”#”><img src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript23/img/5.jpg” alt=”广告五” /></a></li>
</ul>
</div>
</body>
</html>
| web前端开发所需技能 |
| 前端开发要掌握的技能 |
| 前端掌握开发技能描述 |
» 本文来自：前端开发者 » 《前端图片轮播带弹性效果》
» 本文链接地址：https://www.rokub.com/6298.html
» 您也可以订阅本站：https://www.rokub.com
近期评论