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 CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
vue实现图片裁剪后上传
Dec 16 Vue.js
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
zend framework文件上传功能实例代码
2013/12/25 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
Python中的多重装饰器
2015/04/11 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
用C++封装MySQL的API的教程
2015/05/06 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python3 处理JSON的实例详解
2017/10/29 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python使用建议技巧分享(三)
2020/08/18 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA