<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<style>
*{margin: 0;padding: 0}
li{list-style: none}
.bnner{
width: 820px; //图片多大这里就设多大
position: relative;
margin: 0 auto;
}
.nav{
width: 820px; //图片多大这里就设多大
height: 340px;
border: 1px solid;
overflow: hidden;
}
.nav_img{
float: left;
margin-left: 0px;
width: 4950px; //总长度
font-size: 0;
}
.nav_xiao{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.nav_xiao>ul{
display: flex;
}
.nav_xiao>ul>li{
width: 30px;
height: 30px;
border-radius: 50%;
background: #0da0b4;
margin-left: 5px;
}
.nav_xiao>ul .mos{
background: red;
}
.nav_left>div:nth-child(1){
position: absolute;
left: 0;
top: 50%;
font-size: 35px;
border: 1px solid red;
}
.nav_left>div:nth-child(2){
position: absolute;
right: 0;
top: 50%;
font-size: 35px;
border: 1px solid red;
}
.bnner_er ul>li>img{
width: 120px;
height: 120px;
}
.bnner_er>div{
width: 250px;
overflow: hidden;
}
.bnner_er ul{
width: 1008px;
/*display: flex;*/
/*overflow: hidden;*/
}
.bnner_er ul>li{
width: 250px;
height: 120px;
float: left;
border: 1px solid red;
}
</style>
<body>
<div class="bnner">
<div class="nav">
<div class="nav_img">
<img src="imgs/1.jpeg" alt="">
<img src="imgs/2.jpeg" alt="">
<img src="imgs/3.jpeg" alt="">
<img src="imgs/2.jpeg" alt="">
<img src="imgs/3.jpeg" alt="">
<img src="imgs/1.jpeg" alt="">
</div>
</div>
<div class="nav_xiao">
<ul>
<li class="mos"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="nav_left">
<div>左</div>
<div>右</div>
</div>
</div>
<script>
function f(indexs) {
$('.bnner').on('mouseenter',function(){
clearInterval(time)
console.log(111)
}).on('mouseleave',function(){
time = setInterval(move,indexs)
})
//图片
let ssd=$('.nav').width()
console.log(ssd)
let ss=-ssd;
let sum=0;
function move(){
sum++;
if (sum>=6){
$('.nav_img').css({
'margin-left':0
});
sum=1
}
console.log(sum)
$('.nav_xiao li').css('background','#0da0b4')
$('.nav_xiao li').eq(sum).css('background','red')
$('.nav_img').animate({
'margin-left':ss*sum
},500)
if (sum==5){
$('.nav_xiao li').css('background','#0da0b4')
$('.nav_xiao li').eq(0).css('background','red')
}
}
//右
$('.nav_left div:nth-child(2)').on('click',function(){
// function mover(){
sum++
if (sum>=6){
$('.nav_img').css({
'margin-left':0
});
sum=1
}
$('.nav_img').stop().animate({
'margin-left':ss*sum
},500)
$('.nav_xiao li').css('background','#0da0b4')
$('.nav_xiao li').eq(sum).css('background','red')
// }
if (sum==5){
$('.nav_xiao li').css('background','#0da0b4')
$('.nav_xiao li').eq(0).css('background','red')
}
})
//左
$('.nav_left div:nth-child(1)').on('click',function(){
sum--;
if (sum<0){
$('.nav_img').css({
'margin-left':-4100 //最后一张图片的起始距离 注意并不是总长度 总长度-一张的长度
})
sum=4
}
console.log(sum)
$('.nav_img').animate({
'margin-left':ss*sum
})
$('.nav_xiao li').css('background','#0da0b4')
$('.nav_xiao li').eq(sum).css('background','red')
});
//小圆点
$('.nav_xiao li').each(function(index,ele){
$(this).on('click',function(){
$('.nav_xiao li').css('background','#0da0b4')
$(this).css('background','red')
$('.nav_img').animate({
'margin-left':ss*index
})
sum=index
})
})
let time = setInterval(move,indexs)
}
f(2000);
</script>
</body>
</html>
jQuery实现无缝滚动轮播图
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 这篇文章的目的是帮助自己复习,还有写东西的时候的思路。 首先我们看一下制作一个轮播的思路: 先把轮播的HTML和C...