源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 4828|回复: 1

[CSS/Html] js+css制作的幻灯片特效代码,实用性高可以用作各种场景的2次修改美化

[复制链接]

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
发表于 2023-2-5 23:51:46 | 显示全部楼层 |阅读模式

为了制作一款比较不错的幻灯片代码,我真的是找了很多的地方,问题多多!

这里贴出一款简单效果幻灯片特效代码,可塑性非常高!

先给大家看下效果图:



贴出全部代码(图片自己替换搞定):


  1. <style>
  2. .box{width: 370px;height: 228px;overflow: hidden;position: relative;}
  3. .box-1 ul{list-style: none;}
  4. .box-1 ul li{width: 370px;height: 228px;position: relative;overflow: hidden;list-style: none;}
  5. .box-1 ul li img{display:block;width: 370px; height: 228px;}
  6. .box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:370px;background: rgba(0,0,0,.5);text-indent: 1em;font-size: 13px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-weight: normal;color: ghostwhite; text-align:left;}
  7. .box-2{position: absolute;right: 10px;bottom: 14px;}
  8. .box-2 ul li{float:left;width: 6px;height: 6px;overflow: hidden; margin: 0 5px; border-radius: 50%;background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;list-style: none;}
  9. .box-2 ul .on{background: rgba(255,255,255,0.6);}
  10. .box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 30px;height: 48px;top:50%; font-family: "宋体";line-height: 48px;font-size:30px;margin-top: -30px;text-align: center;cursor: pointer;}
  11. .box-3 .prev{left: 10px;}
  12. .box-3 .next{right: 10px;}
  13. .box-3 span::selection{background: transparent;}
  14. .box-3 span:hover{background: rgba(125,125,120,.8);}
  15. </style>
  16. <div class="box">
  17.                         <div class="box-1">
  18.                                 <ul>
  19.                                         <li>
  20.                                                 <img src="/d/file/p/2023/02-04/e1xb5atqegj.jpg" alt="这里是第一场图片"></img>
  21.                                                 <h2>这里是第一张图片这里是第一张图片</h2>
  22.                                         </li>
  23.                                         <li>
  24.                                                 <img src="/d/file/p/2023/02-04/ipoh0ih0sjz.jpg" alt="这里是第二张图片"></img>
  25.                                                 <h2>这里是第二张图片这里是第二张图片</h2>
  26.                                         </li>
  27.                                         <li>
  28.                                                 <img src="/d/file/p/2023/02-04/oyudc3yq5im.jpg" alt="这里是第三张图片"></img>
  29.                                                 <h2>这里是第三张图片这里是第三张图片</h2>
  30.                                         </li>
  31.                                         <li>
  32.                                                 <img src="/d/file/p/2023/02-04/pf5yfqfognl.jpg" alt="这里是第一场图片"></img>
  33.                                                 <h2>这里是第四张图片这里是第四张图片</h2>
  34.                                         </li>
  35.                                         <li>
  36.                                                 <img src="/d/file/p/2023/02-04/ipoh0ih0sjz.jpg" alt="这里是第一场图片"></img>
  37.                                                 <h2>这里是第五张图片这里是第五张图片</h2>
  38.                                         </li>
  39.                                 </ul>
  40.                         </div>
  41.                         <div class="box-2">
  42.                                 <ul>
  43.                                        
  44.                                 </ul>
  45.                         </div>
  46.                         <div class="box-3">
  47.                                 <span class="prev"> < </span>
  48.                                 <span class="next"> > </span>
  49.                         </div>
  50.                 </div>
  51.         <script type="text/javascript">
  52.                 window.onload = function(){
  53.                         function $(param){
  54.                                 if(arguments[1] == true){
  55.                                         return document.querySelectorAll(param);
  56.                                 }else{
  57.                                         return document.querySelector(param);
  58.                                 }
  59.                         }
  60.                         var $box = $(".box");
  61.                         var $box1 = $(".box-1 ul li",true);
  62.                         var $box2 = $(".box-2 ul");
  63.                         var $box3 = $(".box-3");
  64.                         var $length = $box1.length;
  65.                        
  66.                         var str = "";
  67.                         for(var i =0;i<$length;i++){
  68.                                 if(i==0){
  69.                                         str +="<li class='on'>"+(i+1)+"</li>";
  70.                                 }else{
  71.                                         str += "<li>"+(i+1)+"</li>";
  72.                                 }
  73.                         }
  74.                         $box2.innerHTML = str;
  75.                        
  76.                         var current = 0;
  77.                        
  78.                         var timer;
  79.                         timer = setInterval(go,2000);
  80.                         function go(){
  81.                                 for(var j =0;j<$length;j++){
  82.                                         $box1[j].style.display = "none";
  83.                                         $box2.children[j].className = "";
  84.                                 }
  85.                                 if($length == current){
  86.                                         current = 0;
  87.                                 }
  88.                                 $box1[current].style.display = "block";
  89.                                 $box2.children[current].className = "on";
  90.                                 current++;
  91.                         }
  92.                        
  93.                         for(var k=0;k<$length;k++){
  94.                                 $box1[k].onmouseover = function(){
  95.                                         clearInterval(timer);
  96.                                 }
  97.                                 $box1[k].onmouseout = function(){
  98.                                         timer = setInterval(go,2000);
  99.                                 }
  100.                         }
  101.                         for(var p=0;p<$box3.children.length;p++){
  102.                                 $box3.children[p].onmouseover = function(){
  103.                                         clearInterval(timer);
  104.                                 };
  105.                                 $box3.children[p].onmouseout = function(){
  106.                                         timer = setInterval(go,2000);
  107.                                 }
  108.                         }
  109.                        
  110.                         for(var u =0;u<$length;u++){
  111.                                 $box2.children[u].index  = u;
  112.                                 $box2.children[u].onmouseover = function(){
  113.                                         clearInterval(timer);
  114.                                         for(var j=0;j<$length;j++){
  115.                                                 $box1[j].style.display = "none";
  116.                                                 $box2.children[j].className = "";
  117.                                         }
  118.                                         this.className = "on";
  119.                                         $box1[this.index].style.display = "block";
  120.                                         current = this.index +1;
  121.                                 }
  122.                                 $box2.children[u].onmouseout = function(){
  123.                                         timer = setInterval(go,2000);
  124.                                 }
  125.                         }
  126.                        
  127.                         $box3.children[0].onclick = function(){
  128.                                 back();
  129.                         }
  130.                         $box3.children[1].onclick = function(){
  131.                                 go();
  132.                         }
  133.                         function back(){
  134.                                 for(var j =0;j<$length;j++){
  135.                                         $box1[j].style.display = "none";
  136.                                         $box2.children[j].className = "";
  137.                                 }
  138.                                 if(current == 0){
  139.                                         current = $length;
  140.                                 }
  141.                                 $box1[current-1].style.display = "block";
  142.                                 $box2.children[current-1].className = "on";
  143.                                 current--;
  144.                         }
  145.                 }
  146.         </script>
复制代码

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
 楼主| 发表于 2023-2-5 23:52:11 | 显示全部楼层
为了不扰乱会员对源码的测试,有问题咨询右侧客服不要直接回复,否则视为非法信息屏蔽会员ID!
老乞丐辛苦优化的代码,希望大家能用得着!
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-10-13 11:59 , Processed in 0.112420 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明