美文网首页
简易轮播图实现——乞丐版

简易轮播图实现——乞丐版

作者: 锺权 | 来源:发表于2018-10-28 17:56 被阅读0次

前几天刚学到了一种最简单的轮播图实现方法,现在写在博客里就当是练习了。。。这种方法的核心原理是通过给图片元素附加display属性来实现轮播效果,即显示带有active类的图片而隐藏其他的图片。具体代码如下:

html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>简易轮播图</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="main" id="main">

        <div class="banner" id="banner">

<a href="">

<div class="banner-slide slide1 slide-active"></div>

</a>

<a href="">

<div class="banner-slide slide2"></div>

</a>

<a href="">

<div class="banner-slide slide3"></div>

</a>

</div>

        <a href="javascript:void(0)" class="button prev" id="prev"></a>

<a href="javascript:void(0)" class="button next" id="next"></a>

        <div class="dots" id="dots">

<span class="active"></span>

<span></span>

<span></span>

</div>

</div>

<script src="js/script.js"></script>

</body>

</html>

css:

*

{

padding:0;

margin:0;

}

.fl

{

float:left;

}

ul

{

list-style:none;

}

body

{

font-family:"Microsoft YaHei";

color:#14191e;

}

.main

{

width:1200px;

height:460px;

margin:30px auto;

overflow:hidden;

position:relative;

}

.banner

{

width:1200px;

height:460px;

overflow:hidden;

position:relative;

}

.banner-slide

{

width:1200px;

height:460px;

background-repeat:no-repeat;

position:absolute;

display:none;

}

.slide-active

{

display:block;

}

.slide1

{

background-image:url("../img/bg1.jpg");

}

.slide2

{

background-image:url("../img/bg2.jpg");

}

.slide3

{

background-image:url("../img/bg3.jpg");

}

.button

{

position:absolute;

width:40px;

height:80px;

left:244px;

top:50%;

margin-top: -40px;

background:url("../img/arrow.png")no-repeat center center;

}

.button:hover

{

background-color:#333333;

opacity:0.8;

filter:alpha(opacity=80);

}

.prev

{

transform:rotate(180deg);

}

.next

{

left:auto;

right:0;

}

.dots

{

position:absolute;

right:20px;

bottom:24px;

text-align:right;

}

.dots span

{

display:inline-block;

width:12px;

height:12px;

border-radius:50%;

background:rgba(7,17,27,0.4);

margin-left:8px;

line-height:12px;

box-shadow:0 0 0 2px rgba(255,255,255,0.8)inset;

cursor:pointer;

}

.dots span.active

{

box-shadow:0 0 0 2px rgba(7,17,27,0.4)inset;

background-color:#ffffff;

}

js:

function byId(id) {

return typeof (id) ==="string"?document.getElementById(id):id;

}

var index =0,

timer =null,

pics =byId("banner").getElementsByTagName("div"),

dots =byId("dots").getElementsByTagName("span"),

prev =byId("prev"),

next =byId("next"),

len =pics.length;

function slideImg() {

var main =byId("main");

main.onmouseover =function () {

if (timer) {

clearInterval(timer);/* 清除定时器,用于鼠标停留时保持图片以及防止因多次移动鼠标导致的多个定时器分别计时的问题 */

        }

}

main.onmouseout =function () {

timer =setInterval(function () {

index++;

changeImg();

},3000);

}

/* 鼠标离开时触发事件 */

    main.onmouseout();

/* 绑定点击圆点时切换图片的事件 */

    for (var j=0;j

{

dots[j].id ="D"+j;

dots[j].onclick =function () {

var str =this.id;

str =str.substr(1);

index =str;

changeImg();

}

}

next.onclick =function () {

index++;

changeImg();

}

prev.onclick =function () {

index--;

changeImg();

}

}

function changeImg()

{

if (index >=len)

{

index =0;

}

else if (index <0)

{

index =len -1;

}

for(var i=0;i

{

pics[i].style.display ='none';/* 遍历所有图片display属性为隐藏 */

        dots[i].className ="";/* 遍历所有圆点并将active类全部清除 */

    }

pics[index].style.display ='block';/* 将所选图片设为显示 */

    dots[index].className ="active";/* 赋予所选圆点active类 */

}

slideImg();

这种轮播图堪称是乞丐版中的乞丐版,无法实现滚动效果。。。滚动效果在我参(chao)考(xi)了大佬@Gsdxiaohei的代码后终于是完成了罒ω罒 罒ω罒 罒ω罒具体请见“简易轮播图实现——乞丐加强版”。。。小白萌新,还请大佬们多多指点

相关文章

  • 简易轮播图实现——乞丐版

    前几天刚学到了一种最简单的轮播图实现方法,现在写在博客里就当是练习了。。。这种方法的核心原理是通过给图片元素附加d...

  • 简易轮播图实现——乞丐加强版(终于能滚动了。。。)

    前几天做了一个很简单的轮播图,但是它是通过给图片加上display属性的方法去实现轮播的,所以不能滚。。。 ̄□ ̄|...

  • 三种样式的轮播图

    一、100%比例轮播图 HTML代码 CSS样式 js代码 二、手动箭头轮播图 三、简易轮播图

  • Recyclerview基本使用<8>-----用R

    用RecyclerView实现无限轮播图,有普通版和3d版

  • React 实现简易轮播图

    使用 ReactJS 实现一个简易的轮播图 (carousel) 组件。 Task 1:在相框中展示图片,左右按钮...

  • 轮播图

    做了一个简易版的轮播图,html结构拿了网上的一个人的例子,然后重新写css和js部分。大概实现的功能如下 能够实...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • 造轮子系列--撸一个轮播图

    PictureCarousel 先上效果图: 可以看到,我们实现了一个简易的图片轮播器。下面我们从设计到实现一步一...

  • iOS简易轮播图的实现

    前言 见过很多的iOS应用,都有无限轮播图,之前也看到过很多相关实现的文章,可是仅仅就是一看而过罢了。当自己在项目...

  • JS实现超简易轮播图

    0.示例 预览地址: https://codepen.io/klren0312/full/ymvEbr 1.画界面...

网友评论

      本文标题:简易轮播图实现——乞丐版

      本文链接:https://www.haomeiwen.com/subject/vvhmtqtx.html