幻灯片照片特效

很多网站以及博客都有这种带幻灯片的特效，看起来非常酷炫。在这个酷炫的特效的背后主要是通过jquery来实现动态切换，以及html和css实现结构布局。下面是动手自己做一个这样的幻灯片。

学习资料

html/css
javascript
jquery
css布局

html结构

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>幻灯片</title><link rel="stylesheet" type="text/css" href="css/index.css"><script type="text/javascript" src="js/jquery-1.11.3.js"></script><script type="text/javascript" src="js/sliders.js"></script>
</head><body><div id="wrap"><div id="banner"><div id="slide-holder"><div id="slide-runner"><a href="/" target="_blank"><img src="data:images/a1.jpg" id="slide-img-1" /></a><a href="/" target="_blank"><img src="data:images/a2.jpg" id="slide-img-2" /></a><a href="/" target="_blank"><img src="data:images/a3.jpg" id="slide-img-3" /></a><a href="/" target="_blank"><img src="data:images/a4.jpg" id="slide-img-4" /></a></div><h2 id="caption">Caption</h2><h3 id="description">description</h3><div id="slide-controls"><button id="slide-next">next</button><button id="slide-pre">pre</button></div></div><script type="text/javascript">if (!window.slider) {var slider = {};}slider.data = [{"id": "slide-img-1","caption": "标题1","description": "给点描述吧"}, {"id": "slide-img-2","caption": "标题2","description": "给点描述吧"}, {"id": "slide-img-3","caption": "标题3","description": "给点描述吧"}, {"id": "slide-img-4","caption": "标题4","description": "给点描述吧"}];</script></div></div>
</body></html>

CSS样式表

/* 幻灯片 */* {padding: 0px;margin: 0px;
}#wrap {width: 670px;position: relative;margin: 10px auto;
}#banner {width: 670px;height: 280px;position: relative;
}#slide-holder {width: 670px;height: 280px;position: relative;overflow: hidden;
}#slide-runner {position: relative;
}#slide-runner img {width: 670px;height: 280px;position: absolute;
}#slide-controls {width: 670px;height: 20px;bottom: 0px;background-color: red;position: absolute;
}#slide-pre,
#slide-next {background-color: red;border: 0px;height: 20px;width: 40px;
}#slide-pre {float: right;margin-right: 10px;
}#slide-next {float: right;
}#slide-img-2 {left: 670px;
}#caption {position: absolute;left: 100px;top: 100px;
}#description {position: absolute;left: 150px;top: 150px;
}

JS实现切换

$(function() { //页面加载完全后执行//绑定click事件，幻灯片切换按钮$("#slide-next").bind("click", slider.next);$("#slide-pre").bind("click", slider.pre);//标题隐藏$("#caption").hide();$("#description").hide();slider.init();
});var slider = {num: -1, //幻灯片中照片数interval: 700, //照片偏移间隔index: 0, //当前照片的索引//幻灯片初始化init: function() {if (!slider.data || !slider.data.length) {return false;}var data = slider.data; //index.html输入的数据                           slider.num = data.length; //幻灯片数量for (var i = 0; i < slider.num; i++) { //设置照片的偏移量，超出外围的隐藏$('#' + data[i].id).css({left: (i * slider.interval)}); //设置left的偏移量}//填充标题以及描述字符$("#caption").html(slider.data[0].caption);$("#description").html(slider.data[0].description)//动画显示$("#caption").show(1000);$("#description").show(1000);},//前一张照片pre: function() {if (slider.index != 0) { //是否是第一张照片判断slider.index -= 1;//先隐藏标题和描述字符，然后在动态显示出来$("#caption").hide();$("#description").hide();//动画效果，移动#slide-runner实现画面切换$("#slide-runner").animate({left: "+=" + slider.interval + "px"}, 1000, function() {//动画完成之后执行的函数//动画显示标题以及描述$("#caption").html(slider.data[slider.index].caption);$("#description").html(slider.data[slider.index].description);$("#caption").show(1000);$("#description").show(1000);});}},//后一张照片next: function() {if (slider.index < (slider.num - 1)) { //判断是否是最后一张照片slider.index += 1;//先隐藏标题和描述字符，然后在动态显示出来$("#caption").hide();$("#description").hide();//动画效果，移动#slide-runner实现画面切换$("#slide-runner").animate({left: "-=" + slider.interval + "px"}, 1000, function() {//动画完成之后执行的函数//动画显示标题以及描述$("#caption").html(slider.data[slider.index].caption);$("#description").html(slider.data[slider.index].description);$("#caption").show(1000);$("#description").show(1000);});}}
}

JS+CSS实现幻灯片相关推荐

js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播
我也不知道叫什么功能通通叫出来得了,js滚动,滑动,幻灯片,轮播图下载插件swipe.js,swipe.css ( http://download.csdn.net/download/u014596 ...
一款基于TweenMax.js的网页幻灯片
之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览源码下载实现的代码. ...
一款基于TweenMax.js的网页幻灯片(转)
之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览源码下载实现的代码. ...
很不错的JS+CSS滑动门_网页代码站(www.webdm.cn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
很不错的JS+CSS滑动门
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
reveal.js + markdown 制作幻灯片
reveal.js + markdown 制作幻灯片--0 reveal.js是一款通过利用HTML快速创建演示文稿,并且具有很多功能:垂直,水平幻灯片:支持Markdown,LaTex:演讲者注释: ...
reveal.js + markdown 制作幻灯片——配置选项，幻灯片背景，尺寸，插入媒体，链接
reveal.js + markdown 制作幻灯片--配置选项,幻灯片背景,尺寸,插入媒体,链接配置选项配置选项在index.html文件的<body>中,通过Reveal.init ...
js 判断js,css是否引入，确保不重复引入
js 判断js,css是否引入,确保不重复引入 (2009-10-31 21:33:44) 转载▼ 标签: 杂谈分类: js 基本原理: function loadjscssfile(filenam ...
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...

JS+CSS实现幻灯片

幻灯片照片特效

学习资料

html结构

CSS样式表

JS实现切换

JS+CSS实现幻灯片相关推荐

最新文章

热门文章