& & & & & & & & & & & & & & & & & & & & & & & & & & & & JavaScript. Code& & /**& & * JS文件& & */& & // 在Chrome测试时一直无法支持jQuery的 $(function(){}) 和 $(document).ready(),所以改用原生window.& & window.onload = function (){& & /**& & * box&&&幻灯片外框(div)& & * uls&&&幻灯片图片外框(ul)& & * order&&图片序列号外框(div)& & * lis&&&图片外框(li)& & * wdiths&图片集的总宽度& & * runtime&定时器自行时间(毫秒)& & * latency&定时器延迟时间(毫秒)& & * control&控制器，控制定时器的执行& & * num&&&当前li标签在兄弟集合中的位置& & * winW&&浏览器可视区域宽度& & */& & var box = $(&#39;#slide_box&#39;),uls = $(&#39;ul.slide_img&#39;),order = $(&#39;#slide_order&#39;,box),lis = $(&#39;li&#39;,uls),widths = 0,runtime = 600,latency = 2000,control,num = 0,winW = $(window).width();& & // 计算li标签宽度总和与插入img序号& & for (var i = 0; i < lis. i++) {& & widths += lis.eq(i).width();& & order.append(&#39;&#39;);& & };& & // 设置ul的宽度等于所有li标签宽度的总和；& & uls.width(widths);& & // 设置box位置居中& & box.css({left : (winW - box.width())/2});& & // 给第一个序号&#39;1&#39;添加class& & order.find(&#39;a&#39;).removeClass(&#39;current&#39;).eq(num).addClass(&#39;current&#39;);& & //规定时间后执行函数& & control = setTimeout( slide, latency );& & // 幻灯片自动运行函数& & function slide () {& & // 初始化width& & var width = 0;& & num = num < lis.length - 1 ? (num + 1) : 0;& & // box旧的宽度& & var old_box_width = box.width();& & // box新的宽度& & var lis_now_width = lis.eq(num).width();& & // 改变box的宽度 = 当前图片的宽度 和 left值& & box.animate({width : lis_now_width,left : (winW - lis_now_width)/2},runtime);& & // 计算第一张图到当前图片的宽度总和& & for (var j = 0; j < j++) {& & width += lis.eq(j).width();& & };& & // 设置当前的序号添加class& & order.find(&#39;a&#39;).removeClass(&#39;current&#39;).eq(num).addClass(&#39;current&#39;);& & // 改变ul的left值& & uls.animate({left: 0 - width}, runtime, function () {& & control = setTimeout( slide, latency );& & });& & }& & // 点击图片序号函数& & $(&#39;a&#39;,order).live({& & click: function () {& & // 立即停止uls当前正在执行的动作& & uls.stop();& & //清除定时器& & clearTimeout(control);& & num = $(this).index() - 1;& & slide();& & }& & });& & };
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
上一篇：下一篇：
相关经验教程
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益> 自适应幻灯图片宽度的jQuery焦点幻灯轮播代码
自适应幻灯图片宽度的jQuery焦点幻灯轮播代码
今天介绍的是一款较特别的jQuery焦点幻灯轮播代码，支持随幻灯图片宽度大小自动缩放，高度保持不变，看惯了千篇一律的特效，这个幻灯插件也许能给你带来耳目一新的感觉。
很炫酷很精致漂亮的jquery幻灯代码，支持滑动式浏览幻灯大图，支持缩略图预览和幻灯图文字描述，有图片播放提示功能，支持焦点按钮和左右箭...
简单实用的jquery焦点幻灯轮换代码，支持图标式缩略小图和标题文字简要功能，幻灯切换以上下滑动方式过渡，适合作网站首页的广告展示。
基于jquery的焦点幻灯轮换代码，具有百叶窗和淡入淡出幻灯特效，有多种不同的幻灯图浏览控制方式，带暂停和播放的左右箭头按钮，有缩略图的...
支持6屏自动轮播的jQuery焦点幻灯片特效，带有幻灯图片标题和简介描述功能，幻灯片尺寸为650x280像素，适合做图片资讯头条推荐。
基于jquery的一款焦点幻灯片源代码，支持淡入淡出的幻灯效果，可以自定义多幅幻灯图轮播，效果比较简单，也很容易使用，推荐下载！
这款960宽屏jquery焦点幻灯轮播代码，以百叶窗过渡效果切换图片，支持右上角缩略小图预览，带有左右箭头方式控制幻灯，幻灯尺寸大小是960x360像素。
基于jquery的一款左右滑动式焦点幻灯代码，能支持多图显示，并且带有幻灯图标题显示功能，代码比较简单，很好整合到网站中去。
基于jquery的焦点幻灯轮播代码，支持全屏自适应宽度的响应式设计，可以自定义多张幻灯图片，视觉效果很不错！
这款漂亮的8屏jQuery幻灯片代码，支持幻灯图片标题和文字简要描述，右侧带有缩略小图预览导航，幻灯大图尺寸为990x354像素，缩略小图是125x70像素。
超酷的一款jquery幻灯片特效代码，带有缩略小图导航预览，并有多种不同的幻灯效果，如手风琴特效、马赛克特效、淡入淡出特效等，右上角支持...
基于jquery的一款漂亮幻灯片特效，带有两种不同的幻灯片效果，支持鼠标滑过渐变切换幻灯图片，有焦点按钮控制幻灯图切换。
简洁版的jQuery轮播幻灯片代码，带有淡入淡出的渐变过场特效，幻灯片尺寸495x431像素，代码比较简单，可以自由修改幻灯片尺寸。
这是一款很有特色的jquery幻灯片轮播特效代码，采用左右箭头翻页式控制幻灯图片播放，以向前放大图片的立体特效切换幻灯图片，幻灯大图尺寸...
以百叶窗式过场特效切换幻灯图的jquery幻灯片代码，左右箭头控制幻灯图片播放，每切换一张幻灯图时自动弹下图片标题和简介区块，新颖的文字...
基于jquery的一款宽屏焦点幻灯特效，支持自适应浏览器宽度缩放幻灯图尺寸，有焦点按钮控制幻灯图切换，宽屏的幻灯片效果很有视觉冲击力。
挺漂亮的一款五屏jquery焦点幻灯轮播特效代码，支持980x470宽屏幻灯大图，带缩略小图预览，幻灯图以淡入淡出切换过渡，效果很不错。
基于jquery焦点幻灯片轮换代码，没有很炫的特效，简单好用，淡入淡出方式切换幻灯图，支持自定义多张幻灯图，大图尺寸为978x286像素。
支持1920像素全屏轮播的jquery左右滑动式幻灯片代码，左右滑动式切换幻灯图片，良好的浏览器兼容性，包括石器时代的IE6都能完美支持，幻灯...
带左右箭头切换的jquery焦点幻灯片代码，以淡入淡出切换，效果简洁，功能实用，幻灯图片尺寸为625x315像素，幻灯图数量和尺寸可以修改成适合大小。
基于jquery的三屏焦点幻灯片轮播代码，带有动态效果的缩略小图预览和文字标题显示，幻灯图尺寸：930x300像素，可以自行修改成其它规格的尺寸。
jQuery幻灯
jQuery幻灯
jQuery幻灯
jQuery幻灯简单响应式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
分享给朋友：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）百度图片那样的图片自适应方式_百度知道
百度图片那样的图片自适应方式
683*576，下为），四部分(每块683*384)，683*384）要显示多张图片轮播，三部分（上部分1&#47项目需要。重点是有些分块区域（，客户想放进同一张图片向百度图片那样能够自己适应分辨率大小;4，要把的网页分成三种方式显示：两部分（上部分，每块683*576），可以自由选择分块数量，不至于造成图片拉伸变形，怎么弄啊，下部分平分两块
提问者采纳
这个你可以写个方法获取到图片轮播的区域大小，然后动态设定轮播图片的比例大小，就不会变形了。
提问者评价
其他类似问题
百度图片的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁