使用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 ...
随机推荐
- display与position之间的关系
以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式 ...
- Spring入门第四课
注入参数详解:null值和级联属性 可以使用专用的<null/>元素标签为Bean的字符串或其他对象类型的属性注入null值. 和Struts,Hiberante等框架一样,Spring支 ...
- Java静态检测工具/Java代码规范和质量检查简单介绍（转）
静态检查: 静态测试包括代码检查.静态结构分析.代码质量度量等.它可以由人工进行,充分发挥人的逻辑思维优势,也可以借助软件工具自动进行.代码检查代码检查包括代码走查.桌面检查.代码审查等,主要检查代码 ...
- 2016 年排名 Top 100 的 Java 类库
我们分析了GitHub中47,251个依赖,从中找出了排名前一百的Java类库,让我们看看谁在前面,谁在后面. 我们在漫长的周末的消遣方式就是浏览GitHub并且搜索流行的Java类库.我们决定把其中 ...
- Sharepoint2013商务智能学习笔记之Secure Store Service服务配置(二)
Secure Store Service 是运行在应用程序服务器上的授权服务,它提供一个存储用户凭据的数据库,Secure Store Service 在商务智能中的地位很重要,Sharepoint商 ...
- 《Linux内核设计与实现》读书笔记（二）- 内核开发的准备
在尝试内核开发之前,需要对内核有个整体的了解. 主要内容: 获取内核源码 内核源码的结构 编译内核的方法 内核开发的特点 1. 获取内核源码 内核是开源的,所有获取源码特别方便,参照以下的网址,可以通 ...
- [Xcode 实际操作]四、常用控件-(14)使用UIWebView控件加载本地HTML
目录:[Swift]Xcode实际操作 本文将演示使用网页视图,加载并渲染网页代码. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit im ...
- P3369 【模板】普通平衡树
纯板子.... 题意: 插入 xx 数 删除 xx 数(若有多个相同的数,因只删除一个) 查询 xx 数的排名(排名定义为比当前数小的数的个数 +1+1 .若有多个相同的数,因输出最小的排名) 查询排 ...
- 分层图最短路 【bzoj1579】[Usaco2009 Feb]Revamping Trails 道路升级
1579: [Usaco2009 Feb]Revamping Trails 道路升级 Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M(1<=M< ...
- PHP下载远程图片的几种方法总结
1. 使用file_get_contents function dlfile($file_url, $save_to) { $content = file_get_contents($file_url ...