一、要点：

1.页面加载时，图片重合，叠在一起[绝对定位];

2.第一张显示，其它隐藏;

3.设置下标,给下标设置颜色让它随图片移动;

4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，继续轮播;

二、实现代码：

html代码:

轮播图

css代码：

* {

padding:0px;

margin:0px;

}

.swapImg {

position:absolute;

}

.btn {

position:absolute;

height:90px;

width:60px;

background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透明度为50%*/

color:#ffffff;

text-align:center;

line-height:90px;

font-size:40px;

top:155px;/*图片高度400/2-45*/

cursor:pointer;

/*display:none;*/

}

.btnRight {

left:840px;/*图片宽度900-导航宽度60*/

}

#tabs {

position:absolute;

top:370px;

margLvOzNEsPKin-left:350px;

}

.tab {

height:20px;

width:20px;

background:#05e9e2;

line-height:20px;

text-align:center;

font-size:10px;

float:left;

color:#ffffff;

margin-right:10px;

border-radius:100%;

cursor:pointer;

}

.bg {

background:#00ff21;

}

js代码：

///

var i = 0;//全局变量

//定义一个变量用来获取轮播的过程

var time;

$(function ()

{

//1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐藏

LvOzNEsPK $(".swapImg").eq(0).show().siblings().hide();

showTime();

以上这篇简单实现轮播图效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

本文标题: 简单实现轮播图效果的实例

本文地址: http://www.cppcns.com/ruanjian/java/156904.html