基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片。这款焦点图适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：
实现的代码。
html代码：
<!-- index-focus begin -->
<div class="sliderWrap">
<section class="banner-TAL">
<div class="viewport">
<ul class="item" style="height: 2748px; top: 0px;"> <li class="bn-bg01">
<div class="wrapper"><h2 class="bn-text">科技预见学习<br></h2><img class="frame" src="data:images/181450_53fc5e1a05317.jpg" width="610" height="458"></div>
</li>
<li class="bn-bg02">
<div class="wrapper"><h2 class="bn-text">《天降奇师》<br>大型师生户外真人秀</h2><img class="frame" src="data:images/180936_54a3cb60ab15b.jpg" width="610" height="458">
</div>
</li> <li class="bn-bg03">
<div class="wrapper"><h2 class="bn-text">磨砺十载学而思<br>共创百年好未来</h2><img class="frame" src="data:images/TAL06.jpg" width="610" height="458"></div>
</li>
<li class="bn-bg04">
<div class="wrapper"><h2 class="bn-text">在这里 不断探索<br>教育模式的多样化</h2><img class="frame" src="data:images/114637_53057a9d697b2.jpg" width="610" height="458">
</div>
</li>
<li class="bn-bg05">
<div class="wrapper"><h2 class="bn-text">在这里 科技 互联网<br>与教育完美融合</h2><img class="frame" src="data:images/120631_53df06c769e11.jpg" width="610" height="458">
</div>
</li>
<li class="bn-bg06">
<div class="wrapper"><h2 class="bn-text">在这里 帮助孩子<br>个性化学习与成长</h2><img class="frame" src="data:images/103539_532ba57bdfee0.jpg" width="610" height="458">
</div>
</li> </ul>
</div>
</section>
<section class="banner-TAL">
<div class="wrapper">
<!-- focus-fixed-area -->
<div class="focus-fixed">
<!-- text-update01 -->
<div class="focus-fixed-text t-bg01" style="width: 400px; display: block;">
<p>一周年专题页</p>
</div> <div class="focus-logo fixpng c-bg01">
<div class="white-bg fixpng animated"><img src="data:images/logo-TAL-small.png" width="80" height="80" class="fixpng"></div>
</div>
</div>
</div>
<!-- focus-right-circlet -->
<div class="focus-circlet fixpng f-bg01">
<div class="focus-nav">
<!-- focus-arrow -->
<div class="focus-arrow">
<a class="arrow-top fixpng" href="javascript:;">向上</a>
<a class="arrow-down fixpng" href="javascript:;">向下</a>
</div> <!-- focus-switch -->
<ul class="focus-switch">
<li class="fixpng selected"><a href="javascript:;">1</a></li>
<li class="fixpng"><a href="javascript:;">2</a></li>
<li class="fixpng"><a href="javascript:;">3</a></li>
<li class="fixpng"><a href="javascript:;">4</a></li>
<li class="fixpng"><a href="javascript:;">5</a></li>
<li class="fixpng"><a href="javascript:;">6</a></li>
</ul>
</div>
</div>
</section>
</div>
css代码：
$("document").ready(function () {
$.xes.require(["slider"], function () {
var nowIndex;
var textArray = [
"一周年专题页",
"学而思网校推出师生互动真人秀节目",
"“学而思”更名“好未来”专题页",
"学而思网校，让更多人享受到优质的教学资源",
"学而思培优，让学习更简单、更快乐、更有效",
"智康1对1，让学习更有效"
];
var linkArray = [
"http://sc.chinaz.com/",
"http://sc.chinaz.com/",
"http://sc.chinaz.com/",
"http://sc.chinaz.com/",
"http://sc.chinaz.com/",
"http://sc.chinaz.com/"
];
var slider = $(".banner-TAL").slider({
btnPrevCls: '.arrow-top', //向前按钮样式
btnNextCls: '.arrow-down', //向后按钮样式
pageCls: '.focus-switch li', //页数按钮样式
containerCls: '.viewport ul', //具体滑动内容元素样式
itemCls: 'li', //滑动元素
activeCls: 'selected', //选中样式
perItem: 1, //显示的个数
startIndex: 0, //开始的位置
autoPlay: true, //是否自动播放
duration: 5000, //自动播放时速度
fxDuration: 1000, //滑动速度
circle: true, //是否循环
direction: 'vertical', //方向 horizon|vertical
onStart: function (index) {
$(".focus-logo").attr("class", "focus-logo fixpng");
$(".focus-fixed-text").hide(300, function () {
$(this).attr("class", "focus-fixed-text");
$(this).attr("style", "");
$(this).css("width", "0px");
});
$(".white-bg").addClass("flipInY");
nowIndex = index;
},
onEnd: function (index) {
$(".focus-circlet").attr("class", 'focus-circlet fixpng');
$(".focus-circlet").addClass('f-bg0' + (index + 1));
$(".focus-logo").addClass("c-bg0" + (index + 1));
if (navigator.userAgent.indexOf("IE") >= 0) {
$(".focus-fixed-text")[0].setAttribute("class", "focus-fixed-text t-bg0" + (nowIndex + 1));
$(".focus-fixed-text").show().attr("class", "focus-fixed-text t-bg0" + (nowIndex + 1)).animate({ width: 400 }, 800, 'easeOutBounce', function () {
slider.busy = false;
});
}
},
onShow: function (index) {
if (navigator.userAgent.indexOf("MSIE 6.0") || navigator.userAgent.indexOf("MSIE 7.0") || navigator.userAgent.indexOf("MSIE 8.0") || navigator.userAgent.indexOf("MSIE 9.0")) {
//$(".white-bg").bind("webkitAnimationEnd animationend MSTransitionEnd", function(){
$(this).removeClass("flipInY");
nowIndex = index;
$(".focus-fixed-text").show().attr("class", "focus-fixed-text t-bg0" + (nowIndex + 1)).animate({ width: 430 }, 800, 'easeOutBounce', function () {
});
$(".focus-fixed-text p").html(textArray[nowIndex]);
$("#img_link").attr('href', linkArray[nowIndex]);
//});
}
} //回调
});
$(".white-bg").bind("webkitAnimationEnd animationend MSTransitionEnd", function () {
$(this).removeClass("flipInY");
slider.busy = true;
$(".focus-fixed-text p").html(textArray[nowIndex]);
$("#img_link").attr('href', linkArray[nowIndex]);
$(".focus-fixed-text").show().attr("class", "focus-fixed-text t-bg0" + (nowIndex + 1)).animate({ width: 400 }, 800, 'easeOutBounce', function () {
slider.busy = false;
});
});
});
$("nav.nav-TAL>ul>li>a").each(function () {
var $this = $(this), index = $("nav.nav-TAL>ul>li>a.dropdown_fn").index($this);
if ($this.is(".dropdown_fn")) {
$this.bind("mouseover", function (e) {
$("nav.nav-TAL>ul>li>a").removeClass("hover");
$("nav.nav-TAL>ul>li>div:visible").hide();
$("nav.nav-TAL>ul>li>div").eq(index).show();
});
} else {
$this.bind("mouseover", function (e) {
$("nav.nav-TAL>ul>li>a").removeClass("hover");
$("nav.nav-TAL>ul>li>div:visible").hide();
});
}
});
$("nav.nav-TAL>ul>li>div").bind("mouseover", function () {
var index = $("nav.nav-TAL>ul>li>div").index($(this));
$("nav.nav-TAL>ul>li>a.dropdown_fn").eq(index).addClass("hover");
});
$("div.subNav-TAL").each(function (index) {
var $this = $(this);
$this.bind("mouseout", function (e) {
if ($this.find("*").index($(e.relatedTarget)) <= 0) {
$this.hide();
}
});
});
});
via:http://www.w2bc.com/Article/17218
基于jQuery的网站首页宽屏焦点图幻灯片的更多相关文章
- jQuery带缩略图的宽屏焦点图插件
在线演示 本地下载
- 一款jQuery特效编写的大度宽屏焦点图切换特效
一款jQuery编写的大度宽屏焦点图切换特效 焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片, 最好的是,此特效兼容IE6以及其它浏览器. 适用浏览器:IE6.IE7. ...
- 一个酷炫的，基于HTML5,Jquery和Css的全屏焦点图特效，兼容各种浏览器
基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...
- 基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="slid ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 一款jQuery仿海尔官网全屏焦点图特效代码
一款jQuery仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效. 当焦点图切换时,下方的三块小图也相对应的进行切换.并且特效还兼容头疼的IE6.赶快去和谐了它吧! 适用浏览器: ...
- 基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sl ...
- 9种网页Flash焦点图和jQuery焦点图幻灯片
jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 Flash右侧焦点图上下滑动切换 左右按钮滑动切换的网页幻灯片 双图同时滑动切换的焦点图 含有上下按钮的双图同时滑动切换的焦点图 常见的j ...
- “焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”仅需一个SuperSlidev2.1
官网:http://www.superslide2.com/index.html 1. 标签切换 / 书签切换 / 默认效果 2. 焦点图 / 幻灯片 3. 图片滚动-左 4. 图片滚动-上 5. 图 ...
随机推荐
- Java基础 —— 概述
Java语言: JDK(Java Development Kit)开发工具包,提供Java的开发环境和运行环境 --> 适合于开发 JRE(Java Runtime Environment)Ja ...
- jszs 快速排序
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- mediawiki 的使用 2
要想外部电脑能访问你的网站,网站部署好后,在LocalSettings.php 里将这句 $wgServer = "http://localhost"; 改成 $wgServer ...
- openstack neutron 各节点网络配置
- pthread_cond_wait 信号量丢失
服务器在使用pthread_cond_wait的时候遇到一个问题.具体描述如下 一个主进程,给n个从线程发送计算请求,主进程会等待n个线程返回,在执行下一步 从线程计算完毕后,最后一个线程会通知主线程 ...
- utf8 和 UTF-8 的区别
只有在MySQL中可以使用“utf-8”的别名“utf8”,但是在其他地方一律使用大写“UTF-8”.
- 关于VBox安装GhostXP出现蓝屏processr.sys 的解决办法
用VirtualBox虚拟系统安装了一个Ghost XP SP3,还原系统后,重启进入Windows XP时,出现蓝屏提示processr.sys, 蓝屏代码为0x000000CE提示处理器驱动文件问 ...
- MySQL重置密码（OSX）
1.停止MySQL的服务 sudo /Library/StartupItems/MySQLCOM/MySQLCOM stop 2.cd /usr/local/mysql/bin ./mysqld_ ...
- js 解决原型问题的方案 ： 构造器和原型的组合
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- iOS开发-关于网络状态的判断
在判断网络状态这个问题上,苹果提供了一个叫Reachability的第三方库,但是这个库并不能真正的检测我们的网络状态,我也是在调试程序的时候发现的.详情可以阅读这个博客http://blog.csd ...