开发者社区> 普门教育> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js轮播图实现透明度切换

简介: 涉及知识点:js、轮播图、透明度、js透明度切换轮播图。
+关注继续查看

涉及到js、轮播图、透明度、js透明度切换轮播图等知识点。

结果展示

image.png

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 border:none;
 }
 li{
 list-style: none;
 }
 #box{
 height:340px;
 width:790px;
 position: relative;
 margin:100px auto;

 }
 #box #list1{
 height:340px;
 width:790px;

 }
 #box #list1 li{
 font-size: 80px;
 line-height: 340px;
 text-align: center;
 height:340px;
 width:790px;
 position: absolute;
 left:0;
 top:0;
 opacity: 0;
 filter: alpha(opacity=0);
 }
 #box #list1 li img{
 height:340px;
 width:790px;
 }
 #shang,#xia{
 height:80px;
 width:50px;
 color:#212121;
 background: #ccc;
 font-size: 60px;
 font-weight: bold;
 line-height: 80px;
 text-align: center;
 position: absolute;
 top:130px;
 opacity: 0.8;
 filter: alpha(opacity=80);
 cursor: pointer;

 }
 #shang{
 left:0;
 }
 #xia{
 right:0;
 }
 #box #list2{
 height:20px;
 width:195px;
 position: absolute;
 left:297px;
 bottom:25px;
 opacity: 0.8;
 filter: alpha(opacity=80);

 }
 #box #list2 li{
 height:20px;
 width:20px;
 background: #ccc;
 border-radius: 50%;
 float: left;
 margin-right:5px;
 cursor: pointer;

 }

 #box #list2 li.active{
 background: black;
 }
 </style>

 <script type="text/javascript">
 onload = function(){
 var oBox = document.getElementById('box');
 var oLIst1 = document.getElementById('list1');
 var aLi1 = oLIst1.getElementsByTagName('li');
 var oLIst2 = document.getElementById('list2');
 var aLi2 = oLIst2.getElementsByTagName('li');
 var oShang = document.getElementById('shang');
 var oXia = document.getElementById('xia');
 aLi1[0].style.opacity = 1;
 aLi1[0].style.filter = 'alpha(opacity=100)';
 var size = aLi1.length;
 var i = 0;
 var timer = setInterval(function(){
 i ++;
 move();
 },2000);
 function move(){
 if(i >= size){
 i = 0
 }
 if(i < 0){
 i = size-1;
 }
 for(var j = 0; j < aLi1.length; j ++){
 if(j == i){
 animate(aLi1[j],{opacity:100});
 aLi2[j].className = 'active';
 }else{
 animate(aLi1[j],{opacity:0});
 aLi2[j].className = '';
 }
 }

 }
 //前一张
 oShang.onclick = function(e){
 var evt = e || event;
 evt.preventDefault();
 i --;
 move();
 }
 //后一张
 oXia.onclick = function(e){
 var evt = e || event;
 evt.preventDefault();
 i ++;
 move();
 }
 //下面的圆点
 for(var k = 0;k < aLi2.length; k ++){
 aLi2[k].index = k;
 aLi2[k].onmouseenter = function(){
 i = this.index;
 move();
 }
 }
 oBox.onmouseenter = function(){
 clearInterval(timer);
 }
 oBox.onmouseleave = function(){
 timer = setInterval(function(){
 i ++;
 move();
 },2000);
 }
 /*************************缓冲运动 可封装留着以后备用^_^*************************/

 function getStyleAttr(obj, attr){
 if (window.getComputedStyle){
 return getComputedStyle(obj, null)[attr]; 
 }
 else {
 return obj.currentStyle[attr]; 
 }
 }
 function animate(obj, json, fn){
 clearInterval(obj.timer); 
 obj.timer = setInterval(function(){
 var bStop = true; 
 for (var attr in json){
 var iTarget = json[attr]; 
 var current;
 if (attr == "opacity"){ 
 current = parseFloat(getStyleAttr(obj, attr))*100;
 current = Math.round(current);
 }
 else { 
 current = parseFloat(getStyleAttr(obj, attr));
 current = Math.round(current);
 }
 var speed = (iTarget-current)/8; (400-393)/8
 speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
 if (current != iTarget){
 bStop = false; 
 }
 if (attr == "opacity"){ 
 obj.style[attr] = (current+speed)/100;
 obj.style.filter = "alpha(opacity=" + (current+speed) + ")";
 }
 else { 
 obj.style[attr] = current+speed + "px";
 }
 }
 if (bStop){
 console.log("停止运动");
 clearInterval(obj.timer); 
 if (fn) {
 fn(); 
 }
 }
 }, 30);
 }
 }
 </script>
 </head>
 <body>
 <div id="box">
 <ul id="list1">
 <li >1</li>
 <li >2</li>
 <li >3</li>
 <li >4</li>
 <li >5</li>
 <li >6</li>
 <li >7</li>
 <li >8</li> 
 </ul>
 <ul id="list2">
 <li class="active"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li ></li>
 </ul>
 <div id="shang">
 <
 </div>
 <div id="xia">
 >
 </div>
 </div>
 </body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
纯原生JS打造轮播图?
纯原生JS打造轮播图?
0 0
HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果
0 0
JavaScript轮播图学习和例题
轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,这个模块叫做轮播模块。轮播图常见于电商类、资讯类应用、功能首页、功能模块主页面。下图截自京东的购物页面。
0 0
JS 定时器、轮播图
JS 定时器、轮播图
0 0
js 功能-轮播图效果-需求分析|学习笔记
快速学习 js 功能-轮播图效果-需求分析
0 0
js 功能-轮播图效果-获取元素 &自动滚动|学习笔记
快速学习 js 功能-轮播图效果-获取元素 &自动滚动
0 0
使用JavaScript 实现最简单最基本的轮播图样式
学习使用JavaScript 实现最简单最基本的轮播图样式。
0 0
使用JavaScript 实现最简单最基本的轮播图样式
学习使用JavaScript 实现最简单最基本的轮播图样式。
0 0
【JavaScript】案例2:轮播图
本期主要介绍案例2:轮播图
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
编程语言如何演化—— 以 JS 的 private 为例
立即下载
JS 语言在引擎级别的执行过程
立即下载
JS零基础入门教程(上册)
立即下载