简单实现轮播图效果的实例

2024-10-01 22:11:27

一、要点：

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

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

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

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

二、实现代码：

html代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>轮播图</title>
  <link href="css/LunBimg.css" rel="stylesheet" />
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/LunBimg.js"></script>
</head>
<body>
  <div id="allswapImg">
    <div class="swapImg"><img src="image/1.jpg" /></div>
    <div class="swapImg"><img src="image/2.jpg" /></div>
    <div class="swapImg"><img src="image/3.jpg" /></div>
    <div class="swapImg"><img src="image/4.jpg" /></div>
    <div class="swapImg"><img src="image/5.jpg" /></div>
    <div class="swapImg"><img src="image/6.jpg" /></div>
  </div>
  <div class="btn btnLeft"><</div>
  <div class="btn btnRight">></div>
  <div id="tabs">
    <div class="tab bg">1</div>
    <div class="tab">2</div>
    <div class="tab">3</div>
    <div class="tab">4</div>
    <div class="tab">5</div>
    <div class="tab">6</div>
  </div>
</body>
</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;
  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代码：

/// <reference path="_references.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);
}

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

原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
利用JS做网页特效_大图轮播(实例讲解)

废话不多说,直接上代码: <style> * { margin: 0px; padding: 0px; } .stage { width: 500px; height: 300px; border: 5px solid black; margin: 200px; position: relative; overflow: hidden; } .to-left, .to-right { position: absolute; top: 0px; width: 50px; height: 300p
JavaScript实现大图轮播效果

本文实例为大家分享了js图片轮播效果的具体代码,供大家参考,具体内容如下 <head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding
详解js图片轮播效果实现原理

本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="tex
原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
简单实现轮播图效果的实例

一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"
js实现简单的轮播图效果

本文实例为大家分享了js实现简单的轮播图效果的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"
原生JS实现简单的轮播图效果

本文实例为大家分享了JS实现简单的轮播图效果的具体代码,供大家参考,具体内容如下实现效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 2.点击右侧按钮一次,图片往左播放一张,左侧按钮同理. 3.图片播放的同时,下面的小圆圈模块也跟随一起变化. 5.鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片. 轮播图向右移动的时候要用到缓动画的函数,具体见博客:JS实现添加缓动画的方法 (1)布局:轮播图部分的图片用ul进行布局,里面的每个li放a标签,
iOS简单实现轮播图效果

本文实例为大家分享了iOS简单实现轮播图效果的具体代码,供大家参考,具体内容如下平常在开发过程中,首页的轮播图总是少不了,轮播图我们都知道肯定是要使用 UIScrollView ,难点就在最后一张图片被滑动时,如何回到第一张图片以及第一张滑动到最后一张.我们可以使用如下方式实现轮播图,在划到3后面的1后,设置 contentOffset 回到最先的1,并设置 pageControl ,即可达到效果 (从1划到3也同理) 看一下效果: 完成这种轮播图,我们的 View 需要如下的属性和方法 @i
JavaScript实现轮播图效果代码实例

这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML部分:  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link rel="styleshe
jQuery实现简单的轮播图效果

大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果首先我们看到,它是由背景图片.方向图标和指示器组成.我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位.我们要实现点击方向图标时,图片跟着变换:点击指示器时,图片跟着变换:不点击时每隔5秒自动播放:不点击时不显示方向图标. 结构布局:用一个div包裹3个div,里面的3个div分别显示背景图片部分.方向图标部分和指示器部分. <!DOCTYPE html> <html lang="en&
Flutter 封装一个 Banner 轮播图效果的实例代码

实际业务开发中,首页一般都会存在一个轮播图. 在 Flutter 中,如何开发一个轮播? 了解需求首先,我们在开发一个功能的时候要了解这个功能的需求,那一个轮播需要有什么功能? 1. 可以自定义高度和一些属性 2. 展示图片 3. 自动翻页播放 4. 点击事件 5. 指示器 6. 人为拖动的时候关闭自动播放其中「人为拖动的时候关闭自动播放」是比较难的,我们后续会说,那先一个一个功能来实现. 自定义高度和一些属性这里主要是做一些前期的工作,如果我们的 Banner 要开源让别人来使用,那我们
JavaScript实现简单的轮播图效果

轮播图是什么? 轮播图:在一个模块或者说窗口,通过电脑上鼠标点击.手机上手指滑动后,可以看到多张图片.这些图片就都是轮播图,这个模块就叫做轮播模块. 如何实现轮播图如何才能在js里面做成一个轮播图呢,比如下面这种的,可以自动生成图片对应的小圆点.点击左右箭头可以跳到上或下一张图片.每隔几秒自动轮播,还可以点击小小圆点去到指定的图片. HTML结构首先我们创建一个HTML页面,这个结构很简单,用一个大的div嵌套两个div,取个名字叫slider,上面的div用来装图片,取个名字叫slider
JavaScript实现简单轮播图效果

本文实例为大家分享了js实现简单轮播图效果的具体代码,可以实现左右翻转,图片切换显示等效果,供大家参考,具体内容如下效果展示: 代码展示: <!doctype html> <html>  <title> <meta charset="utf-8"> </title> <b
jQuery实现简单轮播图效果

本文实例为大家分享了jQuery实现简单轮播图效果的具体代码,供大家参考,具体内容如下介绍:这里是我使用了计时器的方式实现图片每隔几秒切换然后添加了两个按钮用于上一张和下一张的切换 1.导入jQuery文件 <script src="jquery-3.5.1.js"></script> 2.设置图片的样式 <style> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 300px; b

简单实现轮播图效果的实例

相关推荐

随机推荐