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 相关文章推荐
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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实现MySQL更新记录的代码
2008/06/07 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
浅谈Python中的继承
2020/06/19 Python
python怎么调用自己的函数
2020/07/01 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
小学生个人先进事迹材料
2014/05/08 职场文书
市场调查策划方案
2014/06/10 职场文书
烈士陵园观后感
2015/06/08 职场文书
长征观后感
2015/06/09 职场文书