小编给大家分享一下jq实现无缝轮播图效果的方法是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
我们在很多的网站上都可以看到轮播图,例如在淘宝、京东这些网站都有轮播图的存在;轮播图的使用范围非常广,banner和animation很容易抓住用户的眼球,所以做好这个也就是一个网页一个app的关键之一。
轮播图有多种实现方式,可以用css实现、用jQuery实现、甚至是用其他框架实现,下面我们就以jQuery方法举例,用jQuery代码做一个自动+手动轮播图片的轮播图效果。
jq实现无缝轮播图效果(自动轮播)的代码示例:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现无缝轮播图</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="banner">
<ul class="img">
<li>
<a href="#"><img src="img/1.jpg"></a>
</li>
<li>
<a href="#"><img src="img/2.png"></a>
</li>
<li>
<a href="#"><img src="img/1.jpg"></a>
</li>
<li>
<a href="#"><img src="img/2.png"></a>
</li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</body>
</html>
上面是html代码,代码的结构比较简单,这里解释一下,ul.img标签是要左右移动的,ul.img标签里就是轮播图的主体内容了;然后ul.num标签是提供索引和下标控制符,绑定动画的,会通过jq代码来控制数量与图片一致。btn_l和tn_r类名的div标签是提供左右按钮,这样轮播图就可以点击实现手动的左右滑动。
css代码:
* {
padding: 0;
margin: 0;
list-style: none;
}
.banner {
margin: 100px auto;
border: 5px solid #000;
width: 1000px;
height: 640px;
position: relative;
overflow: hidden;
}
.banner .img {
width: 5000px;
position: absolute;
left: 0px;
top: 0px;
}
.banner .img li {
float: left;
}
.banner .img li img {
width: 1000px;
}
/*小圆点的样式*/
.banner .num {
position: absolute;
right: 40px;
bottom: 30px;
}
.banner .num li {
width: 20px;
height: 20px;
float: left;
background: #333;
margin-left: 20px;
border-radius: 50px;
border: 2px solid white;
}
.banner .num li.on {
border: 2px solid #333;
background: white
}
/*两边耳朵的样式*/
.banner .btn {
position: absolute;
width: 80px;
height: 80px;
background: rgba(0, 0, 0, 0.7);
font-size: 60px;
color: white;
text-align: center;
line-height: 80px;
top: 50%;
margin-top: -80px;
cursor: pointer;
display: none;
}
.banner:hover .btn {
display: block;
}
.banner .btn_l {
left: 10px;
border-radius: 50%
}
.banner .btn_r {
right: 10px;
border-radius: 50%
}
我们链接的外部css文件,然后请注意一下各种属性和值。
jquery代码:
首先要引用jquery.js文件
<script type="text/javascript" src="s/jquery-1.7.2.min.js"></script>
注:想要使用jquery来实现各种效果,就必须要先引用jquery.js文件,在使用jquery代码来实现各种效果。
在使用jquery语句来实现轮播效果:
<script>
$(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").hover(function() {
var index = $(this).index();
i = index;
$(".banner .img").stop().animate({
left: -index * 1000
}, 500);
$(this).addClass('on').siblings().removeClass('on');
})
/*轮播图自动轮播*/
var t = setInterval(function() {
i++;
move();
}, 2000);
//对banner定时器的操作
$(".banner").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(move, 2000);
})
/*向左按钮*/
$(".banner .btn_l").click(function() {
i--;
move();
})
/*向右按钮*/
$(".banner .btn_r").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) * 1000
});
i = size - 2;
}
$(".banner .img").stop().animate({
left: -i * 1000
}, 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>
我们来看看效果(静态):
看完了这篇文章,相信你对jq实现无缝轮播图效果的方法是什么有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。