jquery简单的大背景banner图片全屏切换
这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟。个人网站上线不久,最近整理整理从前的一些小逼格的事
大背景全屏切换效果图:
大背景全屏切换效果html内容:
<!--banner图片切换开始-->
<div class="banner">
<div class="block none"><img src="data:images/banner1.png"/></div>
<div class=" none"><img src="data:images/图片切换.png" /></div>
<div class=" none"><img src="data:images/banner3.png" /></div>
<div class=" none"><img src="data:images/banner4.png" /></div>
<div class=" none"><img src="data:images/banner2.png" /></div>
<div class="banner_1">
<ul class="banner_2">
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall1.jpg" width="90%" class="img_1"/>
<p>丰富强大的功能</p>
</li>
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall2.jpg" width="90%" />
<p>云端数据处理能力</p>
</li>
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall3.jpg" width="90%" />
<p>云端超强制作引擎</p>
</li>
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall4.jpg" width="90%" />
<p>高质量的用户体验</p>
</li>
<li>
<span class="banner_3"></span>
<img src="data:images/qiehuan_mall5.jpg" width="90%" />
<p>用户行为统计分析</p>
</li>
</ul>
</div>
</div>
<!--banner图片切换结束-->
大背景全屏切换效果css内容:
@charset "utf-8";*{margin:0;padding:0}
body,div,dt,p,dl,dd,ul,li,ol,a,input,figure,figcaption,img{list-style:none;margin:0 auto;padding:0;text-decoration:none}
.banner{width:100%;height:450px;position:relative;background:url("../images/banner_beijing1.jpg") no-repeat;background-size:100% 100%}
.banner_1{width:100%;height:125px;position:absolute;bottom:0;left:0;border-top:1px solid #fff}
.banner_2{width:1000px;height:125px}
.banner_2 .img_1{width:80%;border:4px #f7941d solid}
.banner_2 li{width:150px;height:125px;float:left;padding:15px 25px 15px 25px;color:#fff;position:relative}
.banner_2 li .banner_3{width:29px;height:18px;position:absolute;top:0;left:85px}
.sanjiao{background:url("../images/index_sj.png") no-repeat}
.banner_2 li p{margin-top:10px}
.banner .none{display:none;text-align:center}
.banner .block{display:block;text-align:center}
大背景全屏切换效果js内容:
var color;
$(document).ready(function() {
$(".banner_2 li").bind("mousemove", changebg);
test(0);
});
function changebg() {
var index = $(".banner_2 li").index($(this));
test(index);
};
function test(index) {
var li_length = $(".banner_2 li").length;
if (index > li_length) {
index = 0;
}
$(".banner_2 li").eq(index).css("color", "#f7941d").siblings().css("color", "#ffffff");
$(".none").eq(index).show().siblings(".none").hide();
$(".banner_3").eq(index).addClass("sanjiao").parents().siblings().children("span").removeClass("sanjiao");
$(".banner_2 img").eq(index).addClass("img_1").parents().siblings().children("img").removeClass("img_1");
clearTimeout(color);//清除定时器
color = setTimeout("test(" + (index + 1) + ")", 3000);//添加定时器
}
学习来源:http://www.j--d.com/jquery/443.html
jquery简单的大背景banner图片全屏切换的更多相关文章
- CSS jQuery 图片全屏切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- banner图片全屏显示
<script> $(function () { function reinitSize() { var window_h = $(window).height(); var window ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
- jQuery 扩展 全屏切换
(function ($) { //全屏切换方法 $.fn.toggleFullScreen = function (qp1, qp2) { var fullFlag = false; var _qp ...
- 全屏banner及全屏轮播
一.全屏banner 1.设置网页图片全屏banner <!DOCTYPE html> <html lang="en"> <head> < ...
- jquery横向纵向鼠标滚轮全屏切换
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- jQuery插件开发——全屏切换插件
这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
随机推荐
- JavaScript的因为所以
各位看官,楼主开始说过写几篇博客,这是这个系列的最后一集.吾以为:了解JavaScript的身世之谜,掌握其近乎心想事成的变量系统,了解其解析运行的偷梁换柱之法,熟悉布大师迂回曲折的OOP实现.那你离 ...
- VNC 抓取远程桌面
VNC (Virtual Network Computing)是虚拟网络计算机的缩写.VNC 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC 是在基于 UNI ...
- Windows API 磁盘
这里的磁盘就是你的C,D,E,F,G盘啦 那么来看看吧windows Api来获取信息的呢 (1)DWORD GetLogicalDrives(void) 返回值是一个32位整形 32位每一位表示一个 ...
- 简短介绍 C# 6 的新特性 .net 6都要来了?
几周前我在不同的地方读到了有关C#6的一些新特性.我就决定把它们都收集到一起,如果你还没有读过,就可以一次性把它们都过一遍.它们中的一些可能不会如预期那样神奇,但那也只是目前的更新. 你可以通过下载V ...
- android IPC及原理简介
什么是Android操作系统,所谓的Android:是基于Linux内核的软件平台和操作系统,早期由Google开发,后由开放手机联盟Open Handset Alliance)开发. Linux ...
- PHP __autoload函数(自动载入类文件)的使用方法(转)
详细出处参考:http://www.jb51.net/article/29625.htm 在使用PHP的OO模式开发系统时,通常大家习惯上将每个类的实现都存放在一个单独的文件里,这样会很容易实现对类进 ...
- java 图的邻接矩阵
有向图 在有向图中,结点对<x ,y>是有序的,结点对<x,y>称为从结点x到结点y的一条有向边,因此,<x,y>与<y,x>是两条不同的边.有向图中的 ...
- XCODE4.6从零开始添加视图
转自:http://www.cnblogs.com/luoxs/archive/2012/09/23/2698995.html 对于很多初学者来说,肯定希望自己尝试不用傻瓜的“Single View ...
- Linux服务器集群系统(四)--转
引用地址:http://www.linuxvirtualserver.org/zh/lvs4.html LVS集群的负载调度 章文嵩 (wensong@linux-vs.org) 2002 年 5 月 ...
- GNU C/C++ __attributes__ GCC中的弱符号与强符号
最近在看一些源代码,遇到了一些使用__attribute__修饰函数和变量的属性方面的代码,不是太了解,很是汗颜,再此做个总结: GCC使用__attribute__关键字来描述函数,变量和数据类 ...