用Jquery 方法写轮播图

最新推荐文章于 2024-08-27 19:30:26 发布
最新推荐文章于 2024-08-27 19:30:26 发布
阅读量6k 收藏 9
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yllmyl/article/details/80598694
版权

jq传统轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 5px solid gray;
margin: 100px auto;
position: relative;
overflow: hidden;
}


.m_unit{
width: 10000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
float: left;
width: 560px;
height: 300px;
}


/*左右按钮*/
.btn span{
width: 55px;
height: 55px;
background: url('images/dog/btnL.png');
position: absolute;
border-radius:  10px;
top: 50%;
margin-top: -28px;
}


.btn span.right{
background: url('images/dog/btnR.png');
right: 0;
}


/*小圆点*/
.circle ul li{
list-style: none;
float: left;
width: 20px;
height: 20px;
background: orange;
margin-right: 10px;
border-radius: 50%;
}


.circle ul{
overflow: hidden;
}


.circle{
position: absolute;
bottom: 10px;
right: 10px;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="m_unit" id='m_unit'>
<ul>
<li><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>


<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


<script src='js/jquery-1.12.3.min.js'></script>


<script>


// 获取图片的长度
var imgLength = $('#m_unit ul li').length;


// 拼接假0
$('#m_unit ul').append($('#m_unit ul li').eq(0).clone());


// 信号量
var idx = 0;


// 自动轮播
var timer = setInterval(rightBtnHandler,2000);


// 鼠标进入box
$('#box').mouseenter(function() {
clearInterval(timer);
});


// 鼠标离开box
$('#box').mouseleave(function() {
timer = setInterval(rightBtnHandler,2000);
});


// 右按钮点击事件
$('#rightBtn').click(rightBtnHandler);
function rightBtnHandler(){
idx++;
$('#m_unit').animate({'left': -560 * idx}, 1000, function(){
if(idx > imgLength-1){
idx = 0;
// $('#m_unit').css('left','0px');
$(this).css('left', '0px');
}
});


circleChange();
}




// 左按钮点击事件
$('#leftBtn').click(function(){
idx--;


if(idx < 0){
idx = imgLength - 1;
$('#m_unit').css('left', -560 * imgLength);
}


$('#m_unit').animate({'left': -560 * idx}, 1000);


circleChange();
});

// 小圆点点击事件
$('#circle ul li').each(function(i){
// console.log(i);
$(this).click(function(){
idx = i;
$('#m_unit').animate({'left': -560 * idx}, 1000);
circleChange();
});
});


// 小圆点更改
function circleChange(){
var idxx = idx;
if(idxx > imgLength-1) idxx = 0;
// 排他
$('#circle ul li').eq(idxx).css('background','red').siblings().css('background','orange');
}
</script>
</body>
</html>

jq呼吸轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 5px solid gray;
margin: 100px auto;
position: relative;
overflow: hidden;
}


.m_unit{
width: 10000px;
height: 300px;

}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
float: left;
width: 560px;
height: 300px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);


}
.m_unit ul li.active{
opacity: 1;
filter: alpha(opacity=100);
}


/*左右按钮*/
.btn span{
width: 55px;
height: 55px;
background: url('images/dog/btnL.png');
position: absolute;
border-radius:  10px;
top: 50%;
margin-top: -28px;
}


.btn span.right{
background: url('images/dog/btnR.png');
right: 0;
}


/*小圆点*/
.circle ul li{
list-style: none;
float: left;
width: 20px;
height: 20px;
background: orange;
margin-right: 10px;
border-radius: 50%;
}


.circle ul{
overflow: hidden;
}


.circle{
position: absolute;
bottom: 10px;
right: 10px;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="m_unit" id='m_unit'>
<ul>
<li class="active"><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>


<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


<script src='js/jquery-1.12.3.min.js'></script>
<script>
var m_unit = $('#m_unit ul li');
// $('#m_unit ul').eq(0).append($('#m_unit ul li ').clone());


var idx =0;
var timer = setInterval(rightBtnHandler,2000);


$('#box').mouseenter =function(){
clearInterval(timer);
}
$('#box').mouseleave = function(){
timer = setInterval(rightBtnHandler,2000);
}
$('#rightBtn').click(rightBtnHandler);
function rightBtnHandler(){
$('#m_unit ul li').eq(idx).animate({'opacity':0},1000);
idx++;
if(idx > m_unit.length-1 ) idx =0;
$('#m_unit ul li').eq(idx).animate({'opacity':1},1000);
circleChange();
}
$('#leftBtn').click(function(){
$('#m_unit ul li').eq(idx).animate({'opacity':0},1000);
idx --;
if(idx < 0){
idx = m_unit.length-1;
}
$('m_unit ul li').eq(idx).animate({"opacity":1},1000);
circleChange();
});
$("#circle ul li").each(function(i){
$(this).click(function(){
$("#m_unit ul li").eq(idx).animate({'opacity':0},1000);
idx = i;
$("#m_unit ul li").eq(idx).animate({'opacity':1},1000);
circleChange();
})
})

function circleChange(){
$("#circle ul li").eq(idx).css('background','red').siblings().css('background','orange');


}

</script>
</body>

</html>

jq三位置轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 5px solid gray;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
}


.m_unit{
width: 10000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
position: absolute;
top: 0px;
left: 560px;
width: 560px;
height: 300px;

}
.m_unit ul li.current{
left: 0px;
}


/*左右按钮*/
.btn span{
width: 55px;
height: 55px;
background: url('images/dog/btnL.png');
position: absolute;
border-radius:  10px;
top: 50%;
margin-top: -28px;
}


.btn span.right{
background: url('images/dog/btnR.png');
right: 0;
}


/*小圆点*/
.circle ul li{
list-style: none;
float: left;
width: 20px;
height: 20px;
background: orange;
margin-right: 10px;
border-radius: 50%;
}


.circle ul{
overflow: hidden;
}


.circle{
position: absolute;
bottom: 10px;
right: 10px;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="m_unit" id='m_unit'>
<ul>
<li class='current'><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>


<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


<script src ='js/jquery-1.12.3.min.js'></script>
<script>
//获取所有图片
    var imgLength=$(".m_unit ul li").length;
    // //节流 
    // var timer=setInterval(rightHandler,2000);
    // //鼠标进入事件
    // $(".box").mouseenter(function(){
    //     clearInterval(timer);
    // });
    // //鼠标移除事件
    // $(".box").mouseleave(function(){
    //     timer=setInterval(rightHandler,2000);
    // });
    // //信号量
    var idx=0;
    // 右按钮点击事件click
    $(".right").click(rightHandler);
    function rightHandler(){
    $('.m_unit ul li').eq(idx).animate({'left': -560}, 1000);
    idx ++;
    if(idx == imgLength)idx=0;
    // console.log(idx);
    $('.m_unit ul li').eq(idx).css('left','560px');
    $('.m_unit ul li').eq(idx).animate({'left': 0}, 1000);  
    circleChange();
    }
    $('.left').click(function(){
    $('.m_unit ul li ').eq(idx).animate({'left':560},1000);
    idx --;
    if(idx<0)idx = imgLength-1;
    $('.m_unit ul li').eq(idx).css('left','-560px');
    $('.m_unit ul li').eq(idx).animate({'left': 0}, 1000);
    circleChange();
   
    })
    $("#circle ul li").each(function(i){
$(this).click(function(){
if(idx>$(this).index()){
//this.index是当前点击点所对应的图 idx是当前显示的图 
//先把this移动-560
//然后this 从-560移动到0 
//当前显示的图从0 到560
$(".m_unit ul li").eq($(this).index()).css({'left':-560});
$(".m_unit ul li").eq($(this).index()).animate({'left':'0px'},1000);
$(".m_unit ul li").eq(idx).animate({'left':'560px'},1000);
}else{
$(".m_unit ul li").eq($(this).index()).css({'left':560});
$(".m_unit ul li").eq($(this).index()).animate({'left':"0px"},1000);
$(".m_unit ul li").eq(idx).animate({'left':'-560px'},1000); }
idx = i;
circleChange();
});
});


  function circleChange(){
$("#circle ul li").eq(idx).css('background','red').siblings().css('background','orange');


}

</script>
</body>

</html>

jq传送带轮播图



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
} 


.box{
width: 560px;
height: 300px;
border: 5px solid red;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
}


.imglist ul li{
display: none;
}


.m_unit{
width: 1120px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}


.m_unit li{
width: 560px;
height: 300px;
list-style: none;
float: left;
}


.btn span{
width: 55px;
height: 55px;
position: absolute;
top: 50%;
margin-top: -27px;
}


.btn .left{
background: url('images/dog/btnL.png');
left: 10px;
}


.btn .right{
background: url('images/dog/btnR.png');
right: 10px;
}


.circle{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -70px;
}


.circle ul li{
list-style: none;
width: 20px;
height: 20px;
margin-right: 10px;
background: orange;
border-radius: 50%;
float: left;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box">

<div class="imglist" id='imglist'>
<ul>
<li><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>

<!-- 传送带 -->
<div class="m_unit" id='m_unit'>

</div>


<div class="btn">
<span class="left" id='leftBtn'></span>
<span class="right" id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>


</div>


<script src='js/jquery-1.12.3.min.js'></script>
<script>
var imgs = $('#imglist ul li');
var m_unit =$('#m_unit');
m_unit.append(imgs.eq(0).clone());
m_unit.append(imgs.eq(1).clone());


// $('#m_unit ul').eq(0).append($('#m_unit ul li ').clone());


var idx =0;
// var timer = setInterval(rightBtnHandler,2000);


// $('#box').mouseenter =function(){
// clearInterval(timer);
// }
// $('#box').mouseleave = function(){
// timer = setInterval(rightBtnHandler,2000);
// }
$("#rightBtn").click(rightBtnHandler);
function rightBtnHandler(){
$('#m_unit').css({'left':'0px'});
$('#m_unit').empty();
m_unit.append(imgs.eq(idx).clone());
    idx++;
    if(idx>imgs.length-1)idx=0;
    m_unit.append(imgs.eq(idx).clone());




$('#m_unit').animate({'left':-560},1000);
changeCircle();
}
$('#leftBtn').click(function(){


$('#m_unit').css({'left':'-560px'});
$('#m_unit').empty();
m_unit.append(imgs.eq(idx).clone());
    idx--;
    if(idx<0)idx=imgs.length-1;
    m_unit.prepend(imgs.eq(idx).clone());
$('#m_unit').animate({'left':0},1000);
changeCircle();
});


// 更改小圆点

function changeCircle(){
// 排他
var idxx = idx;
if(idxx>imgs.length-1)idxx=0;
$(".circle li").eq(idxx).css('background','red').siblings().css('background','orange');
}
</script>
</body>

</html>

jq间歇模型2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 200px;
background: #ddd;
margin: 100px auto;
position: relative;
overflow: hidden;
}


ul{
position: absolute;
top: 0;
left: 0;
}


li{
list-style: none;
width: 300px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<div id ='box'>
<ul>
<li>沈同学 阿里**网络有限公司</li>
<li>曹同学 *度网络有限公司</li>
<li>朱同学 *讯网络有限公司</li>
<li>杨同学 *60网络有限公司</li>
<li>杨同学 *东网络有限公司</li>
<li>曹同学 *易网络有限公司</li>
</ul>
</div>


<script src='js/jquery-1.12.3.min.js'></script>
<script>
var uls = $('#box ul');
var lis =$("#box ul li");


// 内容翻倍
  uls.append(lis.clone());
  console.log(lis.length);
  var idx = 0;
  setInterval(function(){
  idx++;
  $("#box ul ").animate({'top':-50*idx},1000,function(){
  if(idx==lis.length){
  idx = 0;
  $('#box ul').css({"top":"0"});
  }
  })
  },2000);
</script>
</body>
</html>

柳LL
关注
用jquery写一个轮播图
爱学习的豪豪的博客
09-10 252
用jquery写一个轮播图 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin:0; padding:0; list-style:none;} #div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:re
用jquery写轮播图
YSRMHLJY的博客
10-08 248
1.定义count变量 图片的张数 定义变量index=1图片的下标 获取小圆点 2.自动轮播 setinterval定时器 定时3秒后图片自动切换 nextpage（）切换到下一张 3.鼠标移入是左右切换的按钮显现 且自动轮播停止 鼠标移出是左右切换按钮隐藏 自动轮播继续 4.点击左按钮时图片切换到下一张 点击右按钮时图片切换到上一张 5.获取小圆点集合数组的长度 对小圆点进行循环遍历绑定 删除第一个小圆点的class属性...
使用Jquery实现轮播图
最新发布
Qzhou_的博客
08-27 1351
在本文中我们将使用Jquery库来实现一个简单的轮播图效果。
利用jq写一个轮播图
个人笔记
04-07 310
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; } .root{ width: 520px; height: 280px; border: #FFD
如何用jQuery语言写轮播图
夏天的博客
10-17 343
轮播效果：点击下一个按钮跳转到下一张图片，点击上一个按钮跳转到上一个图片；鼠标移进图片轮播停止，鼠标移出则自动轮播。 1.HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
jQuery实现轮播图
刻苦的樊同学
03-02 2367
轮播图虽然在网上有很多插件可以用，但是自己亲手做一个又有何不可？就使用jquery就OK了。 先展示一下轮播图的终结版截图 轮播图需要实现的功能就不再细讲了，直接看代码吧，仔细看，不要感觉轮播图好难，代码好多就懒得看了，其实很简单。 html代码 <div class="pic"> <img src="img/微信截图_20190705084205.png"/> ...
简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图
06-13
总之，这个项目提供了一个基本的jQuery图片轮播解决方案，结合HTML和CSS，能够实现带按钮的图片切换效果。对于初学者来说，这是一个很好的实践项目，可以学习到如何使用jQuery操作DOM，处理事件，以及实现动态效果。...
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
jQuery手风琴图片轮播切换
04-07
jQuery提供了多种实现轮播的方法，如使用`.fadeIn()`和`.fadeOut()`实现淡入淡出效果，或者使用`.slideToggle()`实现滑动切换。例如： ```javascript var index = 0; var slides = $("#carousel .slide"); ...
jQuery图片轮播切换
07-24
它利用JavaScript库jQuery的强大功能，为用户提供平滑、响应式的图片切换体验。在本篇文章中，我们将深入探讨jQuery图片轮播切换的工作原理、实现方法以及相关技术点。 首先，jQuery是一个轻量级的JavaScript库，它...
jQuery图片视差轮播切换代码
06-24
Swiper.js是专为触摸设备设计的滑动组件，支持CSS3动画，提供了丰富的选项和API，可以用于创建各种滑动效果，如幻灯片、轮播图、网格布局等。它不仅适用于桌面浏览器，还对移动设备有着良好的兼容性。 ### 三、图片...
用html css jquery写的轮播图
04-30
用html css jquery写的轮播图使用简单，可以添加各种尺寸的图片，效果很好，同时适配效果也不错
JQ轮播图
zhangrenliang的博客
02-16 1265
lunbotu.html         jquery轮播效果图     body{ margin:0 auto; text-align:center;} #main{ width:370px; height:240px; overflow:hidden; margin:0 auto; position:relative;} #images{ width:100%; he
使用jQuery，写一个简单的轮播图，实现切换功能！
qq_44890362的博客
09-20 1200
1.谈到jquery，想必大家都知道，它是一个js库。使用起来简单又方便，接下来就给大家看看我用jquery实现的轮播图吧！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
jq轮播图
qq_35401191的博客
07-24 1287
第一步：实现无操作的自动轮播 （四张图） function slider() { timer = setTimeout(function () { $('.img-box').animate({ 'left': -(nowIndex * picwidth) + 'px' },function(){ nowIndex++ if (n...
jquery手写轮播图_用jquery实现图片轮播怎么写呢求指教
weixin_39613712的博客
12-19 69
展开全部*{margin:0;padding:0;}ul{list-style:none;}.slideShow{width:620px;height:700px;/*其实就是图片的高度*/border:1px#eeeeeesolid;margin:100pxauto;position:relative;overflow:hidden;/*此处需要62616...
jq写一个轮播图
wan845199324的博客
06-29 368
css代码：<style> *{ padding:0; margin:0; } #box{ width:300px; height:200px; margin:50px auto; overflow: hidden; position:relative; }
使用jQuery创建图片轮播效果
3. 动画过渡：使用jQuery的`.animate()`方法平滑地移动图片，增加视觉效果。 4. 激活状态：更新当前显示图片的序号标记，确保与实际显示的图片一致。 在实际应用中，还需要考虑一些其他因素，例如图片加载状态的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值