淘宝无缝轮播图效果
摘要： 传智播客前端与移动开发百度云 web前端开发移动端适应 移动平台开发 前端面试 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ />……
| 传智播客前端与移动开发百度云 |
| web前端开发移动端适应 |
| 移动平台开发 前端面试 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.banner {
width: 520px;
height: 280px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.banner .img {
width: 3000px;
position: absolute;
left: 0;
top: 0;
}
.banner .img li {
float: left;
}
.num {
position: absolute;
left: 0;
bottom: 20px;
font-size: 0;
text-align: center;
width: 100%;
}
.num li {
width: 10px;
height: 10px;
border-radius: 10px;
background: #888;
display: inline-block;
margin: 0 3px;
}
.num li.active {
background: #f60;
}
.btn {
width: 30px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
font-family: ‘宋体’;
font-size: 40px;
position: absolute;
top: 50%;
cursor: pointer;
display: none;
}
.banner:hover .btn {
display: block;
}
.btn-left {
left: 0;
}
.btn-right {
right: 0;
}
</style>
</head>
<body>
<div class=”banner”>
<ul class=”img”>
<li>
<a href=””
><img
src=”https://img.alicdn.com/tfs/TB15IyMRpXXXXXdXpXXXXXXXXXX-520-280.jpg”
/></a>
</li>
<li>
<a href=””
><img
src=”https://img.alicdn.com/tfs/TB1LykHRpXXXXadaXXXXXXXXXXX-520-280.jpg”
/></a>
</li>
<li>
<a href=””
><img
src=”https://aecpm.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg”
/></a>
</li>
<li>
<a href=””
><img
src=”https://img.alicdn.com/simba/img/TB10SIcRpXXXXa5apXXSutbFXXX.jpg”
/></a>
</li>
</ul>
<ul class=”num”></ul>
<div class=”btn btn-left”><</div>
<div class=”btn btn-right”>></div>
</div>
<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>’)
}
$(‘.num li’)
.first()
.addClass(‘active’)
$(‘.btn-left’).click(function() {
i++
move()
})
$(‘.btn-right’).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) * 520 })
i = size – 2
}
$(‘.img’)
.stop()
.animate({ left: -i * 520 }, 500)
if (i == size – 1) {
$(‘.num li’)
.eq(0)
.addClass(‘active’)
.siblings()
.removeClass(‘active’)
} else {
$(‘.num li’)
.eq(i)
.addClass(‘active’)
.siblings()
.removeClass(‘active’)
}
}
$(‘.banner .num li’).hover(function() {
var index = $(this).index()
i = index
$(‘.img’)
.stop()
.animate({ left: -i * 520 }, 500)
$(this)
.addClass(‘active’)
.siblings()
.removeClass(‘active’)
})
var timer = setInterval(function() {
i++
move()
}, 2000)
$(‘.banner’).hover(
function() {
clearInterval(timer)
},
function() {
timer = setInterval(function() {
i++
move()
}, 2000)
},
)
})
</script>
</body>
</html>
| 火狐前端开发插件 |
| 前端tree插件开发 |
| sublime text 3 前端开发插件 |
» 本文来自：前端开发者 » 《淘宝无缝轮播图效果》
» 本文链接地址：https://www.rokub.com/8221.html
» 您也可以订阅本站：https://www.rokub.com
近期评论