以下是 jquery宽屏格子焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jquery宽屏格子焦点图</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" media="all" href="css/style.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/background-images.css" />
</head>
<body>
<div id="slideshow-wrapper">
<div id="slideshow-pattern" class>
</div>
<div id="slideshow-border-top">
<div id="gallery-slider-wrapper">
<div id="gallery-slider">
<div id="slider-controls">
<a href="javascript: void(0)" id="slider-control-left">left</a><a href="javascript: void(0)" id="slider-control-right">right</a></div>
<div id="slider-images-wrapper">
<ul id="slider-main-ul">
<li>
<ul>
<li class="type-3">
<a class="article-icon" title="选一种状态，让自己活的无法替代" href="#">
<span>
<div class="icon">
</div>
<strong>选一种状态，让自己活的无法替代</strong>要你奔跑，这个世界就会跟着你奔跑，只要你停驻，这个世界就会舍弃你独自奔跑。唯有你确定一个方向，使劲的跑起来，这个世界会为你而让路。<em class="more">Read
more »</em></span><img height="298" width="318" src="images/1.jpg" alt="Please add picture"></a></li>
<li class="type-1">
<a class="article-icon" title="那句我喜欢你，被谁遗失在流年里" href="#">
<span>
<div class="icon">
</div>
<strong>那句我喜欢你，被谁遗失在流年里</strong><em class="more">Read
more »</em></span><img height="148" width="158" src="images/2.jpg" alt="Please add picture"></a></li>
<li class="type-1">
<a class="article-icon" title="不要有一丝忧伤，好吗？ " href="#">
<span>
<div class="icon">
</div>
<strong>不要有一丝忧伤，好吗？ </strong><em class="more">Read more
»</em></span><img height="148" width="158" src="images/3.jpg" alt="Please add picture"></a></li>
</ul>
</li>
<li>
<ul>
<li class="type-1">
<a class="article-icon" title="我知道，我们不会有结果" href="#">
<span>
<div class="icon">
</div>
<strong>我知道，我们不会有结果</strong><em class="more">Read more
»</em></span><img height="148" width="158" src="images/4.jpg" alt="Please add picture"></a></li>
<li class="type-1">
<a class="article-icon" title="幸福背后" href="#">
<span>
<div class="icon">
</div>
<strong>幸福背后</strong><em class="more">Read more »</em></span><img height="148" width="158" src="images/5.jpg" alt="Please add picture"></a></li>
<li class="type-2">
<a class="article-icon" title="我许你，一世安" href="#">
<span>
<div class="icon">
</div>
<strong>我许你，一世安</strong>嗅觉，失控，闻不到这个清晨各奔东西的味道，终究还是走到曲终人散的地步
听老人说，留下的那个是善后者，以及承受者。而如今，最后留下的是我一个人的狂欢<em class="more">Read
more »</em></span><img height="148" width="318" src="images/6.jpg" alt="Please add picture"></a></li>
<li class="type-2">
<a class="article-icon" title="1000个门组成的艺术 " href="#">
<span>
<div class="icon">
</div>
<strong>1000个门组成的艺术 </strong>韩国首尔有一栋10层楼高建筑叫Doors ，之所以叫Doors
那是因为这栋建筑外墙是由1000个回收再利用的彩色的门契合而成的。这个构思是韩国艺术家Choi Jeong-Hwa提出来的。<em class="more">Read
more »</em></span><img height="148" width="318" src="images/7.jpg" alt="Please add picture"></a></li>
</ul>
</li>
<li>
<ul>
<li class="type-2">
<a class="article-icon" title="国内爱情微电影《回到终点》" href="#">
<span>
<div class="icon">
</div>
<strong>国内爱情微电影《回到终点》</strong>这是一部学生作品，片子剧情取材自网上短篇《一对小夫妻离婚後的三十天生活》，讲述了一对小夫妻分手之后的同居生活。曾经一起生活了3年的夫妻，因各自的想法不同而分开，同居的生活能否挽救一段枯萎的爱情？<em class="more">Read
more »</em></span><img height="148" width="318" src="images/8.jpg" alt="Please add picture"></a></li>
<li class="type-3">
<a class="article-icon" title="想送你首歌 无论多么悲伤还是多么快乐" href="#">
<span>
<div class="icon">
</div>
<strong>想送你首歌 无论多么悲伤还是多么快乐</strong>想送你首歌，无论一世繁华还是淡然静默。
想送你首歌，无论多么悲伤还是多么快乐。想送你首歌，无论压力多重，笑容多从容。想送你首歌，告诉你们每一个，我都很珍惜。<em class="more">Read
more »</em></span><img height="298" width="318" src="images/9.jpg" alt="Please add picture"></a></li>
</ul>
</li>
<li>
<ul>
<li class="type-3">
<a class="article-icon" title="我想结婚" href="#">
<span>
<div class="icon">
</div>
<strong>我想结婚</strong>如果遇见这样的男人，我也想结婚。遇见他之前，我也要让自己变得更美好。<em class="more">Read
more »</em></span><img height="298" width="318" src="images/10.jpg" alt="Please add picture"></a></li>
<li class="type-1">
<a class="article-icon" title="你是我的星星" href="#">
<span>
<div class="icon">
</div>
<strong>你是我的星星</strong><em class="more">Read more »</em></span><img height="148" width="158" src="images/11.jpg" alt="Please add picture"></a></li>
<li class="type-1">
<a class="article-icon" title="只要你不嫌弃我，我就不嫌弃你" href="#">
<span>
<div class="icon">
</div>
<strong>只要你不嫌弃我，我就不嫌弃你</strong><em class="more">Read
more »</em></span><img height="148" width="158" src="images/12.jpg" alt="Please add picture"></a></li>
</ul>
</li>
<li>
<ul>
<li class="type-1">
<a class="article-icon" title="不能叫出口的名字 " href="#">
<span>
<div class="icon">
</div>
<strong>不能叫出口的名字 </strong><em class="more">Read more
»</em></span><img height="148" width="158" src="images/13.jpg" alt="Please add picture"></a></li>
<li class="type-1">
<a class="article-icon" title="突然不想走" href="#">
<span>
<div class="icon">
</div>
<strong>突然不想走</strong><em class="more">Read more »</em></span><img height="148" width="158" src="images/14.jpg" alt="Please add picture"></a></li>
<li class="type-2">
<a class="article-icon" title="红眼睛幽幽的看着这孤城 如同苦笑挤出的高兴" href="#">
<span>
<div class="icon">
</div>
<strong>红眼睛幽幽的看着这孤城 如同苦笑挤出的高兴</strong>我们坐在沙面公园的椅子上时，太阳已经静悄悄的落在欧式建筑的后面了，绿树覆盖，天失去了暖黄色后过渡到了好像蒙上一层浅灰蓝，我们的左边坐着一位女生<em class="more">Read
more »</em></span><img height="148" width="318" src="images/15.jpg" alt="Please add picture"></a></li>
<li class="type-2">
<a class="article-icon" title="魔女宅急便插画" href="#">
<span>
<div class="icon">
</div>
<strong>魔女宅急便插画</strong>相信同学们对宫崎骏爷爷的《魔女宅急便》都不会陌生啊，这部1989年的动画电影伴随了几代人的成长。讲述了十三岁的小魔女琪琪带着宠物黑猫吉吉，在家人的祝福下展开一段修行之旅！<em class="more">Read
more »</em></span><img height="148" width="318" src="images/16.jpg" alt="Please add picture"></a></li>
</ul>
</li>
<li>
<ul>
<li class="type-2">
<a class="article-icon" title="新锐自由插画师ashley percival作品" href="#">
<span>
<div class="icon">
</div>
<strong>新锐自由插画师ashley percival作品</strong>ashley percival是一位刚毕业不久的新锐自由插画师，他的绘画灵感多来自于大自然，另外还有他那经常灵光一现的想象力了。<em class="more">Read
more »</em></span><img height="148" width="318" src="images/17.jpg" alt="Please add picture"></a></li>
<li class="type-3">
<a class="article-icon" title="那些被时光碾过的破碎" href="#">
<span>
<div class="icon">
</div>
<strong>那些被时光碾过的破碎</strong>记忆总是忙碌到忘却了具体的时间，记住的便是那年，那月，那天，那时。
那时我们说的永不分离，就这样被时光隔离开来。我像只迷路的羔羊，在记忆中跌跌撞撞寻找来时的方向。<em class="more">Read
more »</em></span><img height="298" width="318" src="images/18.jpg" alt="Please add picture"></a></li>
</ul>
</li>
</ul>
</div>
<div id="slider-bottom-controls">
<a id="slider-scroll-left" href="javascript: void(0);" title="Scroll left">
left</a><div id="slider-scroll">
<div class="knob">
</div>
</div>
<a id="slider-scroll-right" href="javascript: void(0);" title="Scroll right">
right</a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/duotive-slider-gallery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<br><br><br>
</body>
</html>JS代码(zzsc.js):
window.addEvent("load",function(){
var dtSlideshow = new dtSliderGallery({
container:$("gallery-slider"),arrowControls:1,description:1,transitionDuration:1000,transitionInterval:8000}
);
}
);
CSS代码(style.min.css):
*{margin:0;padding:0;border:none;outline:none;font-family:Arial,"Microsoft Sans Serif","Lucida Sans Unicode";font-size:9pt;line-height:18pt;color:#24241f;}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}
/**************** TOP TOOLBAR ELEMENTS ****************/
/* > slideshows-------------------------------------------------------------- */
#slideshow-wrapper{margin:auto}
#gallery-slider-wrapper{height:482px;padding:10px 0;margin:auto}
#gallery-slider{margin:auto;height:482px;overflow:hidden;position:relative;z-index:9000}
#gallery-slider #slider-controls{margin:auto;width:100%;height:450px;position:absolute;oveflow:hidden}
#gallery-slider #slider-controls a#slider-control-left,#gallery-slider #slider-controls a#slider-control-right{height:92px;width:46px;position:absolute;top:180px;z-index:9500;overflow:hidden;text-indent:-9999px;text-decoration:none}
#gallery-slider #slider-controls a#slider-control-left{left:0;background-image:url(gallery-slider-control-left.png);background-repeat:no-repeat;background-position:0 0}
#gallery-slider #slider-controls a#slider-control-left:hover{background-position:0 -92px}
#gallery-slider #slider-controls a#slider-control-right{right:0;background-image:url(gallery-slider-control-right.png);background-repeat:no-repeat;background-position:0 0}
#gallery-slider #slider-controls a#slider-control-right:hover{background-position:0 -92px}
#gallery-slider #slider-bottom-controls{height:20px;width:960px;padding-top:10px;margin:0 auto}
#gallery-slider #slider-bottom-controls a#slider-scroll-left,#gallery-slider #slider-bottom-controls a#slider-scroll-right{width:20px;height:20px;display:block;text-indent:-9999px;float:left;text-decoration:none}
#gallery-slider #slider-bottom-controls a#slider-scroll-left{background-image:url(images/gallery-slider-scroll-left.png);background-repeat:no-repeat}
#gallery-slider #slider-bottom-controls a#slider-scroll-right{background-image:url(images/gallery-slider-scroll-right.png);background-repeat:no-repeat}
#gallery-slider #slider-bottom-controls a#slider-scroll-left:hover,#gallery-slider #slider-bottom-controls a#slider-scroll-right:hover{background-color:#24241f}
#gallery-slider #slider-bottom-controls #slider-scroll{height:20px;width:920px;background:#fff;float:left}
#gallery-slider #slider-bottom-controls div.knob{width:920px;height:20px;cursor:pointer;background:#24241f url(images/gallery-slider-scroll-handle.png) no-repeat center}
#gallery-slider #slider-images-wrapper{margin:auto;height:452px;position:relative;overflow:hidden}
#gallery-slider #slider-images-wrapper ul#slider-main-ul{width:1920px;height:450px;position:absolute;left:0;top:0;border:1px solid #FFF}
#gallery-slider #slider-images-wrapper ul#slider-main-ul li{float:left;list-style:none}
#gallery-slider #slider-images-wrapper ul#slider-main-ul li ul{float:left;width:320px}
#gallery-slider #slider-images-wrapper ul#slider-main-ul li li{border:solid 1px #fff;background:#eae9e2 url(images/duotive-slideshow-preloader2.gif) no-repeat center}
#gallery-slider ul#slider-main-ul li a{text-decoration:none;position:relative;}
#gallery-slider ul#slider-main-ul li a div.icon{position:absolute;width:16px;height:16px}
#gallery-slider ul#slider-main-ul li a.article-icon div.icon{background:url(images/gallery-slider-icon-article.png) no-repeat center;right:9px;bottom:10px}
#gallery-slider ul#slider-main-ul li a.image-icon div.icon{background:url(images/gallery-slider-icon-image.png) no-repeat center;right:10px;bottom:8px}
#gallery-slider ul#slider-main-ul li a.video-icon div.icon{background:url(images/gallery-slider-icon-video.png) no-repeat center;right:10px;bottom:7px}
#gallery-slider ul#slider-main-ul li a span{text-decoration:none;display:block;position:absolute;top:0;left:0;z-index:9000;background:url(images/gallery-slider-content-bg.png);padding:20px;color:#fff;font-size:8pt;opacity:0;filter:alpha(opacity=0)}
#gallery-slider ul#slider-main-ul li a span strong{display:block;font-size:10pt;padding-bottom:11px}
#gallery-slider ul#slider-main-ul li a span em{display:block;font-size:8pt;padding-top:11px;font-style:normal}
#gallery-slider ul#slider-main-ul li a img{position:absolute;top:0;left:0}
#gallery-slider ul#slider-main-ul li li.type-1,#gallery-slider ul#slider-main-ul li li.type-1 a{width:158px;height:148px}
#gallery-slider ul#slider-main-ul li li.type-1 a span{width:118px;height:108px}
#gallery-slider ul#slider-main-ul li li.type-2,#gallery-slider ul#slider-main-ul li li.type-2 a{width:318px;height:148px}
#gallery-slider ul#slider-main-ul li li.type-2 a span{width:278px;height:108px}
#gallery-slider ul#slider-main-ul li li.type-3,#gallery-slider ul#slider-main-ul li li.type-3 a{width:318px;height:298px}
#gallery-slider ul#slider-main-ul li li.type-3 a span{width:278px;height:258px}
#loginw{font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;width:280px;border-collapse:collapse;}
#loginw tr{float:left;padding:0 0 0 20px;height:50px;}
.name{width:145px;height:25px;color:#ccc;padding:2px 0 0 8px;border:1px solid #f1f1f1;}
.loginwalt{float:left;padding:10px;}
#loginw td{font-size:1em;padding:3px 7px 2px 7px;}
#loginw tr.alt td{color:#000000;background-color:#EAF2D3;}
分享到QQ
分享到微博
微信扫一扫
