<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>

//css样式
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
background: #222;
}

.flash {
width: 760px;
height: 300px;
background: #1f1f1f;
margin: 100px auto 0;
border-radius: 20px;
box-shadow: 0 0 6px 1px #fff;
padding: 20px;
}

.flash .content {
width: 760px;
height: 300px;
/* overflow:hidden;*/
position: relative;
}

.flash .content .con {
width: 760px;
height: 300px;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
display: none;
}

.flash .content .con:nth-child(1) {
background: url(img/bg1.jpg);
display: block;
}

.flash .content .con:nth-child(2) {
background: rgb(230, 108, 87);
}

.flash .content .con:nth-child(3) {
background: rgb(32, 47, 61);
}

.flash .content .con:nth-child(4) {
background: url(img/bg2.jpg);
}

.flash .content .con img {
position: absolute;
}

.flash .content .con img.f-1-1 {
left: -340px;
top: 80px;
opacity: 0;
}

.flash .content .con img.f-1-2 {
left: -340px;
top: 150px;
opacity: 0;
}

.flash .content .con img.f-1-3 {
left: 760px;
top: 0px;
opacity: 0;
}

.flash .content .con img.f-2-1 {
left: 20px;
top: 170px;
opacity: 0;
}

.flash .content .con img.f-2-2 {
left: 20px;
top: 300px;
opacity: 0;
}

.flash .content .con img.f-2-3 {
left: 420px;
top: 300px;
opacity: 0;
}

.flash .content .con img.f-3-1 {
left: 200px;
top: 120px;
opacity: 0;
}

.flash .content .con img.f-3-2 {
left: 320px;
top: 300px;
opacity: 0;
}

.flash .content .con img.f-3-3 {
left: -110px;
top: 0px;
opacity: 0;
}

.flash .content .con img.f-4-1 {
left: 80px;
top: 300px;
opacity: 0;
}

.flash .content .con img.f-4-2 {
left: 340px;
top: 80px;
opacity: 0;
}

.flash .content .con img.f-4-3 {
left: 340px;
top: 220px;
opacity: 0;
}

.flash .btn {
position: absolute;
top: 50%;
margin-top: -28px;
}

.flash .left {
left: 0;
}

.flash .right {
right: 0;
}
</style>
</head>

<body>

//html
<div class="flash">
 <div class="content">
 div class="con">
<img class="f-1-1" src="img/flash1.png" />
<img class="f-1-2" src="img/flash12.png" />
<img class="f-1-3" src="img/flash13.png" />
</div>
<div class="con">
<img class="f-2-1" src="img/flash2.png" />
<img class="f-2-2" src="img/flash22.png" />
<img class="f-2-3" src="img/flash23.png" />
</div>
<div class="con">
<img class="f-3-1" src="img/flash3.png" />
<img class="f-3-2" src="img/flash32.png" />
<img class="f-3-3" src="img/flash33.png" />
</div>
<div class="con">
<img class="f-4-1" src="img/flash4.png" />
<img class="f-4-2" src="img/flash42.png" />
<img class="f-4-3" src="img/flash43.png" />
</div>
<img class="btn left" src="img/left.png" />
<img class="btn right" src="img/right.png" />
</div>
</div>
</body>

//js
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

var _index = 0; //序列号
var arrCss = []; //存放样式
var Class=[]; //存放类名
var timer=null;
Css();
auto();
// move();
function auto() {
$('.flash .content .con').eq(_index).find('img').removeAttr('style');
$('.flash .content .con').eq(_index).find(Class[0]).animate(arrCss[0], 1000, function() {
$('.flash .content .con').eq(_index).find(Class[1]).animate(arrCss[1], 1000, function() {
$('.flash .content .con').eq(_index).find(Class[2]).animate(arrCss[2], 1000)
})
});
}

//判断对应样式 根据序列号
function Css() {
$('.flash .content .con').eq(_index).fadeIn().siblings('.con').fadeOut();
if(_index == 0) {
Class=['.f-1-1','.f-1-2','.f-1-3'];
arrCss = [{'left': '20px','opacity':1},{'left': '20px','opacity':1},{'left': '315px','opacity':1}]
}else if(_index==1){
Class=['.f-2-1','.f-2-2','.f-2-3'];
arrCss = [{'top': '50px','opacity':1},{'top': '160px','opacity':1},{'top': '0px','opacity':1}]
}else if(_index==2){
Class=['.f-3-1','.f-3-2','.f-3-3'];
arrCss = [{'left': '320px','opacity':1},{'top': '200px','opacity':1},{'opacity':1}]
}else if(_index==3){
Class=['.f-4-1','.f-4-2','.f-4-3'];
arrCss = [{'top': '0px','opacity':1},{'opacity':1},{'top': '220px','opacity':1}]
}
}

function move(){
_index++;
if(_index>3){_index=0};
Css()
auto();
}
$('.left').click(function() {
_index++;
if(_index>3){_index=0};
Css()
auto();
});
$('.right').click(function() {
_index--;
if(_index<0){_index=3};
Css()
auto();
});
timer=setInterval(move,8000)
</script>

</html>

仿flash轮播的更多相关文章

  1. FLASH轮播广告 在谷歌浏览器中不显示的解决办法（FLash轮播放广告在谷歌浏览器中无法显示处理方法）

    在用PHPWEB模板的时候,碰到首页有一个FLASH轮播广告,在IE浏览器下可以正常显示播放,在谷歌浏览器中却显示不了,解决办法如下: 欢迎转载:http://blog.csdn.net/aminfo ...

  2. （转）如何将ecshop首页主广告位的flash轮播替换为js轮播

    转之--http://www.ecshoptemplate.com/article-1710.html 这个ecshop很常见,因为现在比起flash难以修改,js更加符合人们的使用习惯,而默认ecs ...

  3. 原生JS实现轮播+学前端的感受（防止走火入魔）

    插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以 ...

  4. 常见的仿Flash图片轮播效果

    现在基本在很多网站上都能看到轮播效果,虽然有点烂大街的赶脚,但是这个效果确实很好看,很时尚,今天分享下代码相对较少的轮播框架,望采纳 . ①向左滑动: 思路: 将几个图片用分别用几个 li 包住,并且 ...

  5. 仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...

  6. 仿百度壁纸客户端（二）——主页自定义ViewPager广告定时轮播图

    仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...

  7. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  8. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  9. 仿主题广告轮播js

    function SlideShow(c) { var a = document.getElementById("slide"); var f = document.getElem ...

随机推荐

  1. 如何给远程主机开启mysql远程登录权限

    # 如何给远程主机开启mysql远程登录权限 > 在千锋学习PHP的有些学员会在阿里或者腾讯云去购买自己的云服务器.在初级阶段的项目上线时会遇到一个问题,就是无法使用远程连接工具操作自己线上的m ...

  2. test back

    python Mysql 下载地址 http://sourceforge.net/projects/mysql-python/

  3. 在Angular项目下使用Umeditor

    Umeditor是百度旗下的开源富文本编辑器项目,目前用于百度贴吧,是ueditor的迷你版本. 公司的Angular后台管理项目需要上传一些新闻,用Umeditor十分适合.但是目前官方只提供Jsp ...

  4. 多个php版本的composer使用

    由于系统环境变量之前同事安装的laravel是5.1...php默认的环境变量是: 不想破话原有环境变量,因为现在新的项目是laravel5.4...所以在用默认composer require安装时 ...

  5. python中str的find()

    今天学习语法的时候发现字符串自带函数find和操作符in功能十分近似,几乎一模一样 if 'a' in name:    print 'Yes, it contains the string &quo ...

  6. 浅谈JavaScript时间与正则表达式

    时间函数:var box = new Date() 函数       Demo:         alert(Date.parse('4/12/2007'));    //返回的是一个毫秒数11763 ...

  7. Ajax与Pjax请求在服务端是如何识别的

    我在后台处理ajax和一般的网页请求时,一般是需要额外加个参数进行区分的.比如使用get参数的is_ajax=1,后台判断有is_ajax=1成立时,表明该请求是ajax请求,遂可区分处理.我正在使用 ...

  8. hdu1420 Prepared for New Acmer 简单数学

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1420 简单数学题 第一次wa在可能和会出现取模后值为负数的情况. 只要会一个数论上的简单公式(a*b) ...

  9. [刷题]算法竞赛入门经典(第2版) 5-12/UVa511 - Do You Know the Way to San Jose?

    题意:N张地图,查找某地点在不在某些地图上,若在,使用细节多的地图.使用哪个地图的破要求挺多,细心一点就好. 代码:(Accepted,0.000s) //UVa511 - Do You Know t ...

  10. JAVA的Executor框架

    Executor框架分离了任务的创建和执行.JAVA SE5的java.util.concurrent包中的执行器(Executor)管理Thread对象,从而简化了并发编程.Executor引入了一 ...