淘宝无缝轮播图效果

传智播客前端与移动开发百度云

web前端开发移动端适应

移动平台开发前端面试

html 代码

<!DOCTYPE html>

<html>

<head>

<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>

<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>

</div>

$(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

淘宝无缝轮播图效果

前端开发者

相关推荐

评论抢沙发

友情链接

回顶部

前端开发者

相关推荐

评论 抢沙发

友情链接

回顶部

评论抢沙发