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


Posted in Javascript onApril 27, 2017

效果图:

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 style="background: red;">1</li>
 <li style="background: yellow;">2</li>
 <li style="background: green;">3</li>
 <li style="background: blue;">4</li>
 <li style="background: blueviolet;">5</li>
 <li style="background: brown;">6</li>
 <li style="background: orangered;">7</li>
 <li style="background: palevioletred;">8</li> 
 </ul>
 <ul id="list2">
 <li class="active"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li style="margin-right:0px;"></li>
 </ul>
 <div id="shang">
 <
 </div>
 <div id="xia">
 >
 </div>
 </div>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 #Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 #Javascript
微信小程序 wx:for的使用实例详解
Apr 27 #Javascript
微信小程序 动态传参实例详解
Apr 27 #Javascript
微信小程序 本地数据读取实例
Apr 27 #Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 #Javascript
js获取浏览器的各种属性
Apr 27 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
群众路线教育实践活动方案
2014/02/02 职场文书
财务工作失职检讨书
2014/11/21 职场文书
工作保证书
2015/01/17 职场文书
内乡县衙导游词
2015/02/05 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL