图像特效_图片翻滚、图片展示、图片播放等相关网页特效
您的位置： &
相关排行总榜插件描述：今天我要给大家介绍的是一款响应式的图片轮播插件：Carousel。这款插件有一个很赞的特点，当我们改变浏览器的大小的时候，整个图片插件的大小也会随之改变，真正做到了自适应浏览器的变化。
今天我要给大家介绍的是一款响应式的图片轮播插件：Carousel。这款插件有一个很赞的特点，当我们改变浏览器的大小的时候，整个图片插件的大小也会随之改变，真正做到了自适应浏览器的变化。
预览图width=&474& height=&300& title=&自适应图片轮播插件& alt=&自适应图片轮播插件&/&alt=&&/&alt=&&/&
使用步骤1、引入以下的js和css文件&link&rel=&stylesheet&&type=&text/css&&href=&css/demo.css&&
&link&rel=&stylesheet&&type=&text/css&&href=&css/elastislide.css&&
&link&rel=&stylesheet&&type=&text/css&&href=&css/custom.css&&
&script&src=&js/modernizr.custom.17475.js&&&/script&
&script&type=&text/javascript&src=&http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&&&/script&
&script&type=&text/javascript&&src=&js/jquerypp.custom.js&&&/script&
&script&type=&text/javascript&&src=&js/jquery.elastislide.js&&&/script&2、在head标签中加入以下js代码，调用Carousel插件&script&type=&text/javascript&&&&&&&&&&
&&$(function(){
&&&&&&$(&'#carousel'&).elastislide();
&/script&3、在body标签中加入以下格式的html代码。每张图片就是一个 li 标签，需要注意的是，前面的3个demo用到的是小图，而第4个demo则用到了小图和大图。大家可以查看自己喜欢的样式的Demo源代码。&ul&id=&carousel&&class=&elastislide-list&&
&&&&&&&&&a&href=&#&&&img&src=&images/small/1.jpg&&alt=&image01&&&/a&
&&&&&&&&&a&href=&#&&&img&src=&images/small/2.jpg&&alt=&image02&&&/a&
&&&&&&&&&a&href=&#&&&img&src=&images/small/3.jpg&&alt=&image03&&&/a&
&&&&&&&&&a&href=&#&&&img&src=&images/small/4.jpg&&alt=&image04&&&/a&
........................
参数配置Carousel为我们提供了一系列参数供我们自定义该插件：$.Elastislide.defaults&=&{
&&&&//轮播图片方向，默认值:&orientation，可选值：&'horizontal'&||&'vertical'
&&&&orientation&:&'horizontal',
&&&&//滑动速度
&&&&speed&:&500,
&&&&//&滑动效果
&&&&easing&:&'ease-in-out',
&&&&//&显示的最少图片
&&&&//&当我们改变浏览器大小的时候，这会保证总会显示最少的图片数
&&&&//&(当然除非该参数的值要比图片总数还大)
&&&&minItems&:&3,
&&&&//&开始时，最左边显示的图片索引
&&&&start&:&0,
&&&&//&点击每项的回调函数
&&&&onClick&:&function(&el,&position,&evt&)&{&return&&},
&&&&onReady&:&function()&{&return&&},
&&&&onBeforeSlide&:&function()&{&return&&},
&&&&onAfterSlide&:&function()&{&return&&}
};动态添加图片除了将图片写死在html里面以外，我们还可以动态添加图片到插件容器中，请看下面的例子&var&carousel&=&$('#carousel').elastislide();
$('#carousel').append(&&);
carousel.add();
注意：如果你是使用Elastislide 的垂直布局，那么容器的高度将会根据你要显示几张图片来自动调整高度。
相关插件-幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
幻灯片和轮播图
讨论这个项目（11）回答他人问题或分享插件使用方法奖励jQ币
怎么重写onclick方法啊
写错，onclick里面的evt是什么
じ灰色记忆 0
插件特别好 &美中不足的是为什么没有定时播放
ZTsayonara0
只能等你来写一个了
华生°????? 0
我一个页面要放多个这样的效果，怎么就显示一个。
xenia23333 0
很文艺的demo
所谓的自适应的确是宽度，没听过高度自适应
lisa0826 0
亲爱的作者，这个自适应，应该是宽高都有，才叫自适应吧，这个只有宽自适应~~
这个插件没有定时滚动的吗?
魔界小鸟 0
谢谢xe提出的建议，在新发布的插件以全都加入的官网地址。
插件王子 0
希望贵网站以后把每个jquery的插件官网都写在上边，这样方便查看。谢谢。
PROMULGATOR
美国加利福尼亚
关注作者 (932)
收藏此插件 (74)
我当前jQ币余额：正在获取..
已下载次数：3864
所需jQ币：0请问JS轮播代码怎么修改?_百度知道
请问JS轮播代码怎么修改?
对JS一点都不懂所以在网上下载的，想让轮播标题和（123456）数字标签在网页DIV居中左右浮动，而不在屏幕左边和右边，那位大神有空帮忙修改一下，谢谢！
这是html代码
我有更好的答案
这个得修改css 。
这个样式都是JS插入的
如果是js 动态插入的话，也是分情况，如果js 直接引入了一个css文件，那么可以直接改css ，如果直接将样式放在了DOM上，就得需要该JS 了。
样式都写在js里面，其实我是这样想的，用一个DIV（宽度100%）面面再用一个DIV（居中，给一个固定宽度）把标题和数字标签放这里。请问怎么实现？
单独做好做，但是如果要让你的轮播实现这样的话，除非改CSS或者轮播JS源码，也没其他的方法。
采纳率：65%
来自团队：
这么小的字哪看的到，你在懒人站库里下个能用的就好了
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。简单的HTML+js图片轮播?_百度知道
简单的HTML+js图片轮播?
我已经做好了HTML页面如下:
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
&style type=&text/css&&
#tab { overflow: width:400 height:250 posi...
我有更好的答案
&!DOCTYPE&html&&html&&head&&&&&&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/&&&&&&title&无标题文档&/title&&&&&&style&type=&text/css&&&&&&&&&&#tab&{&&&&overflow:&&&&&width:&400&&&&height:&250&&&&position:&&&&&float:&}#tab&img:not(:first-child)&{&&&&display:&}&&&&&/style&&&&&&script&&&&&&&&&var&&&&&&&&&var&pos&=&0;&&&&&&&&window.onload&=&function()&{&&&&&&&&&&&&var&images&=&document.getElementsByTagName('img');&&&&&&&&&&&&var&tab&=&document.getElementById(&tab&);&&&&&&&&&&&&tab.onmouseover&=&function()&{&&&&&&&&&&&&&&&&clearInterval(interval);&&&&&&&&&&&&}&&&&&&&&&&&&tab.onmouseout&=&function()&{&&&&&&&&&&&&&&&&run(images);&&&&&&&&&&&&}&&&&&&&&&&&&run(images);&&&&&&&&}&&&&&&&&var&run&=&function(images)&{&&&&&&&&&&&&interval&=&setInterval(function()&{&&&&&&&&&&&&&&&&images[pos].style.display&=&'none';&&&&&&&&&&&&&&&&pos&=&++pos&==&images.length&?&0&:&&&&&&&&&&&&&&&&&images[pos].style.display&=&'inline';&&&&&&&&&&&&},&1000);&&&&&&&&}&&&&&/script&&/head&&body&&&&&&div&id=&tab&&&&&&&&&&&img&src=&img/01.jpg&&width=&400&&height=&250&&/&&&&&&&&&&img&src=&img/02.jpg&&width=&400&&height=&250&&/&&&&&&&&&&img&src=&img/03.jpg&&width=&400&&height=&250&&/&&&&&&/div&&/body&&/html&
你好，我刚刚试了一下您的修正过的代码后发现了个问题，我鼠标没移动到DIV内图片也在播放呢，将鼠标移动进DIV后图片就停止了。可以修改成鼠标不在DIV内就不播放图片吗？
var pos = 0;
window.onload = function() {
var images = document.getElementsByTagName('img');
var tab = document.getElementById(&tab&);
tab.onmouseover = function() {
run(images);
tab.onmouseout = function() {
clearInterval(interval);
var run = function(images) {
interval = setInterval(function() {
images[pos].style.display = 'none';
pos = ++pos == images.length ? 0 :
images[pos].style.display = 'inline';
&/script&是我看反了你的需求
原来是这样子的，十分感谢您的帮助,谢谢！
采纳率：71%
var is_over = 0;window.onload = function(){& & & &var images = document.getElementsByTagName('img');&&&&& &var &tab =&document.getElementsById('tab');& & & & tab.onmouseover = function(){& & & & & &&is_over = 1;& & & & }& & & & tab.onmouseout = function(){& & & & & &&is_over = 0;& & & & }& & & &var pos = 0;& & & &var len = images.& & & &setInterval(function(){&&&&& & & & if(&!is_over){& & & & & & & & images[pos].style.display = 'none';& & & & & & & & pos = ++pos == len ? 0 :& & & & & & & & images[pos].style.display = 'inline';& & & & & & }& & & &},1000);};
我将代码替换掉&script&结果无法播放图片了呢
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。