jquery实现左右无缝轮播图


Posted in Javascript onJuly 31, 2020

本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下

<title>无缝轮播图</title>
 <style>
 *{margin: 0;padding:0; }
 ul{list-style: none;}
 .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;}
 .img{position: absolute;top: 0;left: 0}
 .img li{float: left;}
 .num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
 .num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
 .btn{display: none;}
 .btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
 .btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
 .btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
 .num .active{background-color: #fff;}
 </style>
 <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="banner">
 <ul class="img">
 <li><a href="#"><img src="img/1.jpg" alt="第1张图片"></a></li>
 <li><a href="#"><img src="img/2.jpg" alt="第2张图片"></a></li>
 <li><a href="#"><img src="img/3.jpg" alt="第3张图片"></a></li>
 <li><a href="#"><img src="img/4.jpg" alt="第4张图片"></a></li>
 <li><a href="#"><img src="img/5.jpg" alt="第5张图片"></a></li>
 </ul>
 <ul class="num"></ul> //
 <div class="btn">
 <span class="prev"><</span>
 <span class="next">></span>
 </div>
 
</div>
 
<script>
 
 $(function(){
 
 var i=0;
 var timer=null;
 for (var j = 0; j < $('.img li').length; j++) { //创建圆点
 $('.num').append('<li></li>')
 }
 $('.num li').first().addClass('active'); //给第一个圆点添加样式
 
 var firstimg=$('.img li').first().clone(); //复制第一张图片
 $('.img').append(firstimg).width($('.img li').length*($('.img img').width())); //将第一张图片放到最后一张图片后,设置ul的宽度为图片张数*图片宽度
 
 
 // 下一个按钮
 $('.next').click(function(){
 i++;
 if (i==$('.img li').length) {
 i=1; //这里不是i=0
 $('.img').css({left:0}); //保证无缝轮播,设置left值
 };
 
 $('.img').stop().animate({left:-i*600},300);
 if (i==$('.img li').length-1) { //设置小圆点指示
 $('.num li').eq(0).addClass('active').siblings().removeClass('active');
 }else{
 $('.num li').eq(i).addClass('active').siblings().removeClass('active');
 }
 
 })
 
 // 上一个按钮
 $('.prev').click(function(){
 i--;
 if (i==-1) {
 i=$('.img li').length-2;
 $('.img').css({left:-($('.img li').length-1)*600});
 }
 $('.img').stop().animate({left:-i*600},300);
 $('.num li').eq(i).addClass('active').siblings().removeClass('active');
 })
 
 //设置按钮的显示和隐藏
 $('.banner').hover(function(){
 $('.btn').show();
 },function(){
 $('.btn').hide();
 })
 
 //鼠标划入圆点
 $('.num li').mouseover(function(){
 var _index=$(this).index();
 $('.img').stop().animate({left:-_index*600},150);
 $('.num li').eq(_index).addClass('active').siblings().removeClass('active');
 })
 
 //定时器自动播放
 timer=setInterval(function(){
 i++;
 if (i==$('.img li').length) {
 i=1;
 $('.img').css({left:0});
 };
 
 $('.img').stop().animate({left:-i*600},300);
 if (i==$('.img li').length-1) { 
 $('.num li').eq(0).addClass('active').siblings().removeClass('active');
 }else{
 $('.num li').eq(i).addClass('active').siblings().removeClass('active');
 }
 },1000)
 
 //鼠标移入,暂停自动播放,移出,开始自动播放
 $('.banner').hover(function(){ 
 clearInterval(timer);
 },function(){
 timer=setInterval(function(){
 i++;
 if (i==$('.img li').length) {
 i=1;
 $('.img').css({left:0});
 };
 
 $('.img').stop().animate({left:-i*600},300);
 if (i==$('.img li').length-1) { 
 $('.num li').eq(0).addClass('active').siblings().removeClass('active');
 }else{
 $('.num li').eq(i).addClass('active').siblings().removeClass('active');
 }
 },1000)
 })
 
 })
</script>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获得下拉框值的代码
Aug 13 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
微信小程序实现签字功能
Dec 23 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
node.js从数据库获取数据
May 08 #Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 #Javascript
基于jquery实现最简单的选项卡切换效果
May 08 #Javascript
基于javascript实现图片滑动效果
May 07 #Javascript
基于jquery实现图片放大功能
May 07 #Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 #Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 #Javascript
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php时间不正确的解决方法
2008/04/09 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
jquery.pagination.js分页使用教程
2018/10/23 jQuery
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
django解决跨域请求的问题
2018/11/11 Python
怎么写有吸引力的自荐信
2013/11/17 职场文书
生日寄语大全
2014/04/08 职场文书
商业项目策划方案
2014/06/05 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
借钱欠条怎么写
2015/07/03 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书