基于jQuery实现的幻灯图片切换,获取个性二维码的实例

虽然现在不联网的情况很少,但在本机上搭建一份Bootstrap离线文档以备不时之需也是很有必要的。

一、功能介绍

话不多说,直接附上源码,仅供大家参考

废话不多说,如果你也有同样的想法,可以参照以下步骤来做:

在进行推广时,我们可以告诉对方,我们的微信公众账号是什么,客户可以去搜索,然后关注。二维码给我们提供了极大的便捷,只要简单一扫描,即可关注。

// JavaScript Document
;(function($){
 $.fn.extend({
 "zj_ppt":function(value){ 
 //默认参数定义
 var $this = $(this);
 value = $.extend({
 "time":2000, //间隔变化动画时间
 "con":0,
 "sto":true,
 "count":"count", //切换小图的父级class名字
 "src":"src", //切换小图片路径
 "src_cur":"src_cur" //当前切换小图片路径
 },value);
 //图片切换函数
 function autopic(){
 $("li",$this[0]).hide();
 $("li:eq("+value.con+")",$this[0]).show();
 $(value.count).find("ul li img").attr("src",value.src);
 $(value.count).find("ul li img:eq("+value.con+")").attr("src",value.src_cur);
 if(value.con>$("li",$this[0]).length-2){
 value.con = 0; 
 }else{
 value.con += 1;
 }
 } 
 //每间隔多少时间执行一次图片切换
 function sett(){
 if(value.sto){autopic()};
 setTimeout(sett,value.time);
 } 
 //鼠标悬停时切换图片,并停止自动切换
 $(value.count).find("ul li").hover(function(){
 var _index = $(this).index();
 value.con = _index;
 value.sto = false;
 autopic();
 },function(){
 var _index = $(this).index();
 value.sto = true;
 value.con = _index;
 }); 
 sett(); 
 //反回原对像,以便连缀JQuery的其它方法
 return $this;
 }
 });
})(jQuery);

若你还没有安装过nodejs和Ruby,请先下载安装后再开始下面的步骤。

如果已经关注过,立刻跳入对话画面。在我们进行推广时,不再是简陋的文字,可以是一个有个性的二维码,想必会很生动。

以上是插件部分代码;

去Bootstrap官网下载源码。

微信对二维码提供了很好的支持,而且还可以根据需要生成不同场景的二维码。下面我们将介绍如何获取和使用二维码。

下面可以下载demo

图片 1

注意:限服务号,且进行了微信认证,费用300

demo下载地址:

下载完毕之后解压到任意位置,比如D:\。

图片 2

以上就是本文的全部内容,希望对大家有所帮助,谢谢对脚本之家的支持!

从terminal进入源码目录,输入命令:

二、相关接口

您可能感兴趣的文章:

  • jquery实现图片切换代码
  • 完美JQuery图片切换效果的简单实现
  • 基于jquery实现左右按钮点击的图片切换效果
  • 基于jquery实现鼠标滚轮驱动的图片切换效果
  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
  • jQuery插件Slider
    Revolution实现响应动画滑动图片切换效果
  • jquery简单实现图片切换效果的方法
  • jquery图片切换实例分析
  • jQuery插件slick实现响应式移动端幻灯片图片切换特效
  • jquery简单图片切换显示效果实现方法
  • 完美兼容各大浏览器的jQuery插件实现图片切换特效

npm install

为了满足用户渠道推广分析的需要,公众平台提供了生成带参数二维码的接口。使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送。

图片 3

目前有2种类型的二维码,分别是临时二维码和永久二维码,前者有过期时间,最大为1800秒,但能够生成较多数量,后者无过期时间,数量较少(目前参数只支持1–1000)。两种二维码分别适用于帐号绑定、用户来源统计等场景。

接着从terminal输入下面的命令来安装Ruby的一个gem:Bundler(官网:http://bundler.io)

用户扫描带场景值二维码时,可能推送以下两种事件:

gem install bundler

1.如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事件推送给开发者。

图片 4

2.如果用户已经关注公众号,在用户扫描后会自动进入会话,微信也会将带场景值扫描事件推送给开发者。

如果你和我一样在安装bundler时碰到SSL错误,
请先运行下面的命令再重新安装bundler:

获取带参数的二维码的过程包括两步,首先创建二维码ticket,然后凭借ticket到指定URL换取二维码。

gem sources --remove https://rubygems.org/
gem sources --add http://rubygems.org/

创建二维码ticket

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注