<!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. CSS新内容

     margin 外边距                                 * margin  属性值最多有4个                 * ① 只写一个值:四个方向的margin ...

  2. 读书笔记 effective c++ Item 55 让你自己熟悉Boost

    你正在寻找一个高质量的,开源的,与平台和编译器无关的程序库的集合?看一下Boost吧.想加入一个由雄心勃勃的,充满天赋的正致力于最高水平的程序库设计和实现工作的C++程序员们组成的团体么?看一下Boo ...

  3. 基于R树索引的点面关系判断以及效率优化统计

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在之前的博客中,我分别介绍了基于网格的空间索引(http:// ...

  4. undo表空间

    undo表空间undo表空间的管理,主要包括创建.删除.修改.切换.其中需要注意的是不能在undo表空间创建数据库对象,还有就是只能是单文件或大文件表空间. 创建创建主要有两种方法,一种是在创建数据库 ...

  5. 系统启动 之 Linux系统启动概述(1)

    随着智能终端功能的越来越庞大,与之,硬件配置越来越高,开机时间却越来越长.人们在享受强大功能的同时,对冗长的智能终端的开机时间却越来越缺乏耐心. 为了"取悦"用户,需要提供较好的用 ...

  6. css3 transition 和 animation实现走马灯

    这段时间在做一个App,H5的开发.页面上有公告 以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...

  7. 查询表达式和LINQ to Objects

    查询表达式实际上是由编译器“预处理”为“普通”的C#代码,接着以完全普通的方式进行编译.这种巧妙的发式将查询集合到了语言中,而无须把语义改得乱七八糟 LINQ的介绍 LINQ中的基础概念 降低两种数据 ...

  8. AspNetCore-MVC实战系列（三）之个人中心

    AspNetCore - MVC实战系列目录 . 爱留图网站诞生 . git源码:https://github.com/shenniubuxing3/LovePicture.Web . AspNetC ...

  9. iOS APP打包分发给远程的手机测试

    APP要打包给远程的朋友或客户测试,但又不是企业账号的情况下,我们只能根据手机的udid进行描述证书的配置,再打包分发给提供了udid的手机进行安装 一.如何得到udid? 手机连接到mac电脑,打开 ...

  10. 蓝桥杯-有奖猜谜-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...