首页新闻找找看学习计划

记录图片轮换的圆点怎么实现?

0
悬赏园豆:20 [已解决问题] 解决于 2016-04-15 16:10

在第一组一组图片轮换的时候,如图所示,第一个圆点背景色为蓝色;换到下一组图片显示时,第二个圆点背景色改变!

这样的小圆点是怎么样实现的啊?

*茉莉花开*的主页 *茉莉花开* | 初学一级 | 园豆:160
提问于:2016-04-15 15:15
< >
分享
最佳答案
0

当出现不用图片的场合时,可以使用CSS3的样式:

<html>

<head>

    <style type="text/css">

        .button {

            display: inline-block;

            width: 20px;

            height: 20px;

            background: #fff;

            cursor: pointer;

        }

 

        .button:hover {

            background: #00aaee;

        }

 

        /*指定按钮的圆角*/

        .circle {

            border-radius: 10px;/*当元素的宽和高相等时,这里的10就是宽度或者高度除以2,它表示左上角、右上角、右下角、左下角的圆角均为10px,这样出来的效果就是一个圆*/

        }

    </style>

</head>

<body style="background:#ccc;">

    <span class="button circle"></span>

    <span class="button circle"></span>

</body>

</html>

 

 

 

收获园豆:20
蘇乞兒 | 菜鸟二级 |园豆:435 | 2016-04-15 15:53

谢谢~这样做出来的效果是一样的!

*茉莉花开* | 园豆:160 (初学一级) | 2016-04-15 16:07

@蘇乞兒: 那这些图片是用PS做出来的??

*茉莉花开* | 园豆:160 (初学一级) | 2016-04-15 16:16

@*茉莉花开*: 但是,CSS3的某些样式不能兼容所有浏览器,所以使用图片是更常见的做法,特别是对兼容性要求很高的网站。下面我再提供一个使用图片的做法:

<html>

<head>

    <style type="text/css">

        .button {

            display: inline-block;

            width: 57px;

            height: 55px;

            background-position: 0;

            cursor: pointer;

        }

 

        .button:hover {

            /*使用css sprite技术定位图片*/

            background-position: -62px 0;

        }

 

        .circle {

            background-image: url(images/circle-bg.jpg);

            background-repeat: no-repeat;

        }

    </style>

</head>

<body>

    <span class="button circle"></span>

    <span class="button circle"></span>

</body>

</html>

 其中“circle-bg.jpg”图片就是“雪碧图”,它是下面这个样子:

 

所以,最后看到的页面效果就是下面这个样子:

 

 

 

蘇乞兒 | 园豆:435 (菜鸟二级) | 2016-04-15 16:18

@*茉莉花开*: 是的,图片是用PS做的,CSS3的样式只能使用圆角这类简单的图形,如果是复杂的图形就需要使用图片了。

蘇乞兒 | 园豆:435 (菜鸟二级) | 2016-04-15 16:19

@蘇乞兒: 嗯嗯,知道了,谢谢~~~

*茉莉花开* | 园豆:160 (初学一级) | 2016-04-15 16:21
其他回答(1)
0

查看源,别人怎么实现的照超就行了。

Firen | 园豆:5483 (大侠五级) | 2016-04-15 15:19

这个是用的背景图片,没看懂它怎么弄的。关键是编写其它效果的时候总不能总是用这个图片吧,有些场合不适用啊。。。

支持(0) 反对(0) *茉莉花开* | 园豆:160 (初学一级) | 2016-04-15 15:48
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册