Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Rumah > hujung hadapan web > tutorial js > teks badan

教你一步步用jQyery实现轮播器

高洛峰

Lepaskan： 2017-01-07 13:10:27

asal

1796 orang telah melayarinya

实现原理

如图，试想一下，若是将

包着并且设置了左浮动。

那么当我们向左移动ul的时候并且移动的距离为
的宽度，第二个
不就被移动到了
的窗口，这样一来图片不就被一张一张显示出来了吗？

接下来我们在设置
的属性overflow:hidden，那么
窗口以外的图片不显示，只显示移动到当前窗口的图片，是不是又完美了一些，感觉快做好了是吧！

说了一些原理，好了，直接上代码，记得引入jquery。

这是div做的布局，做的时候记得加上边框，做后在删掉，这样便于测试
<div class="slideShow"> <div class="nav-t"> <ul> <li><a href="#" target="_blank"><img src="images/1.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="images/2.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="images/3.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="images/4.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="images/5.png" alt=""></a></li> </ul> <div class="nav-b"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> </div> <script type="text/javascript" src="jquery-min.js"></script> <script type="text/javascript" src="lunbo.js"></script>
Salin selepas log masuk
接下来设置一下样式
<style> .slideShow{ border:0px solid blue; width:600px; height:450px; margin:50px auto; position:relative; } .nav-t{ border:0px solid red; width:580px; height:430px; margin:8px auto; position:relative; overflow:hidden; } .nav-t ul{ border:0px solid green; list-style:none; width:3000px; height:430px; margin:0; padding:0; position:relative; } .nav-t li{ height:427px; width:580px; float:left; } .nav-b{ position:absolute; top:390px; left:220px; cursor:default; } .nav-b span{ margin-right:5px; border:1px solid red; padding:0 6px; border-radius:12px; color:#fff; background:rgba(132,125,119,0.5); cursor:pointer; } .nav-b span.active{ background:rgba(0,0,0,0.8); } </style>
Salin selepas log masuk
用js实现点击轮播图片、自动轮播图片，鼠标移动上去停止轮播
$(function(){ $(function(){ var slide=$(".slideShow"), navt=slide.find(".nav-t"), ul=navt.find("ul"), navbs=slide.find(".nav-b span"), onwidth=ul.find("li").eq(0).width(), //获取ul下的li宽度 timer=null, inow=0; navt.hover(function(){ clearInterval(timer); //鼠标移上去，清除掉自动轮播功能，即定时轮播 },autoPlay); navbs.on("click",function(){ //点击轮播事件 var me=$(this); inow=me.index(); //此处变量用的与自动轮播函数里的相同，为的是能在随便点击后，自动轮播时按照我们点击了的继续向后轮播，这叫动态实时 ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到div的当前窗口 navbs.removeClass("active"); //清除掉上一个点击按钮的样式 me.addClass("active"); //为当前被点击的按钮添加第一个按钮样式 }); autoPlay(); function autoPlay(){ //自动轮播函数 timer=setInterval(function(){ //开定时器 inow++; if(inow==navbs.length){ //判断是否到了最后一张，若是到了，返回到第一张 inow=0 } navbs.eq(inow).trigger("click"); //根据定时的时间用span的索引自动调用click事件，trigger为jQuery的自动调用函数 },3000); } }); });
Salin selepas log masuk
看一下效果图？好的

总结

好了，以上就是利用jQyery实现轮播器的全部内容了，怎么样，要不你也做一个？希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

更多教你一步步用jQyery实现轮播器相关文章请关注PHP中文网！
Label berkaitan：
jquery 轮播

sumber：php.cn

Artikel sebelumnya：jquery广告无缝轮播实例 Artikel seterusnya：JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
- html设置加粗、倾斜、下划线、删除线等字体效果示例介绍
  
  1970-01-01 08:00:00
- 实现一个 Java 版的 Redis
  
  1970-01-01 08:00:00
- 最简单的微信小程序Demo
  
  1970-01-01 08:00:00
- python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍
  
  1970-01-01 08:00:00
- 微信小程序：如何实现tabs选项卡效果示例
  
  1970-01-01 08:00:00
- Python构造自定义方法来美化字典结构输出
  
  1970-01-01 08:00:00
- HTML5:使用Canvas实时处理Video
  
  1970-01-01 08:00:00
- Asp.net使用SignalR实现发送图片
  
  1970-01-01 08:00:00
- 微信小程序开发教程-App()和Page()函数概述
  
  1970-01-01 08:00:00
- 详解python redis使用方法
  
  1970-01-01 08:00:00
Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

2

1810

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

10

1963

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

1660

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1563

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1592
Topik-topik yang berkaitan
Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

Tentang kita Penafian Sitemap: Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！