网页特效 - 分类导航
当前位置： >
一款jQuery左右旋转幻灯片网页特效，jquery.roundabout.js是一款超棒的左右3D旋转式幻灯片jQuery插件。……
一款手机移动端响应式全屏左右可拖拽焦点图幻灯片网页特效，动态加载对应的文字内容 当然，它也是支持鼠标拖拽功能，带左右按钮，自动轮播及左右拖拽或点击按钮切换焦点图JS代……
一款jQuery带动画效果自动轮播焦点图网页特效免费下载，该特效带动画效果，左右按钮、索引按钮切换代码，效果非常流畅，兼容IE7，插件支持图片位置的定位以及图片的动画运行速度……
一款jQuery左右箭头按钮自动轮播焦点图网页特效，带左右按钮，自动轮播及点击按钮切换焦点图。……
jQuery带时间轴按钮自动轮播焦点图，带暂停 / 播放控制按钮，带左右箭头按钮切换，点击时间轴按钮切换焦点图代码！……
jQuery图文分离全屏渐变切换焦点图代码，带左右按钮，带索引按钮，支持自动播放，带文字描述，淡入淡出切换！……
5屏大气jQuery滑动门焦点图网页特效，手拉风琴动画切换焦点图特效，可设置自动切换。……
一款jQuery响应式全屏背景自动切换网页特效免费下载，可设置切换方式、切换效果等参数。特效切换效果包含：透明渐变切换、左右滑动切换、上下滑动切换、角度滑动切换等。……
一款jQuery动态切换焦点图Blinds插件，该特效基于jquery.blinds-0.9.js插件与jquery-1.4.1.js插件实现图片从中间向两边百叶窗方式切换特效。……
一款jQuery左右透明按钮渐变切换幻灯片网页特效免费下载，带左右按钮，点击左右半圆按钮透明渐变切换幻灯片特效代码。……
一款jQuery带进度条汽车网站大屏焦点图网页特效，带索引按钮，索引按钮进度条提示，支持自动轮播，淡入淡出切换JS焦点图代码。……
一款带左右箭头及自动轮播jQuery幻灯片网页特效，该特效支持多设置张图片，支持设置多段文字，支持自动轮播，支持设置图文滚动方向，兼容主流浏览器！……
一款jQuery图片3D旋转木马轮播焦点图代码网页特效，3D轮播效果，支持自动切换，支持左右箭头控制切换，鼠标划过停止切换。……
SliderPro插件实现响应式全屏左右滚动焦点图代码，左右滚动切换，带索引按钮，带文字描述，支持键盘控制左右切换，支持触屏控制左右切换，响应式设计，对移动设备支持良好。……
jQuery手机移动端图片触屏滑动焦点图网页特效，该特效基于jquery.event.drag-1.5.min.js、 jquery.touchSlider.js和jquery-1.7.1.min.js等插件制作的图片轮播特效代码，兼容PC端和手机移动端，全屏宽屏……
一款jQuery图片3D旋转切换代码网页特效，带左右按钮，自动3D旋转轮播，点击按钮/点击索引按钮切换焦点图JS代码免费下载。……
一款3D旋转图片轮播效果（支持滚轮）网页特效，鼠标滚动滚轮/点击左右图片360度3D式滚动切换图片，自动轮播，切换效果流畅，支持IE6+以上浏览器。网站建设必备网页特效JS代码素材！……
一款jQuery带时间轴美食网站焦点图网页特效，酷炫美食网站建设JS代码素材。带左右箭头、时间轴、左右平滑滚动自适应宽屏焦点图……
本站关键词
科e互联版权所有京ICP备号-1腾讯微云Win8风格自动轮播切换的焦点图特效 - 洪越源代码 - 网站素材 - 其它素材
　　　　　　　　　　
您的位置： >>
>> >>腾讯微云Win8风格自动轮播切换的焦点图特效
本类下载排行
??????????
总下载排行榜
??????????
腾讯微云Win8风格自动轮播切换的焦点图特效
源码等级：
源码大小：615K
源码语言：简体中文
授权方式：免费版
源码类别：网站素材 /
运行环境：Win9x/NT/2000/XP/2003/
源码更新： 11:00:37
页面刷新： 14:41:23
相关连接：
下载次数：59 次
源码介绍：
腾讯微云首页的jquery焦点图，仿Windows8风格的图片特效，带有索引按钮，当无鼠标响应时，支持自动轮播切换。具体风格截图请参见截图。下方的小方格可以控制图片切换，点击一下切换一张图片，可修改成满屏显示的那种，目前貌似很流行这种风格。
立即下载：
相关源码：
注意事项：
?注意：本站源码一律只用鼠标左键打开，否则将不能正常下载！
?如果出现该页无法显示,请多试几次；如果总是不能下载,请点击,谢谢!
?请一定升级到最新版[]才能正常解压本站提供的源码；如有其它问题,欢迎发信.
?由于网站服务器承受能力有限,请其他网站不要直接链接我们提供的源码,谢谢!!简单响应式jQuery焦点图切换图片轮播插件Excolo Slider
文章来源：原创 作者:JS代码网 时间: 访问: 下载次数：
简单响应式jQuery焦点图切换图片轮播插件Excolo Slider，插件界面非常的简单清晰，响应式
布局，支持移动端触屏，自适应终端显示，支持自动播放，按钮、圆点切换，支持重复播放，支
持众多的参数配置功能：左右切换按钮图片和样式定义、图片动画效果切换速度定义、支持自动
调整图片尺寸参数定义，此款插件还是非常不错的，值得的使用。
使用方法：
1.加载插件和jQuery
&script src=&javascripts/jquery-1.9.1.min.js&&&/script&
&script src=&javascripts/jquery.excoloSlider.min.js&&&/script&
&link href=&stylesheets/jquery.excoloSlider.css& rel=&stylesheet&&
2.HTML内容
&div id=&slider&&
&img src=&images/image1.jpg&&
&img src=&images/image2.jpg&&
&img src=&images/image3.jpg&&
&img src=&images/image4.jpg& data-plugin-slide-caption=&I am a caption &b&and I can contain HTML.&/b&&&
&img src=&images/image5.jpg&&
&img src=&images/image6.jpg&&
&img src=&images/image7.jpg&&
&img src=&images/image8.jpg&&
3.插件初始化
$(function () {
$(&#slider&).excoloSlider();
常用参数配置详解：
width：焦点图区域宽度
height：焦点图区域高度
autoSize：是否自动调节图片尺寸 true false
touchNav：是否允许触摸切换 true false
mouseNav：是否允许鼠标按下切换 true false
prevnextAutoHide：离开区域左右按钮是否自动隐藏true false
autoPlay：是否自动播放 true false
delay：延迟时间 毫秒&
repeat：是否重复播放
prevButtonClass：左切换按钮自定义样式
nextButtonClass：右切换按钮自定义样式
prevButtonImage：左切换按钮图片
nextButtonImage：右切换按钮图片
pagerClass：圆点切换按钮自定义样式
pagerImage：圆点切换按钮图片
更多参数配置请查看官网API
分享给朋友：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）非常高级的图片滑动展示效果jQuery插件mobilyslider.js，通过此插件只需要简单的几句代码，将图片添加到合适的位置，即可实现图片动态滑动展示，带有前后翻页，可以用作焦点图片切换和照片展示等，非常酷，脚本分享网推荐。
jquery制作的漂亮的产品循环展示效果，展示效果带有一定的3D立体效果，图片通过上下页按钮循环展示，空间感十足，适合制作运动、服装、户外产品的展示。
jQuery实现的超棒带缩略图阅览的选项卡焦点图片切换效果，鼠标放到数字选项卡上可以显示下一张图片的预览图，点击后切换，效果非常适合制作新闻类网站的焦点图片切换效果。
一个jquery实现的带文字的焦点图片切换效果，图片切换带有渐变效果，可以显示详细的文字描述，适合大幅图片展示。
jquery实现的简单焦点图片切换效果，带有图片编号按钮，点击编号可以切换到相应图片，可以自动切换，效果简单实用。
jquery实现的非常漂亮的图片马赛克翻转效果，图片切换过程非常酷，整个图片分成一个一个的小方格进行翻转变换。
让实现手风琴切换风格变得非常容易的jquery插件jquery.easyAccordion.js，有了这个插件，制作手风琴效果的图片展示就很简单了，范例中带有三种演示效果可以参考。
jQuery实现的新闻图文幻灯展示效果，带缩略图预览显示，切换流畅，适合制作新闻类焦点图片切换效果。
mootools实现的手风琴折叠图片展示效果，图片折叠显示，图片上可以添加描述信息，适合制作大图片类广告
mootools实现的超酷新闻幻灯切换效果，新闻图片和导航按钮左右分割，点击导航按钮可以动态切换新闻图片，导航按钮可以在左边或者右边，功能十分强大，效果非凡，可应用在新闻网站、科技类网站。
jQuery+css制作的旋转广告牌效果，模拟大型的户外广告牌效果，自动旋转切换，效果震撼。
效果非常棒的焦点图片切换效果，jquery+css3实现，可以自动切换，可以手工切换，带有缩略图显示。
一个jQuery实现的实用广告效果，采用大幅面图片上下循环滚动的方式，可以手工操作滚动，效果相当震撼。
一个jQuery实现的产品展示特效，点击任意产品都可以滑动显示该产品的详细图文，用于厂家产品推广显示非常合适。
jQuery实现的焦点图片切换效果，图片上可以带描述信息，并且可以通过按钮隐藏，右侧带有缩略图显示，切换流畅，清新大方，适合综合性网站使用
jquery实现的常用焦点图片切换效果，图片自动变换，也可以手动切换，可以在图片下方显示标题信息。
一个jquery实现的焦点图片切换效果，可以自由指定图片数量，图片切换流畅自然，现代感十足，非常适合做产品禅师，可以自动切换也可以手工切换
slideshow_dot是一个jQuery焦点图片切换插件，自带样式，特点是底部以圆点作为切换按钮，只需要指定图片就可以自动切换，自动循环播放。
cslider是一个jQuery图片效果插件，它可以实现图片和文本的左右切换，可以手工切换也可以自动切换，效果非常不错，也可以作为网站广告轮播的效果。
本范例实现了一个功能较为负载的多图轮播效果，可以自定义图片的数量，轮播的每一个画面可以是一张图片，也可以是多个图片混排，每个图片都可以单独连接，效果非常不错。
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：0&&&&
点击：13805&&&&
点击：9412&&&&
点击：8221&&&&
点击：10921&&&&
点击：14514&&&&
点击：7767&&&&
点击：9825&&&&
点击：9102&&&&
点击：8867&&&&
合作网站：下次自动登录
现在的位置:
& 综合 & 正文
jquery高仿2012淘宝商城多格子焦点图滚动切换
原文地址：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&
&html xmlns=""&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&jquery高仿2012淘宝商城多格子焦点图滚动切换&/title&
&meta name="description" content="jquery图片滚动切换特效，高仿2012淘宝商城首页多格子焦点图切换，鼠标滑过焦点图片各个格子区域聚光灯效果展示。且带索引序号按钮控制图片对应的格子切换滚动效果。" /&
&style type="text/css"&
*{margin:0;padding:0;list-style-type:}
/*全局声明!就是说这个网页中所有的元素的外边距和内边距都为0, 项目列表前的类型为无,也就是隐藏!一般项目列表默认的前面都有个小黑点的,这个就能隐藏那个小点*/
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";color:#333;background:#f0f0f0;}
a,img{border:0;}
/* demo */
.demo{width:780margin:0}
.demo h2{height:70line-height:50font-size:22font-weight:font-family:"Microsoft YaHei",SimHtext-align:}
/* focus */
#focus{position:width:780height:420overflow:}
#focus ul{height:420position:}
#focus ul li{float:width:780height:420overflow:position:background:#000;}
#focus ul li div{position:overflow:}
#focus .btnBg{position:width:780height:40left:0;bottom:0;background:#000;}
#focus .btn{position:height:30left:10bottom:4}
#focus .btn span{
float:display:inline-width:30height:30line-height:30text-align:font-size:16margin-right:10cursor:background:#716564;color:#
border-radius:15
-moz-border-radius:15
-webkit-border-radius:15
#focus .btn span.on{background:#B91919;color:#}
&script type="text/javascript" src="&
&script type="text/javascript"&
$(function(){
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li"). //获取焦点图个数
var index = 0;
//以下代码添加数字按钮和按钮后的半透明长条
var btn = "&div class='btnBg'&&/div&&div class='btn'&";
for(var i=0; i & i++){
btn += "&span&" + (i+1) + "&/span&";
btn += "&/div&"
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.3);
//为数字按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").mouseenter(function(){
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len + 1));
//鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，所以会有变暗的效果
$("#focus ul li div").hover(function(){
$(this).siblings().css("opacity",0.7);
},function() {
$("#focus ul li div").css("opacity",1);
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function(){
clearInterval(picTimer);
},function(){
picTimer = setInterval(function(){
if(index == len){ //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
showFirPic();
index = 0;
}else{ //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
showPics(index);
},3000); //此3000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index){
//普通切换
var nowLeft = -index*sW //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},500); //通过animate()调整ul元素滚动到计算出的position
$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
function showFirPic(){ //最后一张图自动切换到第一张图时专用
$("#focus ul").append($("#focus ul li:first").clone());
var nowLeft = -len*sW //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
$("#focus ul").stop(true,false).animate({"left":nowLeft},500,function(){
//通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
$("#focus ul").css("left","0");
$("#focus ul li:last").remove();
$("#focus .btn span").removeClass("on").eq(0).addClass("on"); //为第一个按钮添加选中的效果
&div class="demo"&
&h2&jquery高仿2012淘宝商城多格焦点图滚动切换&/h2&
&div id="focus"&
&div style="left:0;top:0;"&&a href=" width="780" height="420" src="images/5364.jpg" alt="2012淘宝商城最新多格焦点图" /&&/a&&/div&
&div style="left:0;top:0;"&&a href=" width="560" height="420" src="images/5152.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="right:0;top:0;"&&a href=" width="220" height="140" src="images/234rwe.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="right:0;top:140"&&a href=" width="220" height="140" src="images/54325.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="right:0;bottom:0;"&&a href=" width="220" height="140" src="images/as124.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="left:0;top:0;"&&a href=" width="260" height="210" src="images/12as.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="left:260top:0;"&&a href=" width="260" height="210" src="images/12wf.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="left:0;top:210"&&a href=" width="520" height="210" src="images/adf13.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="right:0;top:0;"&&a href=" width="260" height="420" src="images/1235.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="left:0;top:0;"&&a href=" width="560" height="420" src="images/5243.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="right:0;top:0;"&&a href=" width="220" height="140" src="images/3246.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="right:0;top:140"&&a href=" width="220" height="140" src="images/536.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="right:0;bottom:0;"&&a href=" width="220" height="140" src="images/56dsfa.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&div style="left:0;top:0;"&&a href=" width="780" height="420" src="images/52525.jpg" alt="2012淘宝商城最新多格焦点图源代码" /&&/a&&/div&
&&&&推荐文章:
【上篇】【下篇】