使用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 ...
随机推荐
- 使用log4j出现缺失com.sun.jdmk:jmxtools:jar:1.2.1
用maven引用log4j出现缺失com.sun.jdmk:jmxtools:jar:1.2.1的错误提示 解决方案一:使用1 .2 .15之前版本的log4j 解决方二: <dependenc ...
- Spring IOP 没用
Spring提供了很多轻量级应用开发实践的工具集合,这些工具集以接口.抽象类.或工具类的形式存在于Spring中.通过使用这些工具集,可以实现应用程序与各种开源技术及框架间的友好整合.比如有关jdbc ...
- ubuntu下hive-0.8.1配置
1.下载hive包wget http://labs.mop.com/apache-mirror/hive/stable/hive-0.8.1.tar.gz,并用tar -xzvf 将其解压到要安装的目 ...
- Luogu 2839 [国家集训队]middle
感觉这题挺好的. 首先对于中位数最大有一个很经典的处理方法就是二分,每次二分一个数组中的下标$mid$,然后我们把$mid$代回到原来的数组中检查,如果一个数$a_{i} \geq mid$,那么就把 ...
- SCSS 中的 &::before 和 &::after
在看一个文件的时候,发现有&::before 和 &::after, 没有理解怎么用的,因为以前在项目的css文件中,从来没有使用过,也没有见过 网上查询了一下,才发现&::b ...
- C# 关于跨线程访问控件问题
跨线程访问控件问题的原因是:控件都是在主线程中创建的,而系统默认控件的修改权归其创建线程所有.在子线程中如果需要直接修改控件的内容,需要使用委托机制将控件的修改操作交给主线程处理.因此,当没有使用委托 ...
- kolla-ansible安装cinder
LVM后端 环境拓扑 节点 IP 主机名 Controller/Network/Apollo 92.0.0.11 anode Compute/Storage 92.0.0.12 bnode multi ...
- 2017-10-2 清北刷题冲刺班p.m
最大值 (max) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目: 这里有一个长度为n ...
- Jdk升级到11引起的问题：程序包javax.xml.bind.annotation不存在
Jdk12 都发布了, 我也下载一个玩一玩吧.刚准备要下载,发现之前已经下载了一个11, 那就11 吧,也不用太新了. 安装了jdk11,习惯性的设置了一下环境变量: JAVA_HOME=D:\too ...
- linux文件查找find
一.locate locate基于数据库索引来查找文件,数据库在开机时一段时间对更新,不会实时更新,数据库存放在(/var/lib/mlocate/mlocate.db),可以用updatedb来手动 ...