使用JS实现图片轮播（前后首尾相接）
最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码
代码参考了一位已经写好了图片轮播功能的（在此表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。
效果如下：（在线演示地址）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播</title>
<style type="text/css">
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
#wrapper{
position: relative;
margin: 30px auto; /* 上下边距30px，水平居中 */
width: 400px;
height: 200px;
}
#banner{
position:relative;
width: 400px;
height: 200px;
overflow: hidden;
}
.imgList{
position:relative;
width:2000px;
height:200px;
z-index: 10;
overflow: hidden;
}
.imgList li{float:left;display: inline;}
#prev,
#next{
position: absolute;
top:80px;
z-index: 20;
cursor: pointer;
opacity: 0.2;
filter:alpha(opacity=20);
}
#prev{left: 10px;}
#next{right: 10px;}
#prev:hover,
#next:hover{opacity: 0.5;filter:alpha(opacity=50);} </style>
</head>
<body>
<div id="wrapper"><!-- 最外层部分 -->
<div id="banner"><!-- 轮播部分 -->
<ul class="imgList"><!-- 图片部分 -->
<li><a href="#"><img src="./img/1.jpg" width="400px" height="200px" alt="1"></a></li>
<li><a href="#"><img src="./img/2.jpg" width="400px" height="200px" alt="2"></a></li>
<li><a href="#"><img src="./img/3.jpg" width="400px" height="200px" alt="3"></a></li>
<li><a href="#"><img src="./img/4.jpg" width="400px" height="200px" alt="4"></a></li>
<li><a href="#"><img src="./img/5.jpg" width="400px" height="200px" alt="5"></a></li>
</ul>
<img src="./img/prev.png" width="40px" height="40px" id="prev">
<img src="./img/next.png" width="40px" height="40px" id="next">
</div>
</div>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var curIndex = 0, //当前index
imgLen = $(".imgList li").length; //图片总数
$(".imgList").css("width", (imgLen+1)*400+"px");
// 定时器自动变换3秒每次
var autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//调用变换处理函数
changeTo(curIndex);
},3000); //左箭头滑入滑出事件处理
$("#prev").hover(function(){
//滑入清除定时器
clearInterval(autoChange);
}, function(){
//滑出则重置定时器
autoChangeAgain();
}); //左箭头点击处理
$("#prev").click(function(){
//根据curIndex进行上一个图片处理
// curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
if (curIndex == 0) {
var element = document.createElement("li");
element.innerHTML = $(".imgList li")[imgLen - 1].innerHTML;
// $(".imgList li")[imgLen - 1].remove();
$(".imgList").prepend(element);
$(".imgList").css("left", -1*400+"px");
changeTo(curIndex);
curIndex = -1;
} else if (curIndex == -1) {
$(".imgList").css("left", -(imgLen-1)*400+"px");
curIndex = imgLen-2;
$(".imgList li")[0].remove();
changeTo(curIndex);
} else {
--curIndex;
changeTo(curIndex);
} }); //右箭头滑入滑出事件处理
$("#next").hover(function(){
//滑入清除定时器
clearInterval(autoChange);
}, function(){
//滑出则重置定时器
autoChangeAgain();
});
//右箭头点击处理
$("#next").click(function(){
// curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
console.log(imgLen);
if (curIndex == imgLen-1) {
var element = document.createElement("li");
element.innerHTML = $(".imgList li")[0].innerHTML;
// $(".imgList li")[0].remove();
$(".imgList").append(element);
++curIndex;
} else if (curIndex == imgLen) {
curIndex = 0;
$(".imgList").css("left", "0px");
$(".imgList li")[imgLen].remove();
curIndex++;
} else {
++curIndex;
}
changeTo(curIndex);
}); //清除定时器时候的重置定时器--封装
function autoChangeAgain(){
autoChange = setInterval(function(){
if(curIndex < imgLen-1){
curIndex ++;
}else{
curIndex = 0;
}
//调用变换处理函数
changeTo(curIndex);
},3000);
} function changeTo(num){
var goLeft = num * 400;
$(".imgList").animate({left: "-" + goLeft + "px"},500);
}
</script>
</body>
</html>
使用JS实现图片轮播（前后首尾相接）的更多相关文章
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 用JS做图片轮播
脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...
- js加强版图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 使用JS实现图片轮播滚动跑马灯效果
我的第一篇文章.哈哈.有点小鸡冻. 之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...
- js实现图片轮播
效果图
- 原生JS实现图片轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- R: which（查询位置）、%in% （是否存在）、ifelse（判断是否）：
################################################### 问题:ifelse.which.%in% 18.4.27 解决方案: > x < ...
- Dockerfile设置apt-get install tzdata的noninteractive方法
在Ubuntu系统中,执行命令apt-get install -y tzdata以安装tzdata软件包.但是,最近发现,在Ubuntu 18.04 (Bionic Beaver)上无法自动安装该软件 ...
- 飘逸的python - 装饰器的本质
很多人把装饰器搞的很复杂,其实本质很简单. 首先,什么是装饰器呢?在代码中发现戴着@xxx帽子的,就是装饰器. 那要怎么自己定义一个装饰器呢? 其实任何一个接收一个参数的callable都可以用来做装 ...
- Codeforces Round #518 (Div. 2) D（计数DP）
#include<bits/stdc++.h>using namespace std;const long long mod=998244353;int n;int a[100007];l ...
- JAVA包学习笔记
包 什么是包 为了使类易于查找和使用,为了避免命名冲突和限定类的访问权限,可以将一组相关类与接口"包裹"在一起形成包. 有可能同名类的存在而导致命名冲突,而位于不同包中的类及时同名 ...
- 括号序列（区间dp）
括号序列(区间dp) 输入一个长度不超过100的,由"(",")","[",")"组成的序列,请添加尽量少的括号,得到一 ...
- 剑指Offer的学习笔记（C#篇）-- 旋转数组的最小数字
题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...
- ios 支付宝支付集成
支付宝支付: 下载官方demo,把需要的framwork下载下来,在自己的工程中,新建文件夹,然后全部塞进去,到build phases中把需要的全部导入,其中xcode7以上需要多导入两个.a文件, ...
- 任务计划cron
在linux中,任务计划分俩:未来时间只执行一次和周期性执行 at:未来时间只执行一次 -V 显示版本信息 -l: 列出指定队列中等待运行的作业:== atq -d: 删除指定的作业:== atrm ...
- PAT天梯赛L2-008 最长对称字符串
题目链接:点击打开链接 对给定的字符串,本题要求你输出最长对称子串的长度.例如,给定"Is PAT&TAP symmetric?",最长对称子串为"s PAT&a ...