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.代码部分 分为四个 ...
随机推荐
- 将你的wordpress博客添加到百度个性首页
当你登陆百度账号后,进入百度首页会显示新的个性首页,不仅仅有搜索框,下面还有一个小型导航,放着你经常去的网站. 百度提供了一键添加到百度首页的按钮代码. 首先,先打开分享到百度新首页代码申请页面:ht ...
- oj2894(贝尔曼福特模板）
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2894 就因为粗心,一中午没A,题目说是2000 ...
- PAT 1103 Integer Factorization[难]
1103 Integer Factorization(30 分) The K−P factorization of a positive integer N is to write N as the ...
- Django-form组件和ModelForm组件
一. 构建Form表单 通过建一个类,添加需要进行验证的form字段,继而添加验证条件 from django import forms from django.forms import widget ...
- SQL中SELECT INTO和INSERT INTO SELECT语句介绍
表复制是经常要用到的操作,下面就将为您介绍SQL中SELECT INTO和INSERT INTO SELECT语句,供您参考. Insert是T-sql中常用语句,Insert INTO table( ...
- NC_Verilog中的工具ICC
Cadence中的Incisive Comprehensive Coverage(ICC) solusion提供在仿真中的覆盖率分析. ICC中的覆盖率类型有两大类: 1)Code Coverage: ...
- transition过度效果 + transform旋转360度
css样式: .animate{ width:65px; height:40px; background:#92B901; color:#ffffff; position:absolute; font ...
- Object-C-属性参数
assign:默认参数setter 方法不会引起引用计数的变化 retain:setter方法首先释放旧的对象,将旧对象的值赋予输入对象,再提高输入对象的引用计数为1 copy:setter 方法首先 ...
- Spring，Struts2，MyBatis，Activiti，Maven，H2，Tomcat集成（二）——Struts2集成
1. pom.xml文件添struts2依赖jar包: <!-- 与Struts2集成必须使用 --> <dependency> <groupId>org.spri ...
- nginx+tomcat把带WWW域名自动跳转到不带www域名方法
nginx+tomcat把带WWW域名自动跳转到不带www域名方法在nginx.conf里面 include /etc/nginx/conf.d/*.conf;在应该server里增加: if ($h ...