使用JS实现图片轮播（前后首尾相接）

最新推荐文章于 2024-03-27 23:42:14 发布

dengche6017

最新推荐文章于 2024-03-27 23:42:14 发布

阅读量1k

点赞数

文章标签： xhtml javascript 面试 ViewUI

原文链接：http://www.cnblogs.com/iMichael-Zhang/p/7564995.html

版权

本文介绍如何在JavaScript中实现图片轮播，并确保轮播效果首尾相接。作者通过自己的学习和实践，增加了这一功能，并提供了在线演示地址。

摘要由CSDN通过智能技术生成

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

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

效果如下：（在线演示地址）

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>图片轮播</title>
  6     <style type="text/css">
  7     body,div,ul,li,a,img{
    margin: 0;padding: 0;}
  8     ul,li{
    list-style: none;}
  9     a{
    text-decoration: none;}
 10     #wrapper{
    
 11         position: relative;
 12         margin: 30px auto; /* 上下边距30px，水平居中 */
 13         width: 400px;
 14         height: 200px;
 15     }
 16     #banner{
    
 17         position:relative;
 18         width: 400px;
 19         height: 200px;
 20         overflow: hidden;
 21     }
 22     .imgList{
    
 23         position:relative;
 24         width:2000px;
 25         height:200px;
 26         z-index: 10;
 27         overflow: hidden;
 28     }
 29     .imgList li{
    float:left;display: inline;}
 30     #prev,
 31     #next{
    
 32         position: absolute;
 33

最低0.47元/天解锁文章

dengche6017

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JS实现图片轮播（前后首尾相接）

最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码代码参考了一位已经写好了图片轮播功能的（在此表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。效果如下：（在线演示地址） 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1....
复制链接

扫一扫