html中简单轮播图实现原理,jQuery实现一个简单的轮播图

逃离我推掉我的手 2022-10-05 12:44 228阅读 0赞

jQuery实现一个简单的轮播图

发布时间：2020-08-25 02:23:35

来源：脚本之家

阅读：100

作者：nameless-212

html代码：

轮播图练习

css代码：

\*\{margin:0; padding: 0;\}

ul li\{list-style: none;\}

.back\{height: 400px; overflow: hidden; margin-top:100px;\}

.back li\{width: 100%; height: 400px; margin:0 auto;\}

.back li.l1\{background: red;\}

.back li.l2\{background: yellow;\}

.back li.l3\{background: blue;\}

.back li.l4\{background: black;\}

.back li.l5\{background: green;\}

.point\{text-align: center; margin-top: -30px;\}

.point li\{ width: 20px; height: 20px; border:2px solid \#fff; border-radius: 10px; box-sizing:border-box; display: inline-block;\}

.point li.active\{background: \#fff;\}

.btn\{ position: relative;\}

.btn span\{ display: inline-block; vertical-align: top; width: 100px; height: 100px; background: rgba(0,0,0,.5); position: absolute; top:-235px; cursor: pointer;\}

.btn .prev\{left: 0\}

.btn .next\{ right: 0;\}

js代码：

$(function()\{

function banner(a,b,c,d,e)\{ // a是背景图，b是active，c是背景对应按钮，d是上一页，e是下一页

index=0;

len=$(a).length-1;

function teb(index)\{

$(c).eq(index).addClass(b).siblings('').removeClass(b);

$(a).eq(index).fadeIn(300).addClass('curr').siblings('').fadeOut(300).removeClass('curr');

\};

$(c).click(function()\{

index=$(this).index();

teb(index);

\});

$(d).click(function()\{

index--;

if(index<0)\{

index=len;

\};

teb(index);

\});

$(e).click(function()\{

index++;

if(index>len)\{

index=0;

\};

teb(index);

\});

function timeRun()\{

time=setInterval(function()\{

index++;

if(index>len)\{

index=0;

\};

teb(index);

\},3000);

\};

timeRun();

\};

banner('.back>li','active','.point>li','.prev','.next');

\});

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持亿速云！

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

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

相关阅读

相关 html + js 简单实现轮播图

实现思路如下：设置所有图片的 display 属性为 none 设置一个 index 用来标志获取到的图片设置一个定时器，每隔一段时间令 index 自增并将对应

旧城等待，/ 2022年12月19日 13:16/ 0 赞/ 205 阅读

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

开发过程中需要用到图片轮播的插件，在网上找了几个插件之后还是决定自己码一个，比较简洁的功能，以后说不定还会有用。 ps：功能比较简单，整个框并不能根据图片的大小自动调节，

客官°小女子只卖身不卖艺/ 2022年10月10日 11:21/ 0 赞/ 226 阅读

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

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 326 阅读

相关 html中简单轮播图实现原理,常见轮播效果及其实现原理

常见轮播效果及其实现原理说明：本项目只做最基础的原理分析与最简单的应用场景。 1. 简单做法：css定位 + js滑动动画思路：在同一个父容器内， 1. 通过改

痛定思痛。/ 2022年10月05日 12:44/ 0 赞/ 200 阅读

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

jQuery实现一个简单的轮播图发布时间：2020-08-25 02:23:35 来源：脚本之家阅读：100 作者：nameless-212 html代码：轮

逃离我推掉我的手/ 2022年10月05日 12:44/ 0 赞/ 229 阅读

相关 jquery简单轮播图实现

其实轮播的代码很简单只需要20多行jq代码就可以实现了以下便是简单轮播的代码： <!DOCTYPE html> <html> <head

怼烎@/ 2022年06月10日 12:56/ 0 赞/ 271 阅读

相关 JQuery简单轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

电玩女神/ 2022年05月31日 09:50/ 0 赞/ 251 阅读

相关简单轮播图实现原理详解

轮播图实现思路：第一步：设计轮播图片的容器； <div id="myCarousel" class="carousel" data-ride="carousel"> 注

快来打我*/ 2022年05月17日 11:15/ 0 赞/ 200 阅读

相关 jQuery实现一个简单的轮播图

一.轮播图内容组成包括：4张图片，图片标号，向左翻页，向右翻页的几个部分，如下图所示： ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

柔情只为你懂/ 2022年01月31日 06:57/ 0 赞/ 266 阅读

相关轮播图简单实现

如何实现轮播图？根据视频[尚硅谷JavaScript视频][JavaScript]整理得到。思路： ![在这里插入图片描述][2019082110244071

Bertha 。/ 2021年10月24日 05:26/ 0 赞/ 513 阅读