前端开发jquery幻灯片
摘要：js开发和web前端 javaweb开发前端 extjs5前端开发 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document……
js开发和web前端 javaweb开发前端 extjs5前端开发
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul,
ol {
list-style: none;
}
#play {
position: relative;
width: 1350px;
height: 400px;
font-size: 60px;
overflow: hidden;
}
#play ul {
width: 2600px;
height: 300px;
position: absolute;
left: -400px;
}
#play ul li {
float: left;
}
#play img {
width: 400px;
height: 300px;
margin-top: 50px;
opacity: .7;
}
#play .left,
.right {
position: absolute;
top: 0px;
z-index: 2;
width: 420px;
height: 400px;
background: #DDF;
opacity: 0;
cursor: pointer;
}
#play .left {
left: 0px;
}
#play .right {
right: 0px;
}
</style>
<script>
$(function () {
$(‘#play ul li img’).eq(2).css({
width: ‘500px’,
height: ‘400px’,
marginLeft: ’25px’,
marginRight: ’25px’,
marginTop: ‘0’,
opacity: ‘1’
});
var n = 1;
var dj = true;
$(‘#play .right’).on(‘click’, function () {
if (dj) {
n = 1;
n++;
dj = false;
run();
};
});
$(‘#play .left’).on(‘click’, function () {
if (dj) {
n–;
dj = false;
run1();
};
});
function run() {
$(‘#play ul’).animate({ left: -800 }, 666, function () {
$(‘#play ul li’).first().appendTo(‘#play ul’);
$(‘#play ul’).css(‘left’, ‘-400px’);
n–;
dj = true;
});
$(‘#play ul li img’).eq(n + 1).animate({ width: 500, height: 400, opacity: 1, marginLeft: 25, marginRight: 25, marginTop: 0 }, 666);
console.log(n);
$(‘#play ul li img’).eq(n).animate({ width: 400, height: 300, opacity: .5, marginLeft: 0, marginRight: 0, marginTop: 50 }, 666);
};
function run1() {
$(‘#play ul’).animate({ left: ‘0’ }, 666, function () {
$(‘#play ul li’).last().prependTo(‘#play ul’);
$(‘#play ul’).css(‘left’, ‘-400px’);
n++;
dj = true;
});
$(‘#play ul li img’).eq(n + 1).animate({ width: 500, height: 400, opacity: 1, marginLeft: 25, marginRight: 25, marginTop: 0 }, 666);
$(‘#play ul li img’).eq(n + 2).animate({ width: 400, height: 300, opacity: .5, marginLeft: 0, marginRight: 0, marginTop: 50 }, 666, function () { console.log(n); });
}
});
</script>
</head>
<body>
<div id=”play”>
<ul>
<li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093724j7muvr193kybfzmr.jpg”></li>
<li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093814zdffy6d3d7400pqf.jpg”></li>
<li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093747yktfktqam4i3mooo.jpg”></li>
<li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093745uo3gwfvw80fr0sr2.jpg”></li>
<li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093745zpty66r6vubbryg1.jpg”></li>
<li><img src=”http://cdn.attach.w3cfuns.com/notes/pics/201610/12/093731va7rfamaealwuveu.jpg”></li>
</ul>
<div class=”left”></div>
<div class=”right”></div>
</div>
</body>
</html>
前端接口开发java angularjs前端开发流程 前端开发和java开发哪个难
» 本文来自：前端开发者 » 《前端开发jquery幻灯片》
» 本文链接地址：https://www.rokub.com/5759.html
» 您也可以订阅本站：https://www.rokub.com
近期评论