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 相关文章推荐
js select option对象小结
Dec 20 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
shiro授权的实现原理
Sep 21 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
前端如何实现动画过渡效果
Feb 05 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连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python装饰器decorator介绍
2014/11/21 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
同学聚会欢迎辞
2014/01/14 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
机器人总动员观后感
2015/06/09 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server