使用Responsiveslides.js给你的博客加个幻灯片[Options Framework]

放寒假了一直没更新原因太多不解释,要不是西枫里大佬催更也估计没这篇文章了

这个是我在写Vmeng主题中写到的代码,毕竟幻灯片可以把一些重要的文章使得引人注目,所以还是蛮重要的。

responsiveslides.js这个jQuery幻灯片方案很轻仅有1k,引入之类的,很简单官网就有(废话)。英语不好请度娘。

注意:

  1. jQurey应该在该js前引入
  2. CSS可以加到style.css
  3. js建议丢底部

我的主题(Begin和正在开发的Vmeng)用的是Options Framework作为后台框架,写起来简单。美中不足的是没有选择数字的,所以得转换一下变量类型(字符串->整数)下面会解释emmm。

先上Options Framework代码

		//幻灯设置

	$options[] = array(
		'name' => '幻灯设置',
		'type' => 'heading'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '幻灯显示篇数',
		'id' => 'slider_n',
		'std' => '0',
		'class' => 'mini',
		'type' => 'text'
	);
	
	$options[] = array(
		'id' => 'clear'
	);
	
	$options[] = array(
		'name' => '幻灯一',
		'desc' => '幻灯一图片',
		'id' => 'slider_img_1',
        "std" => "",
		'type' => 'upload'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '幻灯一链接',
		'id' => 'slider_link_1',
		'std' => '',
		'type' => 'text'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '是否blank[新标签打开]',
		'id' => 'slider_blank_1',
		'std' => '0',
		'type' => 'checkbox'
	);
	
	$options[] = array(
		'id' => 'clear'
	);
	
	$options[] = array(
		'name' => '幻灯二',
		'desc' => '幻灯二图片',
		'id' => 'slider_img_2',
        "std" => "",
		'type' => 'upload'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '幻灯二链接',
		'id' => 'slider_link_2',
		'std' => '',
		'type' => 'text'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '是否blank[新标签打开]',
		'id' => 'slider_blank_2',
		'std' => '0',
		'type' => 'checkbox'
	);

	$options[] = array(
		'id' => 'clear'
	);
	
	$options[] = array(
		'name' => '幻灯三',
		'desc' => '幻灯三图片',
		'id' => 'slider_img_3',
        "std" => "",
		'type' => 'upload'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '幻灯三链接',
		'id' => 'slider_link_3',
		'std' => '',
		'type' => 'text'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '是否blank[新标签打开]',
		'id' => 'slider_blank_3',
		'std' => '0',
		'type' => 'checkbox'
	);

	$options[] = array(
		'id' => 'clear'
	);
	
	$options[] = array(
		'name' => '幻灯四',
		'desc' => '幻灯四图片',
		'id' => 'slider_img_4',
        "std" => "",
		'type' => 'upload'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '幻灯四链接',
		'id' => 'slider_link_4',
		'std' => '',
		'type' => 'text'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '是否blank[新标签打开]',
		'id' => 'slider_blank_4',
		'std' => '0',
		'type' => 'checkbox'
	);

	$options[] = array(
		'id' => 'clear'
	);
	
	$options[] = array(
		'name' => '幻灯五',
		'desc' => '幻灯五图片',
		'id' => 'slider_img_5',
        "std" => "",
		'type' => 'upload'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '幻灯五链接',
		'id' => 'slider_link_5',
		'std' => '',
		'type' => 'text'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '是否blank[新标签打开]',
		'id' => 'slider_blank_5',
		'std' => '0',
		'type' => 'checkbox'
	);

代码有点多主要是我给重复了五遍,本来想着设置多少就多少后来想了想还是算了(嫌麻烦

如果想加更多幻灯也不麻烦在下面加入这样的代码把1和一替换成你想要的数字就可以了

	$options[] = array(
		'id' => 'clear'
	);
	
	$options[] = array(
		'name' => '幻灯一',
		'desc' => '幻灯一图片',
		'id' => 'slider_img_1',
        "std" => "",
		'type' => 'upload'
	);
	
	$options[] = array(
		'name' => '',
		'desc' => '幻灯一链接',
		'id' => 'slider_link_1',
		'std' => '',
		'type' => 'text'
	);

前台代码

加哪不好说,一般是首页,大小也得自己定。在合适的地方插入

		<?php
	$slider_n = vm_get_option('slider_n');
	$slider_n_int = (int)$slider_n;
	if ($slider_n_int !==0 && $slider_n_int > 0) { ?>
	<ul id="slides" class="rslides">
	       <?php for ($n = 1; $n <= $slider_n_int; $n++) { 
			      $n_string = (string)$n;
		     	?>				  
                <li>
				<?php if(vm_get_option('slider_link_'.$n_string) !== '' ) { ?>
					 <a  href="<?php echo vm_get_option('slider_link_'.$n_string); ?>" <?php if(vm_get_option('slider_blank_'.$n_string)) { ?>target="_blank"<?php } ?>>
					   <?php } ?>
				<img src="<?php echo vm_get_option('slider_img_'.$n_string); ?>" alt="slides">
			    <?php if(vm_get_option('slider_link_'.$n_string) !== '' ) { ?>
					  </a>
				<?php } ?>
				</li>
			<?php } ?>
	</ul>
<?php } ?>

vm_get_option是Vmeng主题的函数,换成自己的比如默认的foo_get_option

到这里已经OK了,现在需要做的就是根据个人喜好修改CSS啦

文章不长字不多,就是代码有点长....不水了

weinxin
我的微信
这是我的微信,扫一扫加我好友
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:24   其中:访客  16   博主  8

    • avatar Parkmimi 3
      回复 2018年2月9日 上午9:04  沙发

      膜拜dalao :neutral:

        • avatar 狂放 博主
          回复 2018年2月9日 下午1:12  1层

          @Parkmimi 什么嘛,明明是萌新使出浑身力气写的垃圾代码

        • avatar 跨境电商之家 0
          回复 2018年2月9日 上午10:00  板凳

          给力!不错的文章

          • avatar 西枫里博客 3
            回复 2018年2月9日 上午10:07  地板

            捏哈哈哈,终于更了。直接重复5遍,你厉害~

            • avatar zaera 2
              回复 2018年2月9日 上午10:45  4楼

              定义个函数,加个循环啊,精简多少?

                • avatar 狂放 博主
                  回复 2018年2月9日 下午12:44  1层

                  @zaera 幻灯片多肯定精简的多,主要是方便维护,一堆if会头晕

                • avatar 乌鸦 1
                  回复 2018年2月9日 下午2:19  5楼

                  评论框那个好

                    • avatar 狂放 博主
                      回复 2018年2月9日 下午5:59  1层

                      @乌鸦 大佬想表达什么?我竟无法理解

                    • avatar 懿古今 4
                      回复 2018年2月9日 下午5:31  6楼

                      幻灯片这种功能,有时候挺有用的,不过没有好像也无所谓

                        • avatar 狂放 博主
                          回复 2018年2月9日 下午5:59  1层

                          @懿古今 是啊,看情况啦,有的情况下挺不错的

                        • avatar 明月清风 2
                          回复 2018年2月9日 下午11:19  7楼

                          貌似还没有理清思路耶,

                          • avatar xema 3
                            回复 2018年2月10日 上午11:45  8楼

                            我是属于那种代码量越少越觉得舒服的

                              • avatar 狂放 博主
                                回复 2018年2月10日 下午9:39  1层

                                @xema 至少不会头疼哈哈

                                • avatar c0sMx 3
                                  回复 2018年2月10日 下午10:29  1层

                                  @xema 大佬博客炸了

                                    • avatar xema 3
                                      回复 2018年2月13日 下午9:56  2层

                                      @c0sMx 好啦

                                  • avatar 菜鸟博客 2
                                    回复 2018年2月18日 下午12:45  9楼

                                    没贴出效果吗?

                                    • avatar 免费新大陆 0
                                      回复 2018年2月19日 下午11:46  10楼

                                      可以的,前段时间整了一个

                                      • avatar Koolight 2
                                        回复 2018年2月26日 下午11:41  11楼

                                        膜拜膜拜,爱折腾的主啊!

                                        • avatar 银色月航 2
                                          回复 2018年3月2日 上午7:42  12楼

                                          加载速度这块~~

                                          • avatar 大事记 1
                                            回复 2018年3月4日 下午1:57  13楼

                                            这个添加之后,弱弱文博主是自适应的么。这个评论框打字在颤抖,啊啊啊啊…….

                                            • avatar 推拿按摩培训教程大全 0
                                              回复 2018年5月6日 上午9:13  14楼

                                              博主有创意,虽然我不懂代码,但我觉得博主是高手,只有膜拜