仿flash轮播

<!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>

时间： 2024-09-29 11:13:44

仿flash轮播的相关文章

纯原生javascript仿网易轮播图

第一次有自己的关于代码的博客,感到诚惶诚恐.这可能是我第一次以程序猿,或者连初级程序猿都不是的身份下开通的个人“技术”(胡写乱写)博客园地.闲言碎语不要讲,咱今天就写一点关于js的代码吧.网易首页大家肯定都去过,在首页左侧部分有个轮播图,效果很好,构思精巧,非常诱人.注,此demo非本人原创,在这里进行个人解读,力求通俗易懂(主要是让我自己明白!). 那么如何实现相关技术,进而实现如图效果呢?下面的进度条是用JQuery写的,这里暂不考虑.下面从三个方面讨论网一轮播图. 一.HTML部分 1 <

仿网页轮播图

html部分 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易轮播图js部分</title> <link rel="stylesheet" href="css/css.css"> <script src="js/slider.js&quo

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

转之--http://www.ecshoptemplate.com/article-1710.html 这个ecshop很常见,因为现在比起flash难以修改,js更加符合人们的使用习惯,而默认ecshop还是用flash来做的,这点非常不好,下面说一下如何修改 第一步:index.php里加了一个方法,调用XML文件:function get_flash_xml() function get_flash_xml() { $flashdb = array(); if (file_exists(R

原生js仿网易轮播图

<!-- HTML部分 --> <div id="wrap"> <div class="picBox"> <!-- 图片区域 --> <div id="pic"> <div><a href="#"><img src="imgs/1.jpg" alt=""/></a></div

仿flash的幻灯片轮播效果

<!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-Typ

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null;

仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图介绍（一）

请尊重分享成果,转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52327435 前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下篇中进行分析出来, 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图github地址: https://github.com/hejunlin2013/SuperIndicator , 如果觉得还行,欢迎点个star. SuperIndicator a superindicatorlibray fo

仿网易云音乐 专辑图片折叠轮播

仿网易云音乐 专辑图片折叠轮播 先不多说现上一张效果图 首先简述一下实现原理 1.首先让我们的imageview**动起来** 其实是不断的.invalidate();函数 让他不断的调用ondarw函数 (显然我们不必要不断的调用ondarw函数 只有在我们让他动的时候调用即可 所以我们要声明一个变量记录change记录是否产生动画) 2.实现我们的可折叠效果 Matrix的setPolyToPoly方法的使用 可参考(http://blog.csdn.net/lmj623565791/art

一个仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图类库

前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下篇中进行分析出来, 一个仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图类库,  github地址: https://github.com/hejunlin2013/SuperIndicator , 如果觉得还行,欢迎点个star. SuperIndicator a superindicatorlibray for viewpager, banner 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图 专业轮播图库,没有之一 也可以应用于广告