js轮播图透明度切换（带上下页和底部圆点切换）
更新时间：2017年04月27日 11:03:10 作者：牛粪
本篇文章主要介绍了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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家!
相关文章
来访统计...2006-11-11
eval的用法eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句,下面给出eval解析json的示例2014-01-01
近日,一篇《疫苗之王》刷爆了朋友圈,疫苗的安全问题被推到了风口浪尖,腾讯安全反诈实验室团队推出了“腾讯安心计划”小程序,方便用户便捷地查询疫苗安全信2018-07-07
这篇文章主要为大家详细介绍了微信小程序实现简单计算器与秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,这篇文章主要给大家介绍了关于js深拷贝和浅拷贝的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了微信小程序实现签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
JavaScript中isPrototypeOf函数作用和使用实例
这篇文章主要介绍了JavaScript中isPrototypeOf函数作用和使用实例,本文讲解了它的作用和使用方法以及使用实例,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了微信小程序获取位置展示地图并标注信息的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了基于原生js实现图片轮播效果的具体代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了url中传递中文参数的时候通过js解码,需要的朋友可以参考下2014-03-03
最新评论