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.代码部分 分为四个 ...
随机推荐
- css实现固定行
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- Mysql技术内幕——InnoDB存储引擎
Mysql技术内幕——InnoDB存储引擎 http://jingyan.baidu.com/article/fedf07377c493f35ac89770c.html 一．mysql体系结构和存储引 ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- 实习培训——Java基础（1）
实习培训——Java基础(1) 1.我的第一个JAVA程序 首先好配置好JDK环境,百度上有很多.创建文件HelloWorld.java(文件名与类名相同),代码如下: public class He ...
- testng入门教程1在testng运行一个简单的testcase
在eclips运行java,创建一个Java类文件名TestNGSimpleTest C:\ > TestNG_WORKSPACE import org.testng.annotations. ...
- cmd重启服务器，有时不想去机房，并且远程桌面连接登录不上了
有时不想去机房,并且远程桌面连接登录不上了,需要远程重启服务器的,这时可以使用命令行方式远程重启.在cmd命令行状态下输入:shutdown -r -m \\192.168.1.10 -t 0 -f ...
- jms应用
构建jms http://blog.csdn.net/haoxingfeng/article/details/9167895
- transform 和 transition
transform的属性包括:rotate() / skew() / scale() / translate() /matrix() 其中 rotate() 旋转度数,0-360 skew() 元素 ...
- 阿里云云主机swap功能设置实战案例
阿里云云主机swap功能设置实战案例 阿里云提供的云服务器(Elastic Compute Service,简称 ECS),是云主机的一种,当前采用的虚拟化驱动是Xen(这一点可以通过bios ven ...
- office2007-安装程序找不到office.zh-cn\*.文件
在同时安装vs2008 和 office2007 有可能会遇到个问题(如果现在安装office2007,在安装vs2008 不会出现问题, 反正会出现下面问题) 在安装office2007时总是提示“ ...