CSS快速制作图片轮播的焦点

桃扇骨 2022-08-12 20:58 133阅读 0赞

来源：[http://www.ido321.com/858.html][http_www.ido321.com_858.html]

效果图：

![SouthEast][]

演示地址：[http://jsfiddle.net/Web\_Code/q5qfd8aL/embedded/result/][http_jsfiddle.net_Web_Code_q5qfd8aL_embedded_result]

代码：

1: <!DOCTYPE html>

2: <html lang="en">

3: <head>

4:     <meta http-equiv="content-type" content="text/html;charset=utf-8">

5:     <title>图片轮播的焦点</title>

6:     <style type="text/css">

7:         .div

8:         {

9:             width: 240px;

10:             position: absolute;

11:         }

12:         ul

13:         {

14:             list-style: none;

15:             margin-left: -50px;

16:         }

17:         ul li

18:         {

19:             width: 50px;

20:             height: 50px;

21:             margin-left: 10px;

22:             float: left;

23:             border: 1px solid #ccc;

24:             background-color: #ccc;

25:             border-radius:25px;

26:             text-align: center;

27:         }

28:         li:hover

29:         {

30:             background-color: red;

31:         }

32:         span

33:         {

34:             font-size: 30px;

35:             line-height: 50px;

36:         }

37:     </style>

38: </head>

39: <body>

40:     <div class="div">

41:         <ul>

42:             <li><span>1</span></li>

43:             <li><span>2</span></li>

44:             <li><span>3</span></li>

45:             <li><span>4</span></li>

46:         </ul>

47:     </div>

48: </body>

[http_www.ido321.com_858.html]: http://www.ido321.com/858.html
[SouthEast]: /images/20220810/bafeeea28f76422da22f48235f4e0b3e.png
[http_jsfiddle.net_Web_Code_q5qfd8aL_embedded_result]: http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现图片轮播

利用html+css+css3实现简单的图片轮播 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

妖狐艹你老母/ 2022年12月17日 11:57/ 0 赞/ 240 阅读

相关 html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法

我们在网页上经常会看到有一块位置会有很多的图片来回切换，这就是轮播图，轮播图的出现，让重要的信息可以在一个位置显现，那么，轮播图是如何实现的呢？轮播图的实现用js或者css都可

妖狐艹你老母/ 2022年10月12日 05:41/ 0 赞/ 333 阅读

相关 jq实现图片轮播:圆形焦点+左右控制+自动轮播

来源：[http://www.ido321.com/862.html][http_www.ido321.com_862.html] html代码： 1: <!

我就是我/ 2022年08月12日 21:00/ 0 赞/ 248 阅读

相关 CSS快速制作图片轮播的焦点

来源：[http://www.ido321.com/858.html][http_www.ido321.com_858.html] 效果图： ![South

桃扇骨/ 2022年08月12日 20:58/ 0 赞/ 134 阅读

相关 JS制作简单图片轮播--通过调整margin制作

图片轮播在网页中使用的非常广泛，制作的方法有很多，介绍一下我用调整margin来实现3张图片轮播功能。设计思路： 1. 自动跳转。三张图片每隔3秒跳转一张，第三张图片跳

分手后的思念是犯贱/ 2022年07月10日 06:27/ 0 赞/ 251 阅读

相关纯js制作图片轮播效果

好久没有发博客了，最近都在复习，为了找工作做准备。前段时间逛了下鼠绘漫画网追海贼王最新漫画，发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同，看起来更加有趣，于是我

骑猪看日落/ 2022年06月13日 09:53/ 0 赞/ 268 阅读

相关 CSS实现图片轮播

CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染; 但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(

布满荆棘的人生/ 2022年05月31日 13:21/ 0 赞/ 260 阅读

相关 Unity 制作图片轮播功能

功能：自动播放移动首尾相接鼠标移到图片上时移动停止并该图片变大鼠标离开图片恢复原形轮播效果继续效果如下 ![70][] 界面布局大体是这个样子 s

以你之姓@/ 2022年05月08日 05:52/ 0 赞/ 954 阅读

相关轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播

空话就不多说了，开始。。。简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下 ![轮播和

川长思鸟来/ 2022年03月31日 02:12/ 0 赞/ 434 阅读

相关 css3图片轮播效果

HTML5前端广告的轮播效果第一步轮播效果图分两部分 1. css样式的设计 2. js实现图片的轮播 css样式： <style type

ゝ一世哀愁。/ 2022年02月15日 14:53/ 0 赞/ 331 阅读