jQuery带有呼吸的缩略图(含完整源码)
本文共 2266 字，大约阅读时间需要 7 分钟。
本博文源于jQuery基础，旨在实现带有呼吸的缩略图。
实验效果
实验步骤
测试用图
点击图片另存为如下图的文件结构
small文件夹下的图片
同样以数字命名
书写html结构
大家回想html里面用到了什么？
第一个div中li模拟大图片，第二个div模拟大标题，第三个就是缩小版的图，左右按钮也考虑，中间小图片要有背景比如这种，
因此html代码如下： 
书写css代码
书写的时候就是把浮动，把各种大小考虑进去，如下结构
* { margin: 0; padding: 0;}.carousel { width: 651px; height: 365px; border: 1px solid #333; margin: 100px auto; position: relative;}.carousel .carousel_images ul { list-style: none; position: relative;}.carousel .carousel_images ul li { width: 651px; height: 365px; background-position: center center; position: absolute; top: 0; left: 0; display: none;}.carousel .carousel_images ul li.first{ display: block;}.small_nav { position: absolute; width: 100%; height: 120px; background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 35%, rgba(0, 0, 0, 0.99)); bottom: 0; left: 0;}.small_nav .inner { width: 646px; height: 54px; position: absolute; bottom: 20px; left: 50%; margin-left: -323px; z-index: 2;}.small_nav .inner .left_btn { float: left; width: 31px; height: 54px; background: url(../images/prev.png) center center;}.small_nav .inner .right_btn { float: right; width: 31px; height: 54px; background: url(../images/next.png) center center;}.small_nav .inner .small_nav_pics { float: left; width: 567px; height: 58px; margin-left: 17px; overflow: hidden;}.small_nav h3{ padding-left: 30px; font-size: 24px; color:white; line-height: 30px;}.small_nav .inner .small_nav_pics ul.small_nav_unit { list-style: none; position: relative; width: 5000px;}.small_nav .inner .small_nav_pics ul li { float: left; width: 92px; height: 40px; margin-right: 20px; padding: 7px 2px;}.small_nav .inner .small_nav_pics ul li img { width: 92px; height: 45px;}.small_nav .inner .small_nav_pics ul li.cur { background: url(../images/lion.png);} 书写js代码
左右按钮，还有缩率图的事件进行监听，这部分要注意的。
总结
在制作这个特效时，左右按钮的事件监听一定要注意，会发生什么，图片会动缩略图会动，当单击缩率图时，大图会动，也要考虑，最后代码运行，收获喜悦。
转载地址：http://iard.baihongyu.com/
你可能感兴趣的文章