Jquery实例效果—加载条和自动轮播图

前端开发写代码之前的准备

编写高质量代码 web前端开发修炼之道

wep前端开发代码

html 代码片段

<!DOCTYPE html>

<html>

<head>

<script

language=”javascript”

src=”http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js”

></script>

$(function () {

var start = 0;

var loadDom = $(“.load>.loadLine”);

var loadWdth = loadDom.css(“width”);

var info = setInterval(num, 20);

loadDom.animate({ width: “100%” }, 2000, function () {

$(“.content”).slideDown(1000);

var info1 = setInterval(autoImg, 1500);

});

function num() {

start = start + 1;

loadDom.text(“loading” + (start) + “%”);

console.log(start);

if (start == 100) {

clearInterval(info);

}

function autoImg() {

var ulDom = $(“#ulDom”);

var leftNum = parseInt(ulDom.css(“left”));

ulDom.animate({ left: leftNum – 148 + “px” }, 500, function () {

var li = ulDom.children()[0];

li.remove();

ulDom.append(li);

ulDom.css(“left”, “0px”);

});

}

}) < br />

</script>

html,

body {

padding: 0px;

margin: 0px;

background: #c3c6c9;

font-family: ‘微软雅黑’;

}

.boxDom {

width: 600px;

height: auto;

margin: 100px auto;

padding: 20px;

background: #e4e6e7;

box-shadow: 0px 0px 6px #666;

}

h2 {

margin-top: 0px;

text-align: center;

}

.load {

border: 1px solid #999;

background: -webkit-linear-gradient(top, #ccc, #eee, #fff);

box-shadow: 0px 2px 4px #999;

width: 560px;

height: 30px;

border-radius: 60px;

margin: 20px auto;

}

.loadLine {

background: #8fd95b;

width: 0px;

height: 30px;

border-radius: 60px;

line-height: 1.8em;

text-align: center;

}

.content {

display: none;

overflow: hidden;

position: relative;

height: 140px;

}

.content ul {

position: absolute;

left: 0px;

padding: 0px;

margin: 0px;

width: 1192px;

height: 140px;

list-style: none;

}

.content ul li {

float: left;

margin-left: 8px;

}

.content ul li img {

width: 140px;

}

</style>

</head>

<body>

<h2>Loading…</h2>

<li>

<img

src=”http://img.hoop8.com/attachments/1602/5342062172999.jpg”

alt=”1″

</li>

<li>

<img

src=”http://img.hoop8.com/attachments/1602/5312062172999.jpg”

alt=”2″

</li>

<li>

<img

src=”http://img.hoop8.com/attachments/1602/5262062172999.jpg”

alt=”3″

</li>

<li>

<img

src=”http://img.hoop8.com/attachments/1602/5222062172999.jpg”

alt=”4″

</li>

<li>

<img

src=”http://img.hoop8.com/attachments/1602/5172062172999.jpg”

alt=”5″

</li>

<li>

<img

src=”http://img.hoop8.com/attachments/1602/5122062172999.jpg”

alt=”6″

</li>

<li>

<img

src=”http://img.hoop8.com/attachments/1602/5052062172999.jpg”

alt=”7″

</li>

<li>

<img

src=”http://img.hoop8.com/attachments/1602/4592062172999.jpg”

alt=”8″

</li>

</ul>

</div>

</body>

</html>

web前端开发的代码编辑器

前端代码开发规范

前端代码能开发吗

Jquery实例效果—加载条和自动轮播图

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发