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 AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
JavaScript中对象介绍
Dec 31 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
javascript实现密码强度显示
Mar 18 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
vue 项目地址去掉 #的方法
Oct 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
图象函数中的中文显示
2006/10/09 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python os模块介绍
2014/11/30 Python
python实现决策树分类(2)
2018/08/30 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
python3爬虫怎样构建请求header
2018/12/23 Python
Python实现网站表单提交和模板
2019/01/15 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python wordcloud库安装方法总结
2020/12/31 Python
关于python中remove的一些坑小结
2021/01/04 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
销售自我评价
2013/10/22 职场文书
工地资料员岗位职责
2013/12/31 职场文书
房地产营销策划方案
2014/02/08 职场文书
工作收入证明模板
2015/06/12 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书