[分享]css做轮播图效果代码

CSS是一种用于描述网页样式的语言，常常用于实现网页的装饰和布局。而CSS做轮播图效果非常常见和实用。下面我们就来介绍一下如何使用CSS实现轮播图效果。首先，我们需要一个包含图片的容器，使用HTML的...

CSS是一种用于描述网页样式的语言，常常用于实现网页的装饰和布局。而CSS做轮播图效果非常常见和实用。下面我们就来介绍一下如何使用CSS实现轮播图效果。

首先，我们需要一个包含图片的容器，使用HTML的img标签即可实现。然后，我们可以使用CSS对这些图片进行定位、隐藏和显示的操作来实现轮播图的效果。

// HTML代码
<div id="container">
    <img src="1.jpg" class="show">
    <img src="2.jpg">
    <img src="3.jpg">
    <img src="4.jpg">
</div>

// CSS代码
#container {
    position: relative; // 定位父容器
}
#container img {
    position: absolute; // 定位子元素
    top: 0;
    left: 0;
    display: none; // 隐藏元素
}
#container .show {
    display: block; // 显示当前元素
} 

在CSS代码中，我们首先使用了position属性来定位父容器和子元素。接着，我们使用display:none属性隐藏除了显示图片之外的图片，并通过.show类来对显示的图片进行操作。

接下来，我们可以通过JavaScript来控制轮播图的滚动效果。我们可以通过定时器来定时切换图片的显示和隐藏，从而实现轮播图的效果。

// JavaScript代码
var index = 0;
var timer = null;
var len = $('#container img').length;

// 切换图片函数
function changeImg() {
    $('#container img').eq(index).addClass('show').siblings().removeClass('show');
    index++;
    if (index == len) {
        index = 0;
    }
}

// 执行轮播图函数
timer = setInterval(changeImg, 2000);

// 停止轮播图函数
$('#container').hover(function() {
    clearInterval(timer);
}, function() {
    timer = setInterval(changeImg, 2000);
}); 

在JavaScript代码中，我们定义了一个切换图片的函数changeImg()，它会将当前的图片设置为.show类，同时将其他的图片设置为不显示。同时，我们通过定时器来定时调用这个函数来实现轮播图的效果。

最后，我们还给轮播图绑定了鼠标进入和离开事件，当鼠标进入轮播图区域时，我们停止定时器来实现暂停轮播图的功能，当鼠标离开时，我们重新启动定时器来实现轮播图的继续播放。

这样，我们就成功地使用CSS和JavaScript实现了一个简单的轮播图效果。当然，还有很多其他的高级轮播图效果，需要大家进一步的学习和掌握。