一、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 onfocus="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 onfocus="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轮播图效果，支持前后按钮切换，支持自动滚动切换。
5005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
