技术文章
当前位置:首页 > Javascript技术文章 > js透明度切换轮播图

js轮播图透明度切换实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:217

这篇文章主要知识点是关于js、轮播图、透明度、原生JS实现的自动轮播图功能详解 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript DOM编程艺术
  • 类型:JavaScript大小:109.2 MB格式:PDF出版:人民邮电出版社作者:基思(Keith,J.),(加)桑布尔斯
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

js透明度切换轮播图

效果图:

js轮播图透明度切换(带上下页和底部圆点切换)

代码如下:

<!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实现的自动轮播图功能。分享给大家供大家参考,具体如下:

轮播图的用处

轮播图是现在网站网页上最常见的效果之一,很多网站上都会用到,淘宝京东等等。有些自动选项卡也是需要用到的,而且它的可重复性高。在这里分享一下,用js原生代码,实现轮播图的常见效果!

轮播图的原理

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过定时器实现自动播放。

 原生JS实现的自动轮播图功能详解

Html布局

首先父容器banner存放所有内容,子容器img-list存放图片。子容器list存放按钮小圆点。圆点我使用了背景图片的方式!

<div id="banner">
  <ul id="img-list">
    <li><img src="images/banner1.png" alt="1"/></li>
    <li><img src="images/banner2.jpg" alt="2"/></li>
    <li><img src="images/banner3.png" alt="3"/></li>
  </ul>
  <div id="list">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
  </div>
</div>

css修饰

1、对盒子模型,文档流的理解,绝对定位问题。

2、图片有固定的的宽高,先在img-list中设置三张图片总共的宽,多余的将overflow: hidden;进行隐藏!载将其图片下的li设置往右浮动。

3、将list span中的宽高固定,给个背景图片。第一张图片上设个默认的黄色圆点图片。

#banner {
  width:100%;
  padding:0;
  clear: both;
  position: relative;
  height: 400px;
  z-index:1;
}
#img-list {
  display: block;
  width:5760px;
  height: 400px;
  overflow: hidden;
  z-index:1;
  position: relative;
}
#img-list li{
  float: left;
  width:100%;
  height: 400px;
  overflow: hidden;
  /* position: absolute;
  top:0;
  left:0; */
  z-index: 2;
}
#list {
  width:100%;
  height:18px;
  text-align: center;
  position: absolute;
  bottom: 10px;
  z-index: 100;
}
#list > span {
  width:18px;
  height: 18px;
  overflow: hidden;
  display: inline-block;
  margin:0 2px;
  background: url(../images/yuan.png);
  cursor: pointer;
}
#list .on {
  background: url(../images/huanyu.png);
}

JS效果

1、首先我们先设置自动播放的函数

2、然后鼠标滑过容器时停止播放,鼠标离开整个容器时继续播放至下一张。

3、再定义并调用自动播放函数

var banner=document.getElementById('banner');
var imglist=document.getElementById('img-list').getElementsByTagName("li");
var list=document.getElementById('list').getElementsByTagName('span');
var index=0;
var timer=null;
//设置自动播放函数
function autoPlay () {
   if (++index >= imglist.length) {index = 0};
   changeImg(index);
}
// 鼠标划过整个容器时停止自动播放
banner.onmouseover = function () {
   clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
banner.onmouseout=function(){
   timer=setInterval(autoPlay,2000);
}
// 定义并调用自动播放函数
timer = setInterval(autoPlay, 2000);
接着定义图片的切换函数
// 定义图片切换函数
function changeImg (curIndex) {
   for (var i = 0; i < imglist.length; i++) {
     imglist[i].style.display = "none";
     list[i].className = "";
   }
   imglist[curIndex].style.display = "block";
   list[curIndex].className = "on";
}

最后遍历所有数字导航实现划过切换至对应的图片,需获得它的索引值

for (var i = 0; i < list.length; i++) {
 list[i].index=i;
 list[i].onmouseover = function () {
 clearInterval(timer);
 changeImg(this.index);
};

到此为止,我们的轮播所有代码完成!

还不算完美,继续努力!

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到javascript的写法总结、 js实现方块上下左右移动效、 webpack 2的react开发配置详解、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:JS实现自定义右键菜单实例代码

下一篇:JavaScript实现飘落星星特效的代码详解

展开 +

收起 -

相关电子书
学习笔记
网友NO.619917

js实现自动图片轮播代码

本文实例为大家分享了轮播的具体代码,自动轮播,居中显示,供大家参考,具体内容如下 !DOCTYPE htmlhtmlhead lang="en" meta charset="UTF-8" title/title style #div1{ width: 192px; height: 120px; border: 1px solid gray; margin: 0 auto; position: relative; overflow: hidden; } #div1 img{ position: absolute; } /style/headbodydiv id="div1" img src="images/1.jpg" alt="" width="192"/ img src="images/2.jpg" alt="" width="192"/ img src="images/3.jpg" alt="" width="192"/ img src="images/4.jpg" alt="" width="192"//divdiv id="div2"/divscript //获取页面元素 var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var imgs = div1.getElementsByTagName('img'); //初始化页面图片的位置 window.onload=function(){ for(var i=0; iimgs.length; i++){ imgs[i].style.left = i*192 +'px' } }; //轮播移动的函数 function imgMove(){ var b1 = false; for(var i = 0; i imgs.length; i++) { imgs[i].style.left = imgs[i].offsetLeft-1 + 'px'; ……

网友NO.270845

原生js通过一行代码实现简易轮播图

这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1.0"meta http-equiv="X-UA-Compatible" content="ie=edge"titleDocument/titlestyle* {margin: 0;padding: 0;}ul,li{list-style: none;}.container {width: 600px;height: 400px;margin: 100px auto;box-shadow: 0 0 5px green;overflow: hidden;}.container .wrap {width: 4200px;height: 400px;transition: 1s;overflow: hidden;}.container .wrap li {float: left;width: 600px;height: 400px;box-shadow: 0 0 1px 1px #f60;line-height: 400px;text-align: center;font-size: 50px;}/style/headbodydiv class="container"ul class="wrap" li1/lili2/lili3/lili4/lili5/lili6/li/ul/divscriptsetInterval(()={var wrap = document.querySelector('.wrap')var left = parseInt(wrap.style.marginLeft)wrap.style.marginLeft = left = -2400 ? left - 600 + 'px' : '0px'},2000)/script/body/html 总结……

网友NO.997972

原生js轮播特效

作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF5;} *{ margin: 0; padding: 0; } .wrapper{ width: 400px; height: 300px; margin: 100px auto; } #lunbo{ position: relative; overflow: hidden; } #list{ position: relative; white-space: nowrap; // 这块用行元素模拟,所以才用该属性,块元素可修改这块 } #list span{ display: inline-block; width: 400px; height: 300px; text-align: center; line-height: 300px; font-weight: bold; font-size: 100px; color: #fff; } #buttons{ position: absolute; bottom: 0; text-align: center; width: 100%; height: 40px; line-height: 40px; } #buttons span{ display: inline-block; width: 15px; height: 5px; background: #fff; margin: 0 10px; cursor: pointer; transition: all .5s; } #buttons span.on{ height: 20px; } .arrow{ position: absolute; top: 50%; transform: translateY(-50%); font-size: 80px; font-weight: b……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息