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.代码部分 分为四个 ...
随机推荐
- [sql]mysql管理手头手册,多对多sql逻辑
各类dbms排名 cs模型 mysql字符集设置 查看存储引擎,字符集 show variables like '%storage_engine%'; show VARIABLES like '%ma ...
- linux命令:locate
1.命令简介 locate(locate) 命令用来查找文件或目录. locate命令要比find -name快得多,原因在于它不搜索具体目录,而是搜索一个数据库/var/lib/ml ...
- python安装HTMLTestRunner
== https://pypi.org/project/html-testRunner/#files 下载 放在这路径下 cmd中进行安装
- Tesseract-OCR 训练过程 V3.02
软件: jTessBoxEditor Version 0.9 (30 April 2013) Tesseract-OCR win32 v3.02 with Leptonica 训练步骤: 1. ...
- mysql回滚日志
一.回滚日志(undo log) 1.作用 保存了事务发生之前的数据的一个版本,可以用于回滚,同时可以提供多版本并发控制下的读(MVCC),也即非锁定读 2.内容 逻辑格式的日志,在执行undo的时候 ...
- 171. Excel Sheet Column Number(简单数学题)
Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...
- jQuery delay() 方法
定义和用法 delay() 方法对队列中的下一项的执行设置延迟. 语法 $(selector).delay(speed,queueName) 参数 描述 speed 可选.规定延迟的速度. 可能的值: ...
- Learning to Rank算法介绍：RankNet，LambdaRank，LambdaMart
之前的博客:http://www.cnblogs.com/bentuwuying/p/6681943.html中简单介绍了Learning to Rank的基本原理,也讲到了Learning to R ...
- Object-C-block
块是对c语言的一种扩展语法 块看起来像函数,不同的是,快可以直接写在函数内部 块能够作为参数传递给函数或者方法 void sayHello(){NSLog(@"hello!");} ...
- python+Django框架运用（二）
Django应用 与 模板 应用就是网站中的一个独立的程序模块,在Django 中,主目录一般不处理用户的具体请求, 主目录主要做的是项目的初始化和设置,以及请求的分发. 创建应用 1. 创建应用命令 ...