html 图片轮播实例,简单实现轮播图效果的实例

- 日理万妓 2022-10-06 07:56 210阅读 0赞

一、要点：

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

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

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

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

二、实现代码：

html代码:

轮播图

![1.jpg][]

![2.jpg][1.jpg]

![3.jpg][1.jpg]

![4.jpg][1.jpg]

![5.jpg][1.jpg]

![6.jpg][1.jpg]

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;

margin-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的第一个对象，让它显示，它的兄弟元素隐藏

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

showTime();

//当鼠标放到下标上显示该图片，鼠标移走继续轮播

$(".tab").hover(

function ()

//获取到当前鼠标所在的下标的索引

i = $(this).index();

show();

//鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去

clearInterval(time);

\}, function ()

showTime();

\});

//要求四，当我点击左右切换

$(".btnLeft").click(function ()

//1.点击之前要停止轮播

clearInterval(time);

//点了之后，-1

if (i == 0)

i =6;

i--;

show();

showTime();

\});

$(".btnRight").click(function () \{

//1.点击之前要停止轮播

clearInterval(time);

//点了之后，-1

if (i == 5) \{

i = -1;

i++;

show();

showTime();

\});

function show() \{

//$("\#allswapImg").hover(function ()

//\{

// $(".btn").show();

//\}, function ()

//\{

// $(".btn").hide();

//\});

//fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s

$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();

$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");

function showTime()

time = setInterval(function () \{

i++;

if (i == 6) \{

//只有6张图片，所以i不能超过6，如果i等于6时，我们就让它等于第一张

i = 0;

show();

\}, 3000);

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

[1.jpg]:

html 图片轮播实例,简单实现轮播图效果的实例

发表评论取消回复

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

相关阅读

相关图片轮播——Swiper实例

相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果

相关 Html图片轮播遍历,javaScript 简单轮播图实现

相关 html简单图片轮播居中,html简单图片轮播的实现

相关简单html实现图片轮播,JavaScript实现简易轮播图

相关 html 图片轮播实例,简单实现轮播图效果的实例

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

相关 html网页简单实现图片轮播效果,CSS3简单实现图片切换轮播

相关 html轮播图用什么语言,html简单图片轮播的实现

相关 JS实例-图片轮播