制作一个简单的轮播图（详解新手教学）

相信很多初学者，无论是前端还是后端，对于制作页面时，都想自己亲手制作一个轮播图。
如何制作一个轮播图：

基础知识：有HTML，Css，js基础
本文使用技术： HTML，boostrap，jQuery
先贴代码

页面：

<div class="lunbotu row"><div id="piclist"><ul class="focus-index-list"><li><a href="#" class="focus-list "><img src="img/lunbo1.jpg" width="1359px" height="440px" /></a></li><li><a href="#" class="focus-list"><img src="img/lunbo2.jpg" /></a></li><li><a href="#" class="focus-list"><img src="img/lunbo3.jpg" /></a></li></ul></div><div class="focus-side-inner"><ul id="focus-ul"><li class="focus-li"><a href="#" class="focus-a">第一张图片</a></li><li class="focus-li"><a href="#" class="focus-a">第二张图片</a></li><li class="focus-li"><a href="#" class="focus-a">第三张图片</a></li></ul></div>

css：

     <style type="text/css">* {padding: 0;margin: 0;}a {font-family: "微软雅黑";color: white;}a:hover {text-decoration: none;color: limegreen;}li {list-style: none;}.lunbotu {width: 1349px;}#piclist {width: 100%;height: 440px;overflow: hidden;}.focus-list {float: left;position: relative;}.focus-side-inner {position: absolute;top: 0px;right: 200px;height: 440px;background-color: rgba(0, 0, 0, .7);}#focus-ul {margin-top: 20px;}/*将li设置为浮动元素，将所有图片连在一起*/.focus-li {width: 280px;height: 32px;margin-bottom: 10px;text-align: center;}.focus-li a {line-height: 30px;font-size: 17px;}.focus-index-list{width:20000px;//使图片都在同一行}</style>

js：

<script type="text/javascript">$(document).ready(function() {var _index = 0;var flag=true;var allimg=$(".focus-a").length;//用来做判断var timer=null;aogo(flag);$(".focus-a").hover(function(){clearInterval(timer);//取消定时执行；flag=false;_index=$(".focus-a").index($(this));//获取当前鼠标所在的元素在所有兄弟元素的位置。并使用这个数值来达到自动按序轮播的效果go(_index);},function(){  //在移出鼠标时，重新启动定时执行函数flag=true;timer=setInterval(autogo,2000);})function aogo(flag){if(flag){timer=setInterval(autogo,2000);//设置间隔执行函数，这里注意，在jQuery中，不能使用setInterval("autogo()",2000);}}function autogo(){if(_index<allimg-1){ //设置定时执行的范围，不然会出现不断执行，出现白框的情况_index++;}else if(_index=allimg-1){_index=_index;//当执行到最后一个时，固定数值，使其看起来不再移动}go(_index);}function go(num) {var a=-num*1420+'px';//这里是字符串拼接，因为left对应的值为一个字符串$(".focus-list").animate({left: a},200)}})</script>

在制作轮播图之前你先需要知道setInterval的使用，熟悉animate函数。
制作原理：
通过将一组图片的属性设置为position：relative（相对定位），并将图片的属性设置为float：left，使多个图片都成为浮动元素，这样做的目的：使多张图片连在一起，不然它们都只是一个单一独立的元素。
本文的做法是将所有的无序列表中的包含图片的连接元素设置为浮动元素
使用animate函数，修改元素的属性：left：-1420px，使元素距离左边为1420px（这个数值也是产生轮播图的重要因素，一张图片是1420px，多张图片n*1420px），并设置变化的速度，从而产生动态效果，形成我们所见的轮播图。
自动轮播图需使用setInterval函数，使函数在设置的规定间隔时间重复执行。

形成轮播图的原理，图解：
1为外层div，2为1内层div。
你的图片大小应该为1div的大小，然后将2div设置为position：relative，轮播图能实现的主要原理也是因为这个属性，因为他能使用left这个属性。将2div的宽度设置的足够大，使你的图片能够在一行内浮动。如果出现两行或多行，会出现多个图片同时左移的现象。出现原因：浮动元素被包含在不是浮动元素的div中，2div的宽度是固定的，图片被包含其中，div移动，图片跟着移动。
想到这些，其他就是如何操作2div移动了，使用函数animate()，设置setInterval()自动移动，实现轮播图。

实现轮播图的方式有很多种，这只是其中非常简单的一种，编程之路，任重而道远，与君共勉。

第一次在CSDN写文章

制作一个简单的轮播图（详解新手教学）相关推荐

制作一个简单的轮播图
记录一下轮播图制作(这里用的是原生js制作的) 前期准备工作 1.自己用的顺手的开发工具,我这里用的时HBuilder来写的 2.创建项目 3.在项目中创建images.css.js文件夹,把需要制作 ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
jquery手写轮播图_jquery 实现轮播图详解及实例代码_jquery_脚本之家
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写 ...
使用jQuery，写一个简单的轮播图，实现切换功能！
1.谈到jquery,想必大家都知道,它是一个js库.使用起来简单又方便,接下来就给大家看看我用jquery实现的轮播图吧! <!DOCTYPE html> <html lang=& ...
js轮播图片小圆点变化_纯js实现轮播图,详解(简单，无缝，小圆点,左右手动切换,自动轮动)...
无论用什么语言开发可视化界面,都有一个叫轮播图的东西.我们现在有个需求,如图: slideshow1.PNG 左右切换按钮默认为隐藏,当鼠标进入图片时,左右切换按钮时显示的,当鼠标离开图片时左右切换按 ...
原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了首先是构造html: <div id=&qu ...
学习使用vue实现一个简单的轮播图
目录关于template外壳: 关于图片的自动切换的处理: 为什么要把第一张图片外的 li 克隆一份放到 li 列表的最后: 函数节流处理 : 关于template外壳: 创建一个div,用于内容的 ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
使用jQuery写一个简单的轮播图（笔记）
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

制作一个简单的轮播图（详解新手教学）

制作一个简单的轮播图（详解新手教学）

制作一个简单的轮播图（详解新手教学）相关推荐

最新文章

热门文章