JS特效之很牛叉的轮播图
//HTML部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>很牛叉的轮播图</title>
<!--[if lte IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('span');
</script>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function(){
var oPrevDiv = document.getElementsByClassName('prev_div')[0];
var oNextDiv = document.getElementsByClassName('next_div')[0];
var aLi = document.getElementsByTagName('li');
var arr = [];
for(var i=0;i<aLi.length;i++){
var oImg = aLi[i].getElementsByTagName('img')[0];
arr.push( [ parseInt(getStyle(aLi[i],'left')),parseInt(getStyle(aLi[i],'top')),getStyle(aLi[i],'opacity')*100,getStyle(aLi[i],'zIndex') , oImg.width ] );
}
//console.dir(arr);
oPrevDiv.onclick = function(){ //左
arr.push(arr[0]);
arr.shift();
for(var i=0;i<aLi.length;i++){
var oImg = aLi[i].getElementsByTagName('img')[0];
aLi[i].style.zIndex = arr[i][3];
startMove(aLi[i],{left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2] });
startMove( oImg,{ width : arr[i][4] } );
}
};
oNextDiv.onclick = function(){ //右
arr.unshift(arr[arr.length-1]);
arr.pop();
for(var i=0;i<aLi.length;i++){
var oImg = aLi[i].getElementsByTagName('img')[0];
aLi[i].style.zIndex = arr[i][3];
startMove(aLi[i],{left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2] });
startMove( oImg,{ width : arr[i][4] } );
}
};
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
};
</script>
</head>
<body>
<div id="automatic">
<div class="prev_div"></div>
<a class="prev" href="###">
<span class="ico1"></span>
<span class="ico"></span>
<span class="txt"></span>
</a>
<div class="next_div"></div>
<a class="next" href="###">
<span class="ico1"></span>
<span class="ico"></span>
<span class="txt"></span>
</a>
<ul>
<li class="pos_0"><a href="#"><img src="data:images/8.jpg" width="100" alt=""/></a></li>
<li class="pos_1"><a href="#"><img src="data:images/1.jpg" width="270" alt=""/></a></li>
<li class="pos_2"><a href="#"><img src="data:images/2.jpg" width="510" alt=""/></a></li>
<li class="pos_3"><a href="#"><img src="data:images/3.jpg" width="680" alt=""/></a></li>
<li class="pos_4"><a href="#"><img src="data:images/4.jpg" width="510" alt=""/></a></li>
<li class="pos_5"><a href="#"><img src="data:images/5.jpg" width="270" alt=""/></a></li>
<li class="pos_6"><a href="#"><img src="data:images/6.jpg" width="270" alt=""/></a></li>
<li class="pos_6"><a href="#"><img src="data:images/7.jpg" width="270" alt=""/></a></li>
</ul>
</div>
</body>
</html>
//CSS部分:
@charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: none; }
body { background: #ececec; padding-top: 50px; }
#automatic { width: 970px; height: 344px; position: relative; margin: 0 auto; overflow: hidden; }
.prev_div { width: 130px; height: 72px; position: absolute; top: 128px; left: 92px; z-index: 5; background: red; filter: alpha(opacity=0); opacity: 0; cursor: pointer; }
.next_div { width: 130px; height: 72px; position: absolute; top: 128px; right: 92px; z-index: 5; background: red; filter: alpha(opacity=0); opacity: 0; cursor: pointer; }
#automatic .prev { width: 120px; height: 72px; position: absolute; top: 108px; left: 72px; z-index: 4; }
#automatic .prev .ico { width: 76px; height: 112px; position: absolute; top: 0; left: 0; background: url(images/prev.png); }
#automatic .prev .ico1 { width: 76px; height: 112px; position: absolute; top: 0; left: 0; background: url(images/prev_1.png); z-index: 2; filter: alpha(opacity=0); opacity: 0; }
#automatic .prev .txt { width: 106px; height: 112px; position: absolute; top: 0; left: 65px; background: url(images/prev_txt.png) no-repeat; filter: alpha(opacity=0); opacity: 0; }
#automatic .next { width: 120px; height: 72px; position: absolute; top: 108px; right: 72px; z-index: 4; }
#automatic .next .ico { width: 76px; height: 112px; position: absolute; top: 0; right: 0; background: url(images/next.png) no-repeat; }
#automatic .next .ico1 { width: 76px; height: 112px; position: absolute; top: 0; right: 0px; background: url(images/next_1.png) no-repeat; z-index: 2; filter: alpha(opacity=0); opacity: 0; }
#automatic .next .txt { width: 106px; height: 112px; position: absolute; top: 0; right: 65px; background: url(images/next_txt.png) no-repeat; filter: alpha(opacity=0); opacity: 0; }
#automatic ul { width: 970px; height: 344px; position: absolute; top: 0; left: 0; z-index: 1; }
#automatic li { position: absolute; }
#automatic .line { border: 4px solid #fff; width: 672px; height: 336px; position: absolute; top: 0; left: 50%; margin-left: -340px; z-index: 3; }
#automatic .pos_0 { top: -104px; left: 0; z-index: 1; filter: alpha(opacity=0); opacity: 0; }
#automatic .pos_1 { top: 104px; left: 0; z-index: 2; filter: alpha(opacity=60); opacity: 0.6; }
#automatic .pos_2 { top: 43px; left: 50px; z-index: 3; filter: alpha(opacity=80); opacity: 0.8; }
#automatic .pos_3 { top: 0; left: 145px; z-index: 4; }
#automatic .pos_4 { top: 43px; right: 50px; z-index: 3; filter: alpha(opacity=80); opacity: 0.8; }
#automatic .pos_5 { top: 104px; right: 0; z-index: 2; filter: alpha(opacity=60); opacity: 0.6; }
#automatic .pos_6 { top: -104px; right: 0; z-index: 1; filter: alpha(opacity=0); opacity: 0; }
//js部分:
function startMove(obj,json,endFn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bBtn = true;
for(var attr in json){
var iCur = 0;
if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}
var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;
}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if(bBtn){
clearInterval(obj.timer);
if(endFn){
endFn.call(obj);
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
转载于:https://www.cnblogs.com/Aaron1Tall/p/7298453.html
JS特效之很牛叉的轮播图相关推荐
- js + css 做出网易云音乐的轮播图
先说一下思路,网易云轮播图是这样的,每隔一段时间(这里运用到了js的定时器)右边的图片会放大(css的transform)并切换(定位的z-index)上来(这里还运用了过渡transition),最 ...
- html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片 具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签 二.css样式设 ...
- 使用hammer.js实现移动端手指滑动切换轮播图教程
今天面试前端开发时,要求在移动端实现手指滑动切换轮播图 这里我用到 bootsrap 的轮播图组件 + hammer.js 库 文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...
- 用JS实现图片切换、定时器、轮播图
一. 图片切换 实现功能: 当点击"下一页"时,跳转到下一张图片: 当点击"上一页"时,跳转到上一张照片: 显示当前页数/总页数,如:2/6. <!DOC ...
- [jQuery基础] jQuery动效案例(二) -- 图标特效、无限循环滚动(简易轮播图)
图标特效 实现效果展示 实现步骤 第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } ul{list-style: none;width: 400px;height ...
- html3d轮播图片效果,炫酷3D透视轮播图特效
这是一款炫酷js和CSS3 3D透视轮播图特效.该3D轮播图通过CSS3制作图片的3D透视效果,并使用js来使轮播图于用户进行交互,效果非常炫酷. 使用方法 在页面中引入style.css和index ...
- 基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
使用html和js实现的一个简单小练习轮播图.大概功能主要是: 1.使用时间函数自动切换图片: 2.在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型 ...
- html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
- swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
最新文章
- Grid SearchCV（网格搜索） 用法代码演示
- ActivityManagerService知识点
- Centos下源码安装golang
- APICloud中app如何在手机端测试
- python算法与数据结构-快速排序算法
- 第三十一讲：UML类图（上）
- 查看静态链接和动态链接
- java nio 客户端_Java网络编程:Netty框架学习(二)---Java NIO,实现简单的服务端客户端消息传输...
- [luoguP3068] [USACO13JAN]派对邀请函Party Invitations（stl大乱交）
- delphi formshow 刷新_OPPO K7x部分配置和外观公布90Hz刷新率11·4发布
- ep100的flash程序寄存器理解
- java自动发图文微博_自动发带图的微博
- android 没有menu菜单键,android之onCreateOptionsMenu失效，按菜单键无反应
- 美团校招php笔试题,2018 美团校招笔试题详解
- StackStorm安装WebUI
- HDMI转换芯片——MS9288C
- 微信公众号打开的h5网页点击按钮返回公众号
- 数字图像处理期末大作业 完成总结
- indexOf()使用详解
- 经典问题总结——开关灯问题