jQuery四图图片通栏代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery四图图片通栏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery四图图片通栏代码，属于站长常用代码" />
<title>jQuery四图图片通栏代码</title>
<link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.0.js"></script>
<script type="text/javascript" src="js/modernizr.mediaqueries.js"></script>
<script type="text/javascript" src="js/responsive-hub.js"></script>
<script type="text/javascript" src="js/jquery.silver_track.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.silver_track_recipes.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.silver_track.navigator.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.silver_track.bullet_navigator.js" charset="utf-8"></script>
</head>
<body><br /><br />

<!-- 代码 开始 -->
  <div class="track example-1">
    <div class="inner">
	  
      <div class="view-port">
        <div class="slider-container"  id="example-1">
          <div class="item">
            <img src="images/1.jpg">
            <p>Trailer 1</p>
          </div>
          <div class="item">
            <img src="images/2.jpg">
            <p>Trailer 2</p>
          </div>
          <div class="item">
            <img src="images/3.jpg">
            <p>Trailer 3</p>
          </div>
          <div class="item">
            <img src="images/4.jpg">
            <p>Trailer 4</p>
          </div>
          <div class="item">
            <img src="images/5.jpg">
            <p>Trailer 5</p>
          </div>
          <div class="item">
            <img src="images/1.jpg">
            <p>Trailer 6</p>
          </div>
          <div class="item">
            <img src="images/2.jpg">
            <p>Trailer 7</p>
          </div>
          <div class="item">
            <img src="images/3.jpg">
            <p>Trailer 8</p>
          </div>
          <div class="item">
            <img src="images/4.jpg">
            <p>Trailer 9</p>
          </div>
        </div>
      </div>
	<div class="bullet-pagination"></div>
  </div>
     <div class="pagination">
      <a href="#" class="prev disabled"></a>
      <a href="#" class="next disabled"></a>
    </div>
  </div>
<!-- 代码 结束 -->
<script>
var track = $(".slider-container").silverTrack();
var parent = track.container.parents(".track");
 
// 左右箭头
track.install(new SilverTrack.Plugins.Navigator({
  prev: $("a.prev", parent),
  next: $("a.next", parent)
}));

//下面三个小圆点
track.install(new SilverTrack.Plugins.BulletNavigator({
container: $(".bullet-pagination", parent)
}));
track.start();
</script>
</body>
</html>

JS代码(responsive-hub.js):

/*! * ResponsiveHub - JavaScript goodies for Responsive Design * https://github.com/globocom/responsive-hub * version:0.4.0 */
(function ($,window,document){
	$.responsiveHub = function(settings){
	if (typeof settings === "object"){
	ResponsiveHub.init(settings);
}
else if (typeof settings === "string"){
	var args = [].splice.call(arguments,0,arguments.length);
	var methodName = args.splice(0,1)[0];
	if (ResponsiveHub[methodName]){
	return ResponsiveHub[methodName].apply(ResponsiveHub,args);
}
else{
	if (window.console && window.console.log){
	console.log("[ResponsiveHub] Undefined method '" + methodName + "'");
}
}
}
}
;
	var ResponsiveHub ={
	currentLayout:null,resizeBound:false,hasMediaQuerySupport:false,windowObj:null,loaded:false,resizeStopDelay:500,_resizeTimer:null,init:function(settings){
	if (!this.loaded){
	this.loaded = true;
	this.windowObj = this._getWindow();
	this.layouts = settings.layouts;
	this.defaultLayout = settings.defaultLayout;
	this._boot();
}
}
,self:function(){
	return this;
}
,width:function(){
	return this.windowObj.width();
}
,layout:function(){
	if (!this.hasMediaQuerySupport){
	return this.defaultLayout;
}
var widths = [];
	var keys = this._keys(this.layouts);
	for (var j in keys){
	widths.push(parseInt(keys[j],10));
}
widths.sort(function(a,b){
	return b - a}
);
	var width = this.width();
	for (var i in widths){
	var w = widths[i];
	if (width >= w) return this.layouts[w];
}
return this.layouts[widths[widths.length - 1]];
}
,ready:function(layout,callback){
	this._bind("responsiveready",layout,callback);
}
,change:function(layout,callback){
	this._bind("responsivechange",layout,callback);
}
,isResizing:function(){
	return this._resizeTimer !== null;
}
,resizeStart:function(callback){
	this.windowObj.bind("resizeStart",callback);
}
,resizeStop:function(callback){
	this.windowObj.bind("resizeStop",callback);
}
,isTouch:function(){
	var wnd = (this.windowObj || this._getWindow()).get(0);
	return !!(('ontouchstart' in wnd) || (wnd.DocumentTouch && wnd.document instanceof DocumentTouch));
}
,hasFlash:function(){
	try{
	return !! new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
}
catch(e1){
}
var mimeType = this._mimeTypeFlash();
	return !! (mimeType && mimeType.enabledPlugin);
}
,_updateLayout:function(){
	var self = $.responsiveHub("self");
	var layout = self.layout();
	if (layout != self.currentLayout){
	self.currentLayout = layout;
	self.windowObj.trigger("responsivechange" + layout,[self._newEvent()]);
}
}
,_resizeStartStop:function(event){
	var self = $.responsiveHub("self");
	if (self._resizeTimer){
	clearTimeout(self._resizeTimer);
}
else{
	self.windowObj.trigger("resizeStart",[event]);
}
self._resizeTimer = setTimeout(function(){
	self._resizeTimer = null;
	self.windowObj.trigger("resizeStop",[event]);
}
,self.resizeStopDelay);
}
,_boot:function(){
	this.hasMediaQuerySupport = Modernizr.mq("only all");
	if (!this.resizeBound && this.hasMediaQuerySupport){
	this.windowObj.bind("resize",this._updateLayout);
	this.windowObj.bind("resize",this._resizeStartStop);
	this.resizeBound = true;
}
if (!this.currentLayout){
	this.currentLayout = this.layout();
	var readyEvent = "responsiveready" + this.currentLayout;
	this.windowObj.trigger(readyEvent,[this._newEvent()]);
	this.windowObj.unbind(readyEvent);
}
}
,_unbind:function(){
	$(window).unbind(".responsivehub");
}
,_bind:function(namespace,layout,callback){
	var self = this;
	var layouts = this._flatten(this._isArray(layout) ? layout:[layout]);
	var eventCallback = function(event,responsiveHubEvent){
	callback(responsiveHubEvent);
}
$.each(layouts,function(index,value){
	$(window).bind(namespace + value + ".responsivehub",eventCallback);
}
);
}
,_newEvent:function(){
	return{
	layout:this.currentLayout,touch:this.isTouch()}
;
}
,// https://github.com/jiujitsumind/underscorejs/blob/master/underscore.js#L644 _keys:Object.keys || function(obj){
	var keys = [];
	for (var key in obj) if (obj.hasOwnProperty(key)) keys[keys.length] = key;
	return keys;
}
,_flatten:function(array,shallow){
	var self = this;
	var flatten = function(input,shallow,output){
	for (var i = 0;
	i < input.length;
	i++){
	var value = input[i];
	if (self._isArray(value)){
	shallow ? output.push(value):flatten(value,shallow,output);
}
else{
	output.push(value);
}
}
return output;
}
return flatten(array,shallow,[]);
}
,_getWindow:function(){
	return $(window);
}
,_mimeTypeFlash:function(){
	return navigator.mimeTypes["application/x-shockwave-flash"];
}
,_isArray:Array.isArray || function(obj){
	return Object.prototype.toString.call(obj) === '[object Array]';
}
}
;
}
)(jQuery,window,document);

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
body{font-family:Helvetica Neue,serif;font-size:16px;margin:0;padding:0;}
h2{padding:0;margin:0 0 10px 0;}
#forkme_banner{display:block;position:absolute;top:0;right:10px;z-index:10;padding:10px 50px 10px 10px;color:white;background:url("../images/blacktocat.png") #6A3 no-repeat 95% 50%;font-weight:700;box-shadow:0 0 10px rgba(0,0,0,.5);border-bottom-left-radius:2px;border-bottom-right-radius:2px;text-decoration:none;}
.head{padding:30px 0;width:960px;margin:auto;}
.head h1{font-weight:200;font-family:Helvetica,Arial,Verdana,sans-serif;text-shadow:0 1px 0 rgba(255,255,255,0.9);text-transform:uppercase;color:#999;}
.container{width:960px;margin:auto;}
.actions{margin-top:10px;}
.track{width:100%;position:relative;}
.view-port,.track .inner{width:946px;}
.axis-y .view-port,.axis-y .track .inner{width:240px;height:660px;}
.view-port{overflow:hidden;position:relative;}
.track .inner{position:relative;margin:auto;margin-bottom:30px;padding:10px;background:#F1F1F1;border-radius:4px;}
.track .inner h2{font-weight:200;font-family:Helvetica,Arial,Verdana,sans-serif;text-shadow:0 1px 0 rgba(255,255,255,0.9);text-transform:uppercase;color:#999;}
.track .inner h2:hover{color:#6A3;}
.track a.prev,.track a.next{display:block;position:absolute;top:50%;margin-top:-32px;width:64px;height:64px;background:url("../images/arrows.png");background-repeat:no-repeat;}
.track a.prev.disabled,.track a.next.disabled{display:none;}
.track a.prev{left:0;background-position:0 0;}
.track a.prev:hover{background-position:0 -66px;}
.track a.prev:active{background-position:0 -132px;}
.track a.next{right:0;background-position:-64px 0;}
.track a.next:hover{background-position:-64px -132px;}
.track a.next:active{background-position:-64px -198px;}
.slider-container{position:relative;margin:0;padding:0;height:166px;}
.slider-container.big{height:288px;}
.slider-container.huge{height:432px;}
.slider-container .item{position:absolute;width:224px;height:150px;margin-right:16px;margin-bottom:16px;}
.slider-container .item img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:2px solid white;}
.slider-container.big .item,.slider-container.big .item .img-area{height:288px;}
.slider-contaiber.huge .item{margin-bottom:12px;}
.slider-container .item p{padding:0;margin:0;}
.slider-container .item.cover{width:940px;}
.slider-container .item.cover-2{height:432px;}
.slider-container .item.cover img{float:left;}
.slider-container .item.cover-2 img{float:none;}
.slider-container .item.cover .img-area{float:right;margin-left:16px;}
.slider-container .item.cover-2 .img-area{float:none;margin-left:0;margin-top:12px;}
.slider-container .item.cover-2 .img-area .img-block:first-child{margin-right:14px;}
.slider-container .item.cover .img-block{height:128px;}
.slider-container .item.cover-2 .img-block{float:left;}
.img-block{margin-bottom:16px;}
.editorial{float:right;width:200px;padding-right:20px;height:272px;background:white;}
.editorial .title{font-size:24px;margin:20px 0 0 20px;}
.editorial .desc{font-size:14px;line-height:18px;padding-top:8px;margin-left:20px;}
.side-a,.side-b{float:left;width:462px;}
.side-a{margin-right:16px;}
.side-a > img,.side-b > img{width:462px;height:272px;}
.bullet-pagination{width:100%;text-align:center;margin-top:15px;}
.bullet{display:inline-block;background:#999;padding:4px;border-radius:6px;margin-right:5px;opacity:0.4;-webkit-transition:opacity 0.5s linear;-moz-transition:opacity 0.5s linear;-ms-transition:opacity 0.5s linear;-o-transition:opacity 0.5s linear;transition:opacity 0.5s linear;}
.bullet.active{opacity:1;}
.bullet:last-child{margin-right:0;}
#example-4 img{width:228px;height:132px;}
.example-4 .loading{width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(255,255,255,0.8);border-radius:4px;text-align:center;line-height:140px;padding:4px 0;z-index:1;}
.example-4 .loading:before{content:"loading...";}
.example-4 .bullet{cursor:default;}
.example-1 a.prev,.example-1 a.next{margin-top:-69px;}
.example-2 a.prev,.example-2 a.next{margin-top:-58px;}
.example-3 a.prev,.example-3 a.next{margin-top:-53px;}
.example-4 a.prev,.example-4 a.next{margin-top:-68px;}
.view-port{overflow:hidden;position:relative;}
.slider-container{position:relative;margin:0;padding:0;}
.item{position:absolute;}

附件:下载该文件资源,减少时间成本(增值服务)