前端开发JS左右轮播图和淡入淡出轮播图
摘要：界面设计与前端开发|前端开发语言占比|前端开发笔试经验 html 代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition……
界面设计与前端开发|前端开发语言占比|前端开发笔试经验
html 代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无缝轮播</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.banner {
margin: 100px auto;
width: 730px;
height: 454px;
overflow: hidden;
position: relative;
}
.banner .img {
width: 5000px;
position: absolute;
left: 0px;
top: 0;
}
.banner .img li {
float: left;
}
.banner .num {
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
text-align: center;
font-size: 0px;
}
.banner .num li {
width: 10px;
height: 10px;
background: #888;
border-radius: 50%;
display: inline-block;
margin: 0 3px;
cursor: pointer;
}
.banner .num li.on {
background: #F60;
}
.banner .btn {
width: 30px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 40px;
font-family: “宋体”;
display: none;
}
.banner:hover .btn {
display: block;
}
.banner .btn_l {
left: 0;
}
.banner .btn_r {
right: 0;
}
</style>
<script type=”text/javascript”>
$(function () {
var i = 0;
var clone = $(“.banner .img li”).first().clone();
$(“.banner .img”).append(clone);
var size = $(“.banner .img li”).size();
for (var j = 0; j < size – 1; j++) {
$(“.banner .num”).append(“<li></li>”);
}
$(“.banner .num li”).first().addClass(“on”);
/*鼠标划入圆点*/
$(“.banner .num li”).click(function () {
var index = $(this).index();
i = index;
$(“.banner .img”).stop().animate({ left: -index * 730 }, 500)
$(this).addClass(“on”).siblings().removeClass(“on”)
})
/*自动轮播*/
var t = setInterval(function () {
i++;
move()
}, 3000)
/*对banner定时器的操作*/
$(“.banner”).hover(function () {
clearInterval(t);
}, function () {
t = setInterval(function () {
i++;
move()
}, 3000)
})
/*向右的按钮*/
$(“.banner .btn_r”).click(function () {
i++
move();
})
/*向左的按钮*/
$(“.banner .btn_l”).click(function () {
i–
move()
})
function move() {
if (i == size) {
$(“.banner .img”).css({ left: 0 })
i = 1;
}
if (i == -1) {
$(“.banner .img”).css({ left: -(size – 1) * 730 })
i = size – 2;
}
$(“.banner .img”).stop().animate({ left: -i * 730 }, 500)
if (i == size – 1) {
$(“.banner .num li”).eq(0).addClass(“on”).siblings().removeClass(“on”)
} else {
$(“.banner .num li”).eq(i).addClass(“on”).siblings().removeClass(“on”)
}
}
})
</script>
</head>
<body>
<div class=”banner”>
<ul class=”img”>
<li>
<a href=”#”>
<img src=”http://cdn.attach.qdfuns.com/notes/pics/201611/20/204501j1kgrmc8o0xz15rr.jpg”>
</a>
</li>
<li>
<a href=”#”>
<img src=”http://cdn.attach.qdfuns.com/notes/pics/201611/20/204502e1q953x8q3fkd2w5.jpg”>
</a>
</li>
<li>
<a href=”#”>
<img src=”http://cdn.attach.qdfuns.com/notes/pics/201611/20/204501uil4248llsx3ighy.jpg”>
</a>
</li>
<li>
<a href=”#”>
<img src=”http://cdn.attach.qdfuns.com/notes/pics/201611/20/204621yit6j4ta46tk55nn.jpg”>
</a>
</li>
</ul>
<ul class=”num”>
</ul>
<div class=”btn btn_l”><</div>
<div class=”btn btn_r”>></div>
</div>
</body>
</html>
前端开发需要电脑配置|web前端开发需要考研吗|学前端开发需要掌握
» 本文来自：前端开发者 » 《前端开发JS左右轮播图和淡入淡出轮播图》
» 本文链接地址：https://www.rokub.com/5150.html
» 您也可以订阅本站：https://www.rokub.com
近期评论