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 相关文章推荐
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
vue.js的安装方法
May 12 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
微信小程序文章详情功能完整实例
Jun 03 Javascript
Javascript实现鼠标移入方向感知
Jun 24 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
smarty内置函数config_load用法实例
2015/01/22 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
java script编程起步(第三课)
2007/01/10 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
Ajax基础知识详解
2017/02/17 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python对List中的元素排序的方法
2018/04/01 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
J2EE面试题集锦(附答案)
2013/08/16 面试题
运动会800米加油稿
2014/02/22 职场文书
元旦联欢会主持词
2014/03/26 职场文书
运动会拉拉队口号
2014/06/09 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python