由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑。最近开发了一款基于jquery的fadeTo方法的轮播图插件,下面给大家介绍具体的思路逻辑:

整体思路:

  fadeTo方法就是在指定时间内将某个选定元素的透明度改变来达到某个元素隐藏与显示的效果,借助这个方法,刚开始我们只需要让第一张图片的透明度为1,其他的都为0,这样就只能看到一张图片,建立图片索引,在轮播的时候只需要让索引自增,当索引等于最大值时,将索引值置为1就有可以重新开始轮播,实现循环轮播;

具体逻辑:

  1、在html页面中给定的div中加载要轮播的图片,向前 < 和向后 > 的按钮;

  2、在HTML页面中给定的div中加载图片索引按钮(小圆圈),样式自己定义;

  3、建立图片索引变量index,赋初值为1;

  4、建立图片显示函数showImg(),用fadeTo实现指定时间内图片透明度的改变,实现轮播;

  5、建立向前 < 按钮方法,实现图片切换;

  6、建立向后 > 按钮方法,实现图片切换;

  7、建立图片索引按钮,实现点击索引按钮跳转指定图片;

说了这么多,大家可能还是一脸懵逼,光说不练假把式,这就给大家附上代码,方便大家查看;

  

 /*
该轮播图插件是基于jquery开发的,利用jquery的fadeTo()方法实现图片的轮播
我们只需要图片和小圆圈按钮的索引一一对应起来就可以咯
*/
var hbt_imgList = $(".hbt-con");//获取图像列表<li>对象
var hbt_littelBtn = $("#hbt-goTab a");//获取图像下边按钮对象
var hbt_contain = $(".hbt-tab")//获取整个图像容器对象,便于书写鼠标移入停止轮播移除继续轮播
var hbt_index = 1;//图像轮播索引,即轮播第几章图片
var hbt_prev = $("#hbt-prev");//获取图片向前轮播按钮
var hbt_next = $("#hbt-next");//获取图片向后轮播按钮
var timer;//定时器变量
var hbt_length = $("#hbt-goTab a").length;//获取下面小按钮的数量,对应索引 $(document).ready(function(){
/*hbt_contain.mouseover(function(event) {
stop();
});
hbt_contain.mouseout(function(event) {
play();
});*/
hbt_contain.on({
mouseover:function(){//鼠标移入停止轮播
stop();
},
mouseout:function(){//鼠标移出开始轮播
play();
}
});
hbt_prev.on("click",function(){//向前按钮点击处理事件
hbt_index -= 1;
if(hbt_index <){//索引超出最小值将其值设置为8
hbt_index = 8;
}
hbtShowImg();
hbtShowBtn();
});
hbt_next.on("click",function(){//向后按钮点击处理事件
hbt_index += 1;
if(hbt_index > 8){//索引超出最大值将其值设置为1
hbt_index = 1;
}
hbtShowImg();
hbtShowBtn();
});
for (var i = 0; i < hbt_length; i++) { //循环绑定下面按钮的点击事情
(function (i) {
hbt_littelBtn[i].onclick = function () {
hbt_index = i + 1;
hbtShowImg();
hbtShowBtn();
}
})(i)
}
}); function play(){//开始轮播
timer = setInterval(function(){
hbt_index += 1;
if(hbt_index > hbt_length){//索引超出最大值将其值设置为1
hbt_index = 1;
}
hbtShowImg();
hbtShowBtn();
},4000)
} function stop(){//停止轮播
clearInterval(timer);
} function hbtShowImg(){//图片轮播梳理
for (var i = 0; i < hbt_length; i++) {
//注意,list索引是从0开始的,所以第一张图片和第一个按钮对应索引是0二不是1
if(hbt_imgList.eq(i).css("opacity") == 1){
hbt_imgList.eq(i).fadeTo(2000,0);
}
}
hbt_imgList.eq(hbt_index - 1).fadeTo(2000,1);
} function hbtShowBtn(){//小按钮切换梳理
for (var i = 0; i < hbt_length; i++) {
if(hbt_littelBtn.eq(i).hasClass('itemActive')){
hbt_littelBtn.eq(i).removeClass('itemActive');
hbt_littelBtn.eq(i).addClass('item');
}
}
hbt_littelBtn.eq(hbt_index - 1).addClass('itemActive');
}
play();

carousel

  这边给大家的只是js的相关代码,有需要整个插件代码的,请点击这里到我的github下载相关代码进行查看;

  最后要给大家提醒的就是引用的时候一定要先引入jquery哦;

jquery的fadeTo方法的淡入淡出轮播图插件的更多相关文章

  1. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  2. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  3. jquery淡入淡出轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. jq交叉淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue渐变淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js中用面向对象的思想——淡入淡出轮播图

    首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...

  7. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  8. 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

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

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

随机推荐

  1. [日常] Linux使用diff来比较目录

    Linux diff比较两个目录的不同: diff dir1 dir2  -urNaq -a  --text  Treat all files as text. -u  -U NUM  --unifi ...

  2. python3中的新式类mro查看和C3算法原理

    两个公式 L(object) = [object] L(子类(父类1, 父类2)) = [子类] + merge(L(父类1), L(父类2) , [父类1, 父类2])注意 + 代表合并列表 mer ...

  3. marquee 标签的使用介绍

    marquee 实现滚动效果(创建滚动的文本字幕) 1.marquee 支持的属性: (1).behavior设置滚动方式: <marquee behavior="alternate& ...

  4. Nginx的文件夹的别名设计&drupal简洁url

    参考:nginx 官方drupal 配置 - Drupal | NGINX 环境:ubuntu14,Nginx1.12, MariaDB5.5.56,PHP7.1.7 需求:1.不同的网站,不要用文件 ...

  5. PHP的new self() 与new static()

    参考链接:[PHP中new static()与new self()的区别异同分析],[PHP中new self()和new static()的区别探究],[PHP中static和self的区别] 要点 ...

  6. python之函数的参数

    1.位置参数: 例如计算一个整数的平方: def power(x) return x * x 显然参数x就是一个位置参数,如果要是计算5*5*5..............*5 ,这个函数就太麻烦了, ...

  7. Android Studio查看签名文件sha1和MD5的方法

    Android在生成了应用签名文件后,如果我们想要查看签名文件的sha1和md5,该怎么操作呢??下面我们来看看. 把android studio界面左下角的Terminal终端窗口打开,进入JDK的 ...

  8. Metinfo 5.x 管理员密码重置漏洞

    前言 在先知看到了一篇分析该漏洞的文章,复现分析一下,漏洞还是比较有趣的. 正文 首先知道是 管理员密码重置时出现的问题,于是抓包,定位到相关的php文件. 首先包含了 ../include/comm ...

  9. 更新oracle数据库表如何实现主键自增长

     在数据库中实现主键自动增长有利于我们做数据插入操作,在SQL SERVER上创建表时可以在int类型的字段后加上identity(1,1),该字段就会从1开始,按照+1的方式自增,将这个字段设置 ...

  10. Android MVP开发模式及Retrofit + RxJava封装

    代码已上传到Github,因为接口都是模拟无法进行测试,明白大概的逻辑就行了! 欢迎浏览我的博客--https://pushy.site 1. MVP模式 1.1 介绍 如果熟悉MVP模式架构的话,对 ...