CSS+HTML+JS创作出五彩斑斓的相册页面

CSS+HTML+JS创作出五彩斑斓的轮播图相册页面

效果
在这里插入图片描述

CSS和HTML代码:

<!DOCTYPE html><html lang="en">
<head>   
 <meta charset="UTF-8">
 <script src="animate.js"></script>   
 <title></title>   
 <style>    
     * {       
           margin: 0;       
           padding: 0;       
           list-style: none;   
     }
   body {     
          position: relative;   
          background-color: #000;   
          overflow: hidden;    
       }
   span {       
    	   position: absolute;  
           left: 0;           
           width: 30px;      
           height: 30px;     
           border-radius: 50%;      
           position: absolute;        
           background-size: 100% 100%;       
           animation: flash 1s alternate infinite;   
        }
   @keyframes flash {      
              0% {                opacity: 0;            }
            100% {                opacity: 1;            } 
            }      
  span:hover {            animation: none;        }
 .div1 {         
          position: relative;
          left: 30%;        
          top: 200px;    
          width: 500px;    
          height: 300px;      
          overflow: hidden;
          z-index: 2;
        }
 .div1 ul { 
            position: absolute;          
              top: 0;            
              left: 0;          
                width: 1500%;
         }
 ul li {      
       position: relative;            
       float: left;            
       width: 500px;            
       height: 300px;            
       list-style: none;        
       }
 ul li img {           
 	 width: 100%;           
  	 height: 100%;   
  	  }
 .div1 .current {            
 	color: orange;
       }
.ol1 {           
	position: absolute;           
	top: 260px;           
	left: 100px;           
	height: 20px;           
	padding-left: 5px;            
	border-radius: 10px;            
	background-color: rgba(0, 0, 0, .3);       
}
 li {           
  	float: left;            
  	margin-left: 25px;           
   	font-size: 25px;            
   	line-height: 20px;           
    	color: #fff;           
     	list-style-type: disc;           
        cursor: pointer;     
     }
#myDiv {            
	position: absolute;            
	top: 120px;            
	left: 35%;            
	color: white;            
	font-size: 25px;            
	width: 400px;            
	height: 20px;        
       }
#myDiv1 {            
	position: absolute;            
	top: 520px;            
	left: 34%;            
	color: white;            
	font-size: 25px;            
	width: 400px;           
	height: 20px;        
}
 iframe {            
	position: absolute;            
	top: -100px;            
	left: 550px;            
	opacity: 0.1;        
	}    
</style>
</head>

<body>    
	<iframe src="music/音乐串烧.mp3" frameborder="0"></iframe>  
	<div id="myDiv">今夜星光闪闪,我爱你的心满满</div>    
       <div id="myDiv1">想你一晚又一晚,我爱你的心都填满</div>    
    		<!-- 文字闪烁 -->    
<script>        
	start();        
	var flag = 0;       
 	function start() {           
  	var text = document.getElementById("myDiv");           
   	var text1 = document.getElementById("myDiv1");           
   var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
   if (!flag) {            		                   
   text.style.color = color;                
   text1.style.color = color;                
   // text.style.backgroundColor = "#0000ff";                
   flag++;           
    } else if (flag == 1) {  
        text.style.color = "";               
         text1.style.color = "";               
          flag++;           
           } else if (flag == 2) {      
         text.style.color = color;                
         text1.style.color = color;                
         flag++;            
         } else if (flag == 3) {                
         text.style.color = color;               
          text1.style.color = color;                
          flag++;            
          } else if (flag == 4) {               
          text.style.color = color;               
          text1.style.color = color;               
          flag++;            
         } else if (flag == 5) {                
           text.style.color = color;               
           text1.style.color = color;               
           flag++;           
         } else if (flag == 6) {                
           text.style.color = color;               
           text1.style.color = color;                
           flag++;            
         } else {               
            flag = 0;            
         }           
         setTimeout("start()", 200);       
        }   
   </script>

    <!-- 满天星 -->    
    <span></span>    
    <script>        
    window.onload = function () {            
    // 屏幕的尺寸           
     var screenW = document.documentElement.clientWidth;            
     var screenH = document.documentElement.clientHeight;
   //动态创建多个圆     
     for (var i = 0; i < 300; i++) {                
     var span = document.createElement('span');
     document.body.appendChild(span);                	    
     //位置随机                
     var x = parseInt(Math.random() * screenW);                
     var y = parseInt(Math.random() * screenH);
     span.style.left = x + 'px';                   	               
     span.style.top = y + 'px';
      //大小随机                
     var scale = Math.random() * 1.5;                
     span.style.transform = 'scale(' + scale + ', ' + scale + ')';
      //频率随机                
      var rate = Math.random() * 1.5;
      span.style.animationDelay = rate + 's';                	 
       //颜色随机                
       var color = '#' + Math.floor(Math.random() * 16777215).toString(16);                               
       span.style.background = color;
       }        
       }   
   </script>
    <div class="div1">        
    <ul>            
    <li><img src="img/1.jpeg" alt=""></li>
       <li><img src="img/2.jpeg" alt=""></li>
       <li><img src="img/3.jpeg" alt=""></li>            
       <li><img src="img/4.jpeg" alt=""></li>            
       <li><img src="img/5.jpeg" alt=""></li>            
       <li><img src="img/6.jpeg" alt=""></li>           
        <li><img src="img/7.jpeg" alt=""></li>            
        <li><img src="img/8.jpeg" alt=""></li>            
        <li><img src="img/10.jpeg" alt=""></li>            
        <li><img src="img/17.jpeg" alt=""></li>            
        <li><img src="img/18.jpeg" alt=""></li>       
         </ul>        
         <ol class="ol1"> </ol>    
         </div>
    	<script>        
    	//1.获取元素        
    	var div1 = document.querySelector('.div1');        
    	var ul = document.querySelector('ul');        
    	var ol = document.querySelector('.ol1');        
    	var div1Width = div1.offsetWidth;
        for (var i = 0; i < ul.children.length; i++) {           
         var li = document.createElement('li'); //创建li节点   
         li.setAttribute('index', i);    //自定义属性index 
       ol.appendChild(li);     //添加li节点到ol里面              		       
  // 点击li事件            
 li.addEventListener('click', function () {                //排他思想  
  for (var i = 0; i < ol.children.length; i++) {
  ol.children[i].className = '';                                                      
  }                
  this.className = 'current';               
   var index = this.getAttribute('index');                
   animate(ul, -index * div1Width * 1.06);            
   })        
   }       
    //把ol里面的第一个小li设置类名为 current       
     ol.children[0].className = 'current';
        // 鼠标经过事件        
        div1.addEventListener('mouseenter', function () {
        clearInterval(timer);            	               
        timer = null;        
        });        
        // 鼠标离开事件        
        div1.addEventListener('mouseleave', function () {            
        timer = setInterval(function () {                
        ul.click();         
}, 2000);        
})        
// 模仿右箭头        
var first = ul.children[0].cloneNode(true);        
ul.appendChild(first);       
 var num = 0;//控制图片移动        
 var circle = 0;//控制li移动        //节流阀        
 var flag = true;        
 ul.addEventListener('click', function () {           
  if (flag) {               
   flag = false;               
    if (num == ul.children.length - 1) {                   
     ul.style.left = 0;                    
     num = 0;                
     }               
      num++;                
      animate(ul, -num * div1Width * 1.06, function () {
      flag = true;                                      
      });                
      circle++;               
       if (circle == ol.children.length) {                    
       circle = 0;                
       }               
      for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';                                
         }               
      ol.children[circle].className = 'current';          
        }        
       }       
       )        
       //自动播放        
      var timer = setInterval(function () {            
      ul.click();        }, 2000)    
       </script>
   </body>
</html>

JS代码(命名为animate.js):


function animate(obj, target, collback) {    
//先清除以前的定时器,只保留当前的一个定时器执行    
clearInterval(obj.timer);    
obj.timer = setInterval(function () {        
//把步长值改为整数        
var step = (target - obj.offsetLeft) / 10;//步长公示:(目标值 - 现在的位置) /10        
step = step > 0 ? Math.ceil(step) : Math.floor(step);        
if (obj.offsetLeft == target) {            
clearInterval(obj.timer);                   
 collback && collback();        
 }        
 obj.style.left = obj.offsetLeft + step + 'px';    }, 15);}

最后还需创建一个img文件夹和一个music文件夹,把音乐、文字和图片换成自己喜欢的即可!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值