js渐隐渐现透明度变化淡入淡出轮播图
js渐隐渐现透明度变化淡入淡出轮播图、焦点图
一些广告banner展示常见。
(附件)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:#fff;}
#box{height:454px;width:730px;margin:50px auto;position:relative;}
ul{list-style:none;}
#picture li img{vertical-align:bottom}
#picture li{position:absolute;opacity:0}
#picture .show{opacity:1}
#list{width:100%;text-align:center;position:absolute;bottom:10px;}
#list a{display:inline-block;height:18px;width:18px;background:aqua;border-radius:50%;
margin:4px;font-size:12px;font-family: "微软雅黑";}
#list .coloe{background:red}
#btn{display:none;}
#btn a{height:62px;width:28px;font-size:24px;text-align:center;line-height:62px;position:absolute;
background:#ccc;margin-top:-31px;display:inline-block;top:50%;}
#left{left:0}
#right{right:0}
img{width:730px;height:454px;}
</style>
<script type="text/javascript" src="js/fengzhuanghanshu.js"></script>
<script type="text/javascript">
window.onload=function(){
var aLi=picture.getElementsByTagName("li");
var aA=list.getElementsByTagName("a");
var iCur=0;
timer=setInterval(function(){
iCur++;
if(iCur>=aLi.length){
iCur=0
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
},2000)
box.onmouseover=function(){
clearInterval(timer);
btn.style.display="block"
}
box.onmouseout=function(){
timer=setInterval(function(){
iCur++;
if(iCur>=aLi.length){
iCur=0
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
},2000)
btn.style.display="none"
}
for(var j=0;j<aA.length;j++){
aA[j].index=j
aA[j].onclick=function(){
iCur=this.index
if(iCur>=aLi.length){
iCur=0
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
}
}
left.onclick=function(){
iCur--;
if(iCur<0){
iCur=aLi.length-1
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
}
right.onclick=function(){
iCur++;
if(iCur>=aLi.length){
iCur=0
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
}
}
</script>
</head>
<body>
<div id="box">
<ul id="picture">
<li class="show"><img src="img/1.jpg" /> </li>
<li><img src="img/2.jpg" /> </li>
<li><img src="img/3.jpg" /> </li>
<li><img src="img/4.jpg" /> </li>
<li><img src="img/5.jpg" /> </li>
<li><img src="img/6.jpg" /> </li>
</ul>
<div id="list">
<a class="coloe" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div id="btn">
<a id="left" href="#"><</a><a id="right" href="#">></a>
</div>
</div>
</body>
</html>
js渐隐渐现透明度变化淡入淡出轮播图的更多相关文章
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- js中用面向对象的思想——淡入淡出轮播图
首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换 3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...
- jq交叉淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue渐变淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
- js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
随机推荐
- MSMQ研究
开发过程记录如下: 1. 本机配置MSMQ ------控制面板-------启动或者关闭Windows功能----默认安装MSMQ即可 注意:本地安装后再VS中才能引用System.Messag ...
- Summary: gcd最大公约数、lcm最小公倍数算法
欧几里德算法 欧几里德算法又称辗转相除法,用于计算两个整数a,b的最大公约数.其计算原理依赖于下面的定理: 定理:gcd(a,b) = gcd(b,a mod b) 证明:a可以表示成a = kb + ...
- C++声明和定义
目录 1 参考 2 概念 2.1 声明 2.2 定义 3 对比 3.1 声明但不是定义的情况 3.2 声明且是定义的情况 3.3 特殊情况 1. 参考 1. <C++程序设计语言>4.9 ...
- jQuery Mobile 和 Kendo UI 的比较（转）
jQuery Mobile 和 Kendo UI 的比较 转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...
- 远程桌面时出现身份验证错误，要求的函数不正确，这可能是由于CredSSP加密Oracle修正
问题如下: 那么解决办法如下:
- python3 集合的常用方法
方法 意义 S.add(e) 在集合中添加一个新的元素e:如果元素已经存在,则不添加 S.remove(e) 从集合中删除一个元素,如果元素不存在于集合中,则会产生一个KeyError错误 S.dis ...
- windows系统bat方式启动tomcat出现java.lang.OutOfmemoryError:PermGen Space 错误
1.问题情景: 在部署项目时,将两个应用部署到同一个tomcat下,通过startup.bat启动服务时,控制台出现出现java.lang.OutOfmemoryError:PermGen Space ...
- 如何安装Apache
第一步:将Apache24解压到C盘根目录下 第二步:进入C:\Apache24\bin目录下 第三步:打开浏览器,网页中输入localhost,返回结果为It works!则说明Apache安装配置 ...
- MySQL分区（Partition）功能
引用地址:http://blog.csdn.net/tjcyjd/article/details/11194489 自5.1开始对分区(Partition)有支持 = 水平分区(根据列属性按行分)=举 ...
- HCNP学习笔记之IP地址、子网掩码、网关的关系
0x00 概述 网络管理中的IP地址.子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置. 以下我们就来深入浅出地讲解什么是子网掩码. IP地址的结构 ...