jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果

一、BxCarousel实现图片滚动切换

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件，特征主要有：

◆ 可以指定显示的元素总数
◆ 可以指定每次滚动的元素个数
◆ 自动播放模式
◆ 前一张/后一张按钮控制图片流动

参数含义：

display_num：显示元素的数量，几张图片
move：单击左右控制键时，移动的元素个数，此处为移动2张图片
prev_image：上一元素按钮图片
next_image：下一元素按钮图片
margin：图片之间的间隙，一般设为10px
auto:自动滚动效果
controls：是否显示左右控制按钮，此处为false,表示不显示左右控制按钮
auto_hover：鼠标悬停到轮播区域时，是否停止图片轮播
BxCarousel使用和配置

首先HTML代码需要符合以下格式：

<ul><li>first piece of content</li><li>second piece of content</li><li>third piece of content</li><li>fourth piece of content</li><li>bxCarousel can accept an unlimited number of elements</li>
</ul>

jQuery代码需要符合以下格式：

$(document).ready(function(){$('ul').bxCarousel({display_num: 4,       // number of elements to be visiblemove: 4,              // number of elements to the shift the slidesspeed: 500,           // number in milliseconds it takes to finish slide animationmargin:0,             // right margin to be applied to each <li> element (in pixels, although do not include "px")auto: false,          // automatically play slides without a user clickauto_interval: 2000,  // the amount of time in milliseconds between each auto animationauto_dir: 'next',     // direction of auto slideshow (options: 'next', 'prev')auto_hover: false,    // determines if the slideshow will stop when user hovers over slideshownext_text: 'next',    // text to be used for the 'next' controlnext_image: '',       // image to be used for the 'next' controlprev_text: 'prev',    // text to be used for the 'prev' controlprev_image: '',       // image to be used for the 'prev' controlcontrols: true        // determines if controls will be displayed});});

div.bx_container和div.bx_wrap等html元素是js生成加上的，在使用bxCarousel插件时，为了达到视觉美感，要记得为div.bx_container和div.bx_wrap及其内部子元素设定需要的CSS Style。

还有注意的是：

bxCarousel是个无限循环机制，不停的点击next按钮看看html发生了什么变化！！
bxCarousel不只针对图片，对其他任何html元素均起作用。
如果开启auto属性，注意一定要保证speed属性值小于持续时间。

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
<title></title>
<style type="text/css">
/*全局样式*/
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}
a {color: #424242;text-decoration: none;}
ul,li,ol{padding:0;margin:0;list-style:none;}
img{border:0;}
h1,h2{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}/*类灯箱效果videobox*/
.pic, .vd{width:200px;height:200px; margin:0 auto;}
.pic{background:url("http://i0.sinaimg.cn/home/2013/0513/U2727P30DT20130513082202.jpg") no-repeat scroll 0  0 transparent;}
.vd{background:url("http://i0.sinaimg.cn/home/2013/0512/U1345P30DT20130512114119.jpg") no-repeat scroll 0  0 transparent;}
.pic a, .vd a{display:block;width:200px;height:200px;   text-align:center;margin:0 auto;}
.wrapper,.nav,.main,.imgcollc ,.footer{width:910px;margin:0 auto;text-align:center;}/*轮播图*/
#focus{width:825px;height:350px;overflow:hidden;position:relative;margin:0 auto;}
#focus ul{height:380px;position:absolute;}
#focus ul li{float:left;width:825px;height:350px;overflow:hidden;position:relative;background:#000;}
#focus ul li div{position:absolute;overflow:hidden;}
#focus .btnBg{position:absolute;width:825px;height:20px;left:0;bottom:0;background:#000;}
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
#focus .btn span.on{background:#fff;}
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}
#focus .hidden{display:none;}
/*图片滚动切换效果*/
.bx_wrap {margin-left: 30px; margin-top:10px;}
.bx_wrap ul img { border: 2px solid #ddd; }
.bx_wrap ul li{text-align:center;float:left;width:140px;height:119px;overflow:hidden;}
.bx_wrap ul li a:hover{text-decoration:none; color:#f30;}
/*如果要使用方向按钮导航，则需要设置.bx_wrap a.prev和.bx_wrap a.next的样式。*/
.bx_wrap a.prev {width:20px;height:24px;line-height:24px;outline-style:none;outline-width: 0; position:absolute; top:45px; left:5px; text-indent:-999em; background: url(img/arr_left.gif)  no-repeat;}
.bx_wrap a.next {width:20px;height:24px;line-height:24px; left:623px;position: absolute; top:45px; text-indent:-999em; background:url('img/arr_right.gif') no-repeat;}
.demo {width: 650px;height: 134px;margin: 40px auto;position: relative;border: 1px solid #d3d3d3;overflow:hidden;
}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {var sWidth = jQuery("#focus").width(); //获取焦点图的宽度（显示面积）var len = jQuery("#focus ul li").length; //获取焦点图个数var index = 0;var picTimer;//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮var btn = "<div class='btnBg'></div><div class='btn'>";for(var i=0; i < len; i++) {btn += "<span></span>";}btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";jQuery("#focus").append(btn);jQuery("#focus .btnBg").css("opacity",0.5);//为小按钮添加鼠标滑入事件，以显示相应的内容jQuery("#focus .btn span").css("opacity",0.4).mouseover(function() {index = jQuery("#focus .btn span").index(this);showPics(index);}).eq(0).trigger("mouseover");//上一页、下一页按钮透明度处理//*jQuery("#focus .preNext").css("opacity",0.2).hover(function() {jQuery(this).stop(true,false).animate({"opacity":"0.5"},300);},function() {jQuery(this).stop(true,false).animate({"opacity":"0.2"},300);});//上一页按钮jQuery("#focus .pre").click(function() {index -= 1;if(index == -1) {index = len - 1;}showPics(index);});//下一页按钮jQuery("#focus .next").click(function() {index += 1;if(index == len) {index = 0;}showPics(index);});//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度jQuery("#focus ul").css("width",sWidth * (len));//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放jQuery("#focus").hover(function() {jQuery("#focus .preNext").removeClass("hidden");clearInterval(picTimer);},function() {jQuery("#focus .preNext").addClass("hidden");picTimer = setInterval(function() {showPics(index);index++;if(index == len) {index = 0;}},4000); //此4000代表自动播放的间隔，单位：毫秒}).trigger("mouseleave");//显示图片函数，根据接收的index值显示相应的内容function showPics(index) { //普通切换var nowLeft = -index*sWidth; //根据index值计算ul元素的left值jQuery("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果jQuery("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果}
});
</script><script type="text/javascript" src="js/bxCarousel.js"></script>
<script type="text/javascript">
jQuery(function(){jQuery('#demo1').bxCarousel({//bxCarousel滚动效果display_num: 4, move: 1, auto: true, controls: false, //此处为false,表示不显示左右箭头控制按钮margin: 10,auto_hover: true //鼠标悬停到轮播区域时，是否停止图片轮播});jQuery('#demo2').bxCarousel({display_num: 4, move: 4,margin: 10 });
});
</script><script type="text/javascript" src="./video/js/mootools.js"></script>
<script type="text/javascript" src="./video/js/swfobject.js"></script>
<script type="text/javascript" src="./video/js/videobox.js"></script>
<link rel="stylesheet" type="text/css" href="./video/css/videobox.css" >
</head>
<body>
<div class="nav"></div>
<div class="wrapper"><h1>jquery图片滚动轮播图效果 仿QQ商城带左右按钮控制焦点图片切换滚动</h1><div id="focus"><ul><li><a href="#" target="_blank"><img src="img/001.jpg" alt="类似QQ商城焦点图效果" /></a></li><li><a href="#" target="_blank"><img src="img/002.jpg" alt="首页焦点图切换源代码" /></a></li><li><a href="#" target="_blank"><img src="img/003.jpg" alt="jquery商城焦点图效果" /></a></li><li><a href="#" target="_blank"><img src="img/004.jpg" alt="jquery轮播切换图代码" /></a></li><li><a href="#" target="_blank"><img src="img/005.jpg" alt="jquery幻灯片效果源码" /></a></li></ul></div><!--focus end-->
</div><!-- wrapper end --><div class="main"><h2 class="top_title"><a href="##">jQuery实现的类lightbox灯箱效果：图片视频窗口弹出伸缩</a></h2><div class="pic"><a οnfοcus="blur()" id="img" href="http://imgsrc.baidu.com/forum/pic/item/ed178044ad345982578b3fa90cf431adcaef84d7.jpg"  rel="vidbox 640 376" title="test jpg"></a></div><div class="vd"><!--这里使用优酷生成的flash链接，也支持mov格式视频可以放在自己服务器上，但是mov格式播放则要求本地安装QuickTime播放器解码-->  <a οnfοcus="blur()" id="vd" href="http://player.youku.com/player.php/Type/Folder/Fid/19275532/Ob/1/sid/XNTU3NTA5NTI0/v.swf"  rel="vidbox 640 376" title="test video"></a></div></div>
<div class="imgcollc"><h2><a href="#">jQuery实现的图片滚动切换效果</a></h2><!--自动滚动切换--><div class="demo"><ul id="demo1"><li><a href="#"><img  alt="#" width="140" height="94" src="img/s1.jpg"><br/>图片1</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s2.jpg"><br/>图片2</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s3.jpg"><br/>图片3</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s4.jpg"><br/>图片4</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s5.jpg"><br/>图片5</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s6.jpg"><br/>图片6</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s7.jpg"><br/>图片7</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s1.jpg"><br/>图片1</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s2.jpg"><br/>图片2</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s3.jpg"><br/>图片3</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s4.jpg"><br/>图片4</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s5.jpg"><br/>图片5</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s6.jpg"><br/>图片6</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s7.jpg"><br/>图片7</a></li></ul></div><!--手动点击滚动切换--><div class="demo"><ul id="demo2"><li><a href="#"><img  alt="#" width="140" height="94" src="img/s1.jpg"><br/>图片1</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s2.jpg"><br/>图片2</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s3.jpg"><br/>图片3</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s4.jpg"><br/>图片4</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s5.jpg"><br/>图片5</a></li><li><a href="#"><img  alt="#" width="140" height="94" src="img/s6.jpg"><br/>图片6</a></li></ul></div>
</div>
<div class="footer">XXX Mobile</div></body></html>

滚动的图片效果：

本实例中同时实现了灯箱效果。由于采用videobox插件，对于图片和视频都支持。很多灯箱效果的脚本和插件，比如jQuery Lightbox Plugin，Videobox，MooslideBox,，Shadowbox和LightWindow 等等。

二、Videobox插件的介绍和使用

Videobox是一个只有6k大小的脚本,用于在页面中显示图片和视频。Videobox使用swfobject来嵌入Flash。视频可以来自Youtube、Metacafe、Google Video、iFilm和自己设置的Flash。如果你要达到效果，必须使用videobox.js,mootools.js和swfobject脚.js这个三个脚本。如果要播放mov格式的视频，需要客户端机器安装QuickTime播放器。考虑到国内用户的使用习惯，建议使用flash格式。热门视频的falsh格式网址在国内各大视频网站可以获取，你也可以将自己的视频上传到视频网，然后生成自己需要的链接地址。

Videobox其实不是播放器，只是用来嵌入播放器的脚本而已，视频会在其弹出的遮罩层中播放显示。它的灵感来自Lightbox.v2和使用了Slimbox的部分代码。它用美妙的MooTools 库，并用swfobject嵌入Flash。它做了一个真正伟大的工作，如果你想在同一个覆盖页面显示您的影片，Videobox是一个真正很好的选择。使用注意事项：

1.必须引入videobox.js,mootools.js和swfobject脚.js这个三个脚本

2.引入CSS文件

3.给你的视频链接标签添加rel=”vidbox”属性，这样视频文件将会使用Videobox插件渲染播放。

4.在视频链接a标签增加title=”my caption”属性，用于标示视频的标题。

类似滚动滑动的插件还有bxSlider 等等，bxSlider是一个 jQuery 的插件，它可以实现 Slider 和滚动效果。这个插件使用非常简单，并且大小只有 8kb，非常轻量级，所以非常适合在站点和博客中使用。

不过如果你只是在静态页面要实现这一灯箱弹窗效果，建议还是手动写几行代码，根据自己需求对video.js进行瘦身，尤其在小型的静态网页，如果你处理的目标视频是有限的某一格式，这个大杂烩的脚本还是有点累赘的。

效果图：

三、仿QQ商城轮播图

jQuery轮播图效果，支持前后按钮切换，支持自动滚动切换。

jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果相关推荐

android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件
PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
html 轮播怎么用jq设置,jQuery轮播图功能实现方法
本文实例为大家分享了jQuery轮播图功能的实现代码,供大家参考,具体内容如下 jQuery轮播(无animation) html布局 5 1 2 3 4 5 1 < > CSS /* 轮 ...
html轮播图兼容ie8,兼容IE8的高级jQuery轮播图插件
jSlider是一款兼容IE8的高级jQuery轮播图插件.jSlider轮播图插件的特点是轻量级,使用简单,跨平台.通过jSlider你可以非常容易的而在网页中实现任何轮播图效果.它的特点还有: 速 ...
动漫轮播html,带17种内置过渡动画的jquery轮播图插件
bsc-slider是一款带17种内置过渡动画的jquery轮播图插件.该jquery轮播图插件可以制作最基本的轮播图效果,并内置17种过渡动画效果,还可以自定义动画的easing效果. 使用方法在 ...
《第31天：JQuery - 轮播图》
源码下载地址: 链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结. 写轮播图要准备的东西:三张尺寸大小一样的图片. 分 ...
html5slider轮播,jQuery轮播图插件slider-pro
slider-pro是一款模块化.响应式.支持移动设备的jQuery轮播图插件.该jQuery轮播图插件提供各种配置参数和方法,可以快速的创建多种模式的轮播图特效.它的主要特点有: 支持模块化. 响应 ...
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播
效果一: 会自动进行轮播,当鼠标进入轮播图区域会停止轮播,点击左右箭头可以向前.向后进行切换图片效果二: 这种效果比第一种效果简单,只要删除一些代码和修改一些样式即可. 实现原理轮播图整体是放在u ...
jQuery轮播图插件
自己封装的jquery插件@实现了简单的轮播图使用步骤: 引入jQuery插件引入main.js 在页面创建一个元素使用方法 $('#lunbo').carousel(list, option) ...

jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果

jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果相关推荐

最新文章

热门文章