最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码

代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相接的功能,本人在此基础上增加了首尾相接功能。

效果如下:(在线演示地址

 <!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实现图片轮播(前后首尾相接)的更多相关文章

  1. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  2. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  3. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

  4. js加强版图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  6. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  7. 使用JS实现图片轮播滚动跑马灯效果

    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...

  8. js实现图片轮播

    效果图

  9. 原生JS实现图片轮播

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Codeforces 1107G Vasya and Maximum Profit 线段树最大子段和 + 单调栈

    Codeforces 1107G 线段树最大子段和 + 单调栈 G. Vasya and Maximum Profit Description: Vasya got really tired of t ...

  2. java之Scanner

    参考http://how2j.cn/k/operator/operator-scanner/658.html#nowhere 需要用到从控制台输入数据,所以需要用到Scanner类 使用Scanner ...

  3. 子元素应该margin-top影响父元素的解决办法

    在子元素设置margin-top,有时会带着父元素一起移动. 原因: Outer Div [margin: 0 auto] Inner Div [margin-top: 10px] 根据CSS2.1盒 ...

  4. 除了BAT,计算机、软件专业的毕业生还有别的好去处吗?

    "学技术的同学应该关注36氪.pingwest,极客公园这些圈子里很有影响力的科技媒体" 转载--除了BAT,计算机.软件专业的毕业生还有别的好去处吗? 又到校招季,985理工科的 ...

  5. Android 设计模式情景分析——观察者模式

    观察者模式是一种使用频率非常高的模式,有时也被称作发布/订阅模式,属于行为型模式,它最常用的是 GUI 系统.订阅——发布系统,它一个重要作用就是解耦,使得它们之间的依赖性更小.观察者模式定义了对象间 ...

  6. RabbitMQ简介和使用

    一.RabbitMQ简介 1.什么是RabbitMQ AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设 ...

  7. Tomcat服务器介绍及配置

    一.Tomcat简介 Tomcat(Apache)是当前应用最广的JavaWeb服务器 1.Tomcat版本: 安装版:需要安装,一般不考虑使用.一个电脑只能安装一个,卸载也比较麻烦! 解压版: 直接 ...

  8. return this链式操作

    function Fn(){}; Fn.prototype = { constructor:Fn, a:function(){ alert(1); return this; //实现链式操作.即fn. ...

  9. 3、kvm配置vnc

    配置kvm通过vnc访问 virsh edit privi-server 添加如下配置: <graphics type='vnc' port='5901' autoport='no' liste ...

  10. shiro 重定向 后 带有 sessionId 的 解决 办法

    http://blog.csdn.net/aofavx/article/details/51701012