js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...
今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快。

唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~~  好了切入主题!

本次教程的原理就是用一个大神写好的插件,里边包含了很多封装好的js函数供我们使用,我们只需引入这个插件和jquery库配合,然后写出规定的html结构,最后再插一段通俗易懂的jquery代码就大功告成了~~ 
大家先百度一下“大话主席”  第一个就是点进去点击下载页面

下载之后是一个本地的网站其实和线上是一样的下载不下载都一样,打开之后点击基础效果,如果想下载扩展效果的话是要付费的,反正也不贵19块钱,就当给作者得辛苦钱(鸡哥是不是要想这货要点广告费啊~~~哈哈哈)

鸡哥截图没截完,其实下边还有很多效果,右侧红框框住的是轮播效果的属性选择,可以生成一段jquery代码(橙色部分代码),就是刚才所说的那段通俗易懂得代码。这段代码在最后是要用到的,我在后边会讲到。
好了,大话主席的插件简单的介绍完了,下边给大家列一下需要得插件:
1:jquery1.42.min.js                                 / jquery库 知道点js的人都懂得
2:jquery.SuperSlide.2.1.1.js                 /  这个就是刚刚介绍得大话主席的插件
这俩插件鸡哥会在大家伙看完文章后在结尾附上下载链接,鸡哥打包好的。
下边鸡哥介绍下这俩文件如何引要放在哪里先看个截图:

如截图,在body结束标签后边引入我们的这俩文件,当然你的路径可能跟我的不一样。
特别注意一下:引入的顺序一定要先引入jquery插件然后引入大话主席插件不然没得效果~~~

知道怎么引入之后大家再看看html的结构怎么写,必须要按照这个结构,不然也没得效果,见下方代码结构。

  <div class="box">      / 此标红类名后边会用到 留意

   <div class="hd">
     <ul><li>1</li><li>2</li><li>3</li></ul>
   </div>

   <div class="bd">
     <ul><li>1.jpg</li><li>2.jpg</li><li>3.jpg</li></ul>
   </div>

  </div>

如上述代码:一个大的div包住俩小div,大div类名就是标红地方可以任意起,俩小div是固定的类名,hd就是head的缩写,就是轮播图中的1234之类的按钮。bd缩写就是body,就是轮播图啦。
好了,现在已经基本差不多了就差一个生成的刚刚讲过的那个橙色部分代码了,按照自己想要的效果生成一个代码,然后复制到你引入大话主席代码的下边就ok了,见下方代码:

  jQuery(".box").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:7000,delayTime:1000});

标红的地方填的就是刚刚所讲的大div的类名,特别注意前边有个点。
到现在已经基本成了,但是大家还不要忘了给你的html加上css样式哟,怎么样是不是很简单~~~

好了文章到这终于写完了,第二次啊.....可能写的有些粗糙,毕竟现在已经凌晨一点多了,不知各位看官觉得写的怎么样,哪里没写明白请在下方评论中写出,这样及提升了你也提升了我。

感谢浏览啊

原文链接:js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

时间: 2024-08-22 17:01:35

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷的相关文章

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

js实现轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .carousel{ 12 margin:0 aut

JS原生轮播图

哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absol

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

用js实现轮播图

昨天一个朋友让我用js帮他做一个简单的轮播图,我本身就是菜鸟一个,js学得不怎么样,加上好久没敲代码,简直一头雾水,还好搞了将近一个小时终于搞定.今天有时间记录一下,分享给需要的朋友. 实现思路:轮播图其实就是一个定时器,所以我们只需要定时改变当前位置的图片即可.根据这一点实现起来就很简单了,下面直接上代码. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

原生js实现轮播图

很多网站上都有轮播图,使用起来也比较炫酷,但找到一个系统的介绍却很难,这里做一个简单的介绍. 原理:将一些列的图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一: 建立html基本布局,如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <

js实现轮播图效果

原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <div class="container"> <div clas

使用原生js实现轮播图效果

知乎原文 我的博客 微信公众号这几天在逛网站的时候,发现很多网站都有轮播图这个效果,所以我就仿照小米的官网用原生js写了一个轮播图效果,希望大家喜欢.这是我发布在github上的最后实现的效果:https://heternally.github.io/... 下面我简单跟大家说一下我实现该效果的过程,如果有什么错误的地方,欢迎大家说出来,以方便大家互相学习. 我相信前面简单的html+css大家应该都会,我这里就不说了,简单给大家展示一下代码: HTML部分 <div id="wrap&q