js轮播图无缝滚动效果


Posted in Javascript onJune 17, 2017

在做轮播图时如果首尾不能连起来的话,效果会有点丑,下面介绍一种我常用的方法:

先文字说明一下:

如果要展示5张图,分别为1,2,3,4,5  那么在代码的引入中是这样的:1,2,3,4,5,1

按顺序的轮播在此就不多说,重点说的是5>1和1>5的轮播

i  表示当前图片的索引

pre 表示上一张图片的按钮

next 表示下一张图片的按钮

ul 表示图片列表

(1)  5>1>2...   当“next”按钮从5到1时按顺序正常轮播,当前图片为第二个“1”时,下一张图片应该是“2”,那么再“next”时是ul的left的值为0,i==1;

(2) 1>5>4....  当“pre”按钮从当前图片“1”(第一个1)轮播到图片5时,i==4,ul的left值变为img宽的-5倍,也就是让第一个1悄悄的变为最后一个1;

用语言表述有点乱,下面放代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 *{padding: 0;margin: 0;}
 .container{
 width: 273px;height: 163px;overflow: hidden;
 position: relative;margin: 0 auto;
 }
 .list{
 position: absolute;width: 1638px;top: 0;left: 0px;
 }
 .list li{
 float: left;list-style: none;
 }
 .btn{
 position: absolute;display: block;width: 40px;height: 50px;font-size: 40px;
 text-align: center;font-weight: bold;top: 50%;margin-top: -25px;background-color: rgba(255,255,255,0.5);cursor:pointer;
 }
 .btn:hover{
 background-color: rgba(0,0,0,0.3);color: #fff;
 }
 .pre{
 left: 0;
 }
 .next{
 right: 0;
 }
 .nav{
 position: absolute;bottom: 5px;display: flex;justify-content: center;width: 100%;
 }
 .nav span{
 width: 10px;height: 10px;border-radius: 10px;background-color: #fff;z-index: 2;display: inline-block;margin-right: 10px;cursor: pointer;
 }
 span.on{
 background-color: orange;
 }
 </style>
</head>
<body>
 <div class="container">
 <ul class="list" style="left: 0px">
 <li><img src="./images/1.png" alt=""></li>
 <li><img src="./images/2.png" alt=""></li>
 <li><img src="./images/3.png" alt=""></li>
 <li><img src="./images/4.png" alt=""></li>
 <li><img src="./images/5.png" alt=""></li>
 <li><img src="./images/1.png" alt=""></li>
 </ul>
 <div class="nav">
 <span class="on"></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 <em class="next btn">></em>
 <em class="pre btn"><</em>
 </div>
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript">
 $(function(){
 var i=0;
 $('.next').click(function(){
 i++;
 console.log(i);
 
 moveImg(i);
 
 });
 $('.pre').click(function(){
 i--;
 moveImg(i);
 
 });
 $('.nav span').click(function(){
 var _index=$(this).index();
 i=_index;
 moveImg(i);
 
 
 });
 // i的作用:决定下一张图片是谁————也就是说ul的left是多少。
 // $('.list').css({left)的值是从图a过度是此时的ul的left。
 function moveImg(){
 if (i==6) {
 i=1;
 $('.list').css({'left':'0'});
 }
 // 是第一张
 if(i==-1){
 i=4;
 $('ul').css({left:(5*-273)});
 }
 $('.list').stop().animate({'left':-273*i+'px'},1000);
 if (i==5) {
 $('.nav span').eq(0).addClass('on').siblings().removeClass('on');
 
 }
 $('.nav span').eq(i).addClass('on').siblings().removeClass('on');
 
 }
 })
 </script>
</body>
</html>

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

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

Javascript 相关文章推荐
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
JS setTimeout与setInterval的区别
Apr 20 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 #Javascript
vue-router单页面路由
Jun 17 #Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 #Javascript
JavaScript输入框字数实时统计更新
Jun 17 #Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 #Javascript
bootstrap paginator分页前后台用法示例
Jun 17 #Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 #Javascript
You might like
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php数据访问之增删改查操作
2016/05/09 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
微信小程序实现上传图片功能
2018/05/28 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python绘图库Matplotlib的安装
2014/07/03 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python调用命令行进度条的方法
2015/05/05 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
银行委托书范本
2014/04/04 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
小学语文教学反思范文
2016/03/03 职场文书