记录图片轮换的圆点怎么实现？
0
悬赏园豆：20
[已解决问题]
解决于 2016-04-15 16:10
在第一组一组图片轮换的时候，如图所示，第一个圆点背景色为蓝色；换到下一组图片显示时，第二个圆点背景色改变！
这样的小圆点是怎么样实现的啊？
最佳答案
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
谢谢~这样做出来的效果是一样的！
@蘇乞兒: 那这些图片是用PS做出来的？？
@*茉莉花开*: 但是，CSS3的某些样式不能兼容所有浏览器，所以使用图片是更常见的做法，特别是对兼容性要求很高的网站。下面我再提供一个使用图片的做法：
<html>
<head>
<style type="text/css">
.button {
display: inline-block;
width: 57px;
height: 55px;
background-position: 0 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”图片就是“雪碧图”，它是下面这个样子：
所以，最后看到的页面效果就是下面这个样子：
@*茉莉花开*: 是的，图片是用PS做的，CSS3的样式只能使用圆角这类简单的图形，如果是复杂的图形就需要使用图片了。
@蘇乞兒: 嗯嗯，知道了，谢谢~~~
其他回答(1)
0
查看源，别人怎么实现的照超就行了。
这个是用的背景图片，没看懂它怎么弄的。关键是编写其它效果的时候总不能总是用这个图片吧，有些场合不适用啊。。。
