写jquery插件【轮播图】历程

轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的。感兴趣的可以访问我的轮播图的线上地址:轮播图

首先,轮播图插件其实并不是我第一次写,之前也写过,不过那时候是按照别人的思路写下来的,算起来大概有一年了,这次又一次开始轮播图是因为拜读了《单页面Web应用 JavaScript从前端到后端》的这本书的1-4章,我开始跃跃欲试的想把它用到自己的代码中,书本中前四章的思想是将js模块化,我就跟着作者的代码思路以及代码习惯先尝试着做了个轮播图,发现作者的模块化思想非常好,时间长了,养成这种思考问题的习惯会在工作中事半功倍。其实就像一个人的生活习惯,比较讲究的人会按照事物的属性给分门别类,并且将事物放在指定的位置,这样到时候找起来也会比较方便快捷,不仅是关系到找东西,如果是有相同属性的东西进来的时候,也就顺理成章的放到相同属性的那里去,这样管理起来也非常方便。

插件开始

刚开始的时候遇到了问题,作者是从单个页面直接入手的,我只想写个插件,那不能跟作者似的单独放在一个页面中吧???

首先,我起一个跟功能相似的名字FocusMap,然后直接就将他作为相应的插件,不会再深入的加入详细的模块了,现在FocusMap就是轮播图插件;里边的变量、函数都是跟轮播图的功能相关联的。

其次,设计插件的思路:

  1. 轮播图根据用户设定的图片,在轮播的区域内显示相应的图片
  2. 轮播图有展示后一张的功能
  3. 轮播图有展示前一张的功能
  4. 轮播图有轮播的动画模式
  5. 点击页码可以直达想要的找的图片那里

恩,基本功能就这些,然后开始编写代码
附线框图一张:

编写代码中

代码编写中遇到问题是在正常不过的,恩,我的也出现了不少问题,首先实现的是自动轮播,好,自动轮播实现好了,接着实现点击上一张的功能吧,发现自动轮播好像哪里写的不对劲,哦my噶,检查检查,看哪里想的不对劲,看看能不能改,不能改重新来,恩,是能改的,好事,给老公一看,你这里好多重复的,好多dom改动,看看能不能整合到一起,代码看看能不能简化,大大的白眼,不过还是听从了建议,适当的整理了一遍,恩,比以前有些好看了。

尾声

东西快做完了,但是bug也随之而来,此时的我的在线作品还是有2个bug的,大写的鄙视,大家不要怪我喽,说是还没有完工么!!!不过会尽快做完,以一个好的姿态来面对大家,还有我!

2016.12.25更新

bug已经修改完毕,线上的效果是正确的,如果有人发现bug,请批评指正,多谢!!



2016.12.26更新

1、在原来的基础上改动,使其做为jquery的插件形式,调用形式:

$(‘.focusMap‘).FocusMap({
    imgArray : imgArray,     //页面中需要输入的图片信息
    animate_mode : animate_mode //定义页面中的滑动样式 slide滑动,fade渐隐渐现
 })

重新起一个新页面,算是2.0的版本吧,
有兴趣的同学可以戳这里:yangmengya的轮播图插件

2、优化代码,将重复的代码聚合到一起,减少代码重复

3、用户可以通过自定义来设置图片滑动的时间间隔,和渐隐渐现的时间间隔,例如:

  $(‘.focusMap‘).FocusMap({
          imgArray : [
            ‘image/slide_01.png‘,
            ‘image/slide_02.png‘,
            ‘image/slide_03.png‘
          ],
          animate_mode : ‘slide‘,
          change_time : 3000, //图片变换的时间间隔
          slide_time : 500, //slide 动画时间间隔
          fadein_time : 800, //fade渐现的时间
          fadeout_time : 100, //fade渐隐的时间
        })

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12568521.html

时间: 2024-08-27 23:50:26

写jquery插件【轮播图】历程的相关文章

自己定义jquery插件轮播图

轮播图-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

jQuery实现轮播图

我用的jQuery库jquery-3.2.1.js可以在官网下载:http://jquery.com/download/ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

84JS插件:jQuery版轮播图

一.代码分两个部分:1.HTML部分,根据注释处理即可:2.基于jQuery的play.js插件部分,这里为了展示效果,直接写在<html></html>下的<script></script>标签里.3.效果包含:自动轮播,焦点对齐,前进后退,直走不返,鼠标进入.轮播停止且前进后退图标出现,鼠标离开.轮播重启且前进后退图标隐藏.4.这里可以预览效果.二.轮播图原理说明:(1)轮播图(假设)有7张图片,“一”字排列,把第1张图片复制一次,放到第8张的位置,这样

前端自制Jquery插件————轮播

昨天,自己心血来潮,弄了一个轮播图的插件,说来你们可能不信,这是我人生第一个插件,好,那我直接讲讲我的思路好了. 首先,我以开发者的角度来看,一个好的插件的使用方式应该简单可靠,因为我做的是Jquery插件,所以最好的使用方式我觉得应该是,$(DOM).carousel(config).其中DOM节点,用于填充轮播图片的地方,config是配置信息,包括是否循环,是否自动播放,播放时间间隔,图片地址等.因为时间短,我也只是简单实现了主要的功能. 我第一件事情做的就是布局,没错,我是先把CSS样式

告别组件之教你使用原生js和css写移动端轮播图

在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. 老规矩,首先看一下最终效果,这个最终可以实现定时自动播放,触摸滑动,手动修改下面横条效果等功能. 项目中使用到的HTML代码如下 <div class="banner"> <ul class="clearfix"> <li><

用jq代码写出一个轮播图。

由于项目的需要,需要写出一个图片预览的功能,在预览的同时如果预览的图片大于1,还要能够轮播,.所以,这就是一个从后台取图片的路径,然后轮播的一个功能.  当图片数为1时,不显示左右箭头以及轮播圆点. 下面是一个gif的demo: 首先,我们理清了实现的方式.我们先做出一个轮播图的效果. DEMO地址:https://codepen.io/Dios/pen/dzLMVJ 然后我们再通过一些js判断达到图中的效果.

使用jQuery实现轮播图

一共6张图片,每1.5m自动切换播放图片,鼠标在图片内则停止自动播放.可通过底部列表手动播放图片,也可通过图片两侧按钮手动点击切换图片.效果图如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <script src="https://libs.baidu.co

jQuery无缝轮播图思路详解-唯品会

效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap"> <!--大盒子上部分轮播图--> <div class="wrapUp"> <ul> <li class="cur"><a href="#"><img src="i

Jquery 实现轮播图

jq 轮播图 function banner_show(){ var left_btn = $("#banner_tag_left"); //获取左侧单击按钮 var right_btn = $("#banner_tag_right"); //获取右侧点击按钮 var Owidth = $("#banner ul li").width(); //获取单个图片宽度 var Oindex = $("#banner ul li");