原生js实现底部带缩略图的图片淡入淡出切换特效源码.zip资源-CSDN文库

共25个文件

jpg：20个

html：1个

css：1个

版权申诉

52 浏览量 2022-11-10 03:39:33 上传评论收藏 620KB ZIP 举报

在前端开发中，实现动态效果和交互是提升用户体验的关键因素之一。这个压缩包"原生js实现底部带缩略图的图片淡入淡出切换特效源码.zip"提供了一个使用纯JavaScript实现的图片切换功能，它带有底部的缩略图导航，并且在切换时有淡入淡出的效果。下面我们将详细探讨这一技术实现。原生JavaScript是不依赖任何库（如jQuery）的编程，这意味着我们可以直接操作DOM元素，监听事件，以及创建动画效果。在这个案例中，开发者利用JavaScript来处理图片的加载、切换和动画效果。 1. **图片切换**：在网页上，通常会有一个主图片容器和一个展示缩略图的区域。当用户点击或鼠标悬停在缩略图上时，对应的主图片会进行切换。开发者通过获取每个缩略图的index，然后根据该索引加载对应的主图片。 2. **淡入淡出效果**：实现这种过渡效果通常涉及到CSS和JavaScript的结合。CSS中，可以为图片设置初始透明度为0，然后通过JavaScript改变图片的透明度，从0渐变到1，完成淡入；而从当前图片淡出时，则是将当前图片的透明度从1渐变到0，同时加载下一张图片并将其透明度从0渐变到1，这样就形成了无缝切换的视觉效果。 3. **事件监听**：为了响应用户的操作，需要在JavaScript中添加事件监听器，如`click`或`mouseover`。当这些事件触发时，执行相应的切换图片和动画效果的函数。 4. **DOM操作**：原生JavaScript提供了`getElementById`、`getElementsByClassName`、`querySelector`等方法来选取DOM元素，然后通过`innerHTML`、`style`属性等修改元素的内容和样式，以实现图片的加载和布局调整。 5. **计时器和动画帧**：为了平滑地执行动画，开发者可能使用`setTimeout`或`requestAnimationFrame`。`requestAnimationFrame`在浏览器下一次重绘之前执行，确保动画流畅，避免性能问题。 6. **性能优化**：考虑到图片切换可能会引起重排和重绘，开发者可能会使用CSS3的`opacity`而非`display`属性来控制图片的可见性，因为前者只触发重绘，而不影响布局。此外，预加载图片以减少延迟也是一个常见的优化策略。在实际项目中，这样的代码可能还会包含错误处理、响应式设计、兼容性处理等内容，以确保在各种设备和浏览器上都能正常工作。通过分析这个源码，开发者可以学习到如何利用原生JavaScript实现动态效果，提高自己的前端技能。

资源推荐

资源详情

资源评论

收起资源包目录

原生js实现底部带缩略图的图片淡入淡出切换特效源码.zip （25个子文件）

132686907441453776

css

style.css 3KB

images

img01s.jpg 2KB

img09s.jpg 2KB

img04.jpg 136KB

img01.jpg 63KB

img09.jpg 59KB

img10.jpg 56KB

img07.jpg 53KB

img06s.jpg 4KB

scrollimg.png 3KB

img05s.jpg 3KB

img02.jpg 38KB

img10s.jpg 1KB

img08.jpg 50KB

img03.jpg 53KB

img08s.jpg 1KB

img02s.jpg 1KB

img_default.gif 43B

img06.jpg 44KB

img05.jpg 40KB

img07s.jpg 3KB

img04s.jpg 3KB

img03s.jpg 4KB

index.html 6KB

script.js 6KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>十屏带缩略图和标题显示的js幻灯片轮播代码</title> <link media="all" href="css/style.css" type="text/css" rel="stylesheet" /> <script src="js/script.js" type="text/javascript"></script> </HEAD> <BODY> <div class="box"> <div class="scrollimg2"> <div id="SwitchBigPic"> <div class="scrollimg2_bigimg" id="showDiv_0" style="display:block"> <div><a href="#"><img id="bigpic_0" src="images/img01.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_0"></div> <a class="scrollimg2_txt" id="title_0" href="#">《倩女幽魂》经典魔幻武侠改编古天乐、刘亦菲、余少群人鬼三角恋</a> </div> <div class="scrollimg2_bigimg" id="showDiv_1"> <div><a href="#"><img id="bigpic_1" src="images/img02.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_1"></div> <a class="scrollimg2_txt" id="title_1" href="#">《夺帅》港产动作三级片洪金宝、任达华、吴京血腥杀戮，万劫不复 </a> </div> <div class="scrollimg2_bigimg" id="showDiv_2"> <div><a href="#"><img id="bigpic_2" src="images/img03.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_2"></div> <a class="scrollimg2_txt" id="title_2" href="#">北条司经典同名漫画作品改编韩版“道明寺”打破冷酷形象搞笑出演</a> </div> <div class="scrollimg2_bigimg" id="showDiv_3"> <div><a href="#"><img id="bigpic_3" src="images/img04.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_3"></div> <a class="scrollimg2_txt" id="title_3" href="#">《家，N次方》80后视角看重组家庭赵宝刚携手宋丹丹进入第3次婚姻 </a> </div> <div class="scrollimg2_bigimg" id="showDiv_4"> <div><a href="#"><img id="bigpic_4" src="images/img05.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_4"></div> <a class="scrollimg2_txt" id="title_4" href="#">动感夏日炫彩T恤全场29元</a> </div> <div class="scrollimg2_bigimg" id="showDiv_5"> <div><a href="#"><img id="bigpic_5" src="images/img06.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_5"></div> <a class="scrollimg2_txt" id="title_5" href="#">好乐买李宁特卖场全场99元</a> </div> <div class="scrollimg2_bigimg" id="showDiv_6"> <div><a href="#"><img id="bigpic_6" src="images/img07.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_6"></div> <a class="scrollimg2_txt" id="title_6" href="#">范冰冰：时尚网购就上梦芭莎！注册即送100元</a> </div> <div class="scrollimg2_bigimg" id="showDiv_7"> <div><a href="#"><img id=bigpic_7 src="images/img08.jpg" /><span class="scrollimg2_hd">高清标识</span></a></div> <div class="scrollimg2_bg" id="title_bg_7"></div> <a class="scrollimg2_txt" id="title_7" href="#">经典电影《魔鬼总动员》阿诺施瓦辛格、莎朗斯通主演科幻动作片</a> </div> <div class="scrollimg2_bigimg" id="showDiv_8"> <div><a href="#"><img id="bigpic_8" src="images/img09.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_8"></div> <a class="scrollimg2_txt" id="title_8" href="#">《关云长》迅雷独家首发，高清大片至尊专享，看甄子丹姜文双雄交锋！</a> </div> <div class="scrollimg2_bigimg" id="showDiv_9"> <div><a href="#"><img id=bigpic_9 src="images/img10.jpg" /></a></div> <div class="scrollimg2_bg" id="title_bg_9"></div> <a class="scrollimg2_txt" id="title_9" href="#">凯迪拉克SRX微电影II《66号公路》全版献映 </a> </div> </div> <div class="scrollimg2_tigger"> <div class="scrollimg2_tigger_hoverbg" id="bigHover"></div> <ul> <li><a href="#"><img id="big_pic_nav_on_0" src="images/img01s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_1" src="images/img02s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_2" src="images/img03s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_3" src="images/img04s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_4" src="images/img05s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_5" src="images/img06s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_6" src="images/img07s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_7" src="images/img08s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_8" src="images/img09s.jpg" /></a> </li> <li><a href="#"><img id="big_pic_nav_on_9" src="images/img10s.jpg" /></a> </li> </ul> <ul class="scrollimg2_tigger_link"> <li><a id="big_pic_nav_0" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_1" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_2" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_3" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_4" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_5" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_6" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_7" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_8" href="#"><img src="images/img_default.gif" /></a> </li> <li><a id="big_pic_nav_9" href="#"><img src="images/img_default.gif" /></a></li> </ul> </div> </div> </div> <script type="text/javascript"> var MovieRecom={ step:(62+6), hover:"bigHover", //hover bigpic:"SwitchBigPic", //大图div之ID通用部分 smallpic:"big_pic_nav",//小图之ID通用部分 selectstyle:"currA", //小图被选中之后的CSS pictxt:"", //配套图片文字 totalcount:10, //图片数量 autotimeintval:5000, objname:"MovieRecom", //对象名称 css:"display:none;position:absolute;left:0;top:0;width:694px;height:261px;overflow:hidden;" //css }; BigNews.init(MovieRecom); </script> </body> </html>

评论收藏

内容反馈

版权申诉