简洁好用的jquery 焦点图插件:Basic jQuery Slider

官网地址:http://www.basic-slider.com/

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Basic jQuery Slider</title>
    <link rel="stylesheet" href="bjqs.css">
    <!-- load jQuery and the plugin -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bjqs-1.3.min.js"></script>
    <script class="secret-source">
        jQuery(document).ready(function($)
		{
          $('#banner-slide').bjqs({
            animtype      : 'slide', //动画类型:slide,fade
            height        : 320, //显示图片控件的高度,px
            width         : 620, //显示图片控件的宽度,px
            responsive    : true, //是否立即响应
            randomstart   : true, //是否随机选择起始图片			

			// 动画设置
			animduration : 450, // 动画持续时间
			animspeed : 4000, // 动画延迟
			automatic : true, // 是否自动切换

			// 控件设置
			showcontrols : true, // 是否在图上显示next,prev按钮
			centercontrols : true, // 上述控件是否要垂直居中
			nexttext : 'Next', // “下一页”功能按钮文字
			prevtext : 'Prev', // “上一页”功能按钮文字
			showmarkers : true, // 是否在图下面显示带有图序号的切换按钮
			centermarkers : true, // 上述按钮是否水平居中

			// 交互设置
			keyboardnav : true, // 是否启用键盘操作
			hoverpause : true, // 鼠标悬停时是否停止

          }); 

		});
      </script>

  </head>

  <body>

    <div id="container">
       <div id="banner-slide">
        <ul class="bjqs">
          <li><img src="img/banner01.jpg" title="Automatically generated caption"></li>
          <li><img src="img/banner02.jpg" title="Automatically generated caption"></li>
          <li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
        </ul>
      </div>
   </div>
  </body>
</html>

时间: 2024-11-03 22:42:47

简洁好用的jquery 焦点图插件:Basic jQuery Slider的相关文章

分享10款常用的jQuery焦点图插件

爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图插件,大部分对开发者来说基本上可以直接拿来使用.今天我们要分享一款可以自动播放动画的jQuery焦点图插件,它在切换图片的时候可以播放对应图片的各种动画效果. 在线预览   源码下载 2.jQuery可自动播放动画的焦点图插件 这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又

分享8个常用的jQuery焦点图插件

现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微修改就可以使用.本文精选了8款比较强大的jQuery焦点图插件,希望对读者有所帮助. 1.jQuery动画焦点图 可自动播放图片 这是一款最基础的jQuery焦点图插件,包括切换的动画也是最基本的淡入淡出动画特效,但是它很轻巧,而且也比较容易扩展,因此也推荐使用. 在线预览   源码下载 2.jQu

超简洁的jQuery内容滑动插件 - Basic jQuery Slider

摘要 内容滑动插件能让你在有限的空间中展示更多的内容,给力技术之前也推荐过好几个这类插件,今天要推荐的也是一个内容滑动插件 - Basic jQuery Slider . Basic jQuery Slider 是一个轻量级的很简洁的 jQuery 内容滑动插件,经压缩后也仅有4.6kb大 内容滑动插件能让你在有限的空间中展示更多的内容,给力技术之前也推荐过好几个这类插件,今天要推荐的也是一个内容滑动插件 - Basic jQuery Slider. Basic jQuery Slider 是一

一款基于jQuery的图片下滑切换焦点图插件

之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错. 在线预览   源码下载 下面是实现这款jQuery焦点图的过程和代码. HTML代码: <div class="slider-wrap col-width"> <

10款华丽最新jQuery焦点图动画插件

1.jQuery带对比功能的焦点图插件 我们在这里已经分享过很多炫酷的jQuery焦点图插件,大部分焦点图插件都比较实用.今天要分享的这款有几个特点:第一是焦点图带有缩略图预览功能,第二是焦点图中的图片带有和原图进行对比的功能,并且这款jQuery焦点图还支持定时图片切换,非常实用. 在线演示一 在线演示二 源码下载 2.Devrama Slider - 支持任意 HTML 的内容滑块 Devrama Slider 是一个图片滑块,支持很多特色功能.除了支持图片滑动,其它的 HTML 内容也支持

一款基于的jQuery仿苹果样式焦点图插件

这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用. 在线预览   源码下载 接下来我们一起分享一下实现这款苹果焦点图的过程及源码. HTML代码: <div id="gallery"> <div id="slides" style="wi

一款基于jQuery的图片分组切换焦点图插件

这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用. 在线预览   源码下载 实现的代码. html代码: <div class="device"> <h2> <a href="javascript:;" class="pre">上一组</a><

基于jQuery的宽屏可左右切换的焦点图插件

之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="Big_Slide_box"> <div id="Big_Slide"> <ul> <li style="background: #E81216;" id

基于jQuery的美食时间轴焦点图插件

这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预览   源码下载 实现的代码. html代码: <div class="main_w"> <div class="index_zzw" id="index_zzw"> <div class="index_zzw