一、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 visible
move: 4, // number of elements to the shift the slides
speed: 500, // number in milliseconds it takes to finish slide animation
margin: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 click
auto_interval: 2000, // the amount of time in milliseconds between each auto animation
auto_dir: 'next', // direction of auto slideshow (options: 'next', 'prev')
auto_hover: false, // determines if the slideshow will stop when user hovers over slideshow
next_text: 'next', // text to be used for the 'next' control
next_image: '', // image to be used for the 'next' control
prev_text: 'prev', // text to be used for the 'prev' control
prev_image: '', // image to be used for the 'prev' control
controls: 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轮播图效果，支持前后按钮切换，支持自动滚动切换。
扫一扫
5371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
