该源码从跑跑卡丁车官方移植过来,采用jquery进行图片轮换动画,效果比较漂亮,大家可以据此来应用到实际网站项目当中去。演示效果图如下所示:
1.主界面html代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>banner焦点图效果</title>
- <link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css">
- <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
- <script type="text/javascript" src="js/package.js"></script>
- <script type="text/javascript" src="js/indextest.js"></script>
- </head>
- <body>
- <div class="mainSlider">
- <ul class="spotlight">
- <li style="display:list-item;"> <img src="images/karblt0214sy01.jpg" border="0" style="cursor:pointer;"></li>
- <li style="display: none;"> <img src="images/karbln0214sy02.jpg" border="0" style="cursor:pointer;"></li>
- <li style="display: none;"> <img src="images/karsay0214sy03.jpg" border="0" style="cursor:pointer;"></li>
- <li style="display: none;"> <img src="images/karthr0207sy01.jpg" border="0" style="cursor:pointer;"></li>
- <li style="display: none;"> <img src="images/karlzs0207sy02.jpg" border="0" style="cursor:pointer;"></li>
- <li style="display:none;"> <img src="images/kartho0207sy03.jpg" border="0" style="cursor:pointer;"></li>
- <li style="display: none;"> <img src="images/karlojsy08.jpg" border="0" style="cursor:pointer;"></li>
- </ul>
- <!--*******************************SY01-SY08右侧广告轮播*******************************-->
- <ul class="spotlightBanner">
- <li class="selected">
- <dl>
- <dt><img src="images/karblt0214dt01.jpg"></dt>
- <dd>情人节情书半价</dd>
- <dd>快和心爱的人表白</dd>
- </dl>
- </li>
- <li class="">
- <dl>
- <dt><img src="images/karbln0214dt02.jpg"></dt>
- <dd>暗+黑色爱情钥匙</dd>
- <dd>粉红蛇HT表爱意</dd>
- </dl>
- </li>
- <li class="">
- <dl>
- <dt><img src="images/karsay0214dt03.jpg"></dt>
- <dd>皮蛋和黑妞</dd>
- <dd>不可说的秘密2</dd>
- </dl>
- </li>
- <li class="">
- <dl>
- <dt><img src="images/karthr0207dt01.jpg"></dt>
- <dd>黄色幸运手套</dd>
- <dd>三倍幸运买一赠一</dd>
- </dl>
- </li>
- <li class="">
- <dl>
- <dt><img src="images/karlzs0207dt02.jpg"></dt>
- <dd>新春活动不停歇</dd>
- <dd>毒蛇徽章来相迎</dd>
- </dl>
- </li>
- <li class="">
- <dl>
- <dt><img src="images/kartho0207dt03.jpg" /></dt>
- <dd>超凡尊享礼包</dd>
- <dd>无限制控的春天</dd>
- </dl>
- </li>
- <li class="">
- <dl>
- <dt><img src="images/karlojdt08.jpg"></dt>
- <dd>罗技购物送惊喜</dd>
- <dd>跑跑好礼等你赢</dd>
- </dl>
- </li>
- </ul>
- <!--******右侧广告轮播*小按钮*******-->
- <div class="scrollbar">
- <div class="arrowButton"> <a href="" class="arrowUp"></a> <a href="" class="arrowDown"></a></div>
- </div>
- </div>
- </body>
- </html>
- $(document).ready(function() {
- //控制右方缩略图的鼠标hover移上后大图滚动展现效果
- $(".spotlightBanner li").hover(function() {
- var h = $(this).index();
- a(h);
- c()
- },
- function() {
- d()
- });
- var f;
- //控制右方-向上箭头的点击事件
- $(".arrowUp").live("click",
- function() {
- f = true;
- var h = $(".spotlightBanner li.selected").index();
- c();
- if (h == 0) {
- a(e - 1)
- } else {
- a(h - 1)
- }
- $(this).die("mouseleave").live("mouseleave",
- function() {
- f = false;
- $(this).die("mouseleave");
- d()
- });
- return false
- });
- //控制右方-向下箭头的点击事件
- $(".arrowDown").live("click",
- function() {
- var h = $(".spotlightBanner li.selected").index();
- c();
- if (h >= e - 1) {
- a(0)
- } else {
- a(h + 1)
- }
- $(this).die("mouseleave").live("mouseleave",
- function() {
- $(this).die("mouseleave");
- d()
- });
- return false
- });
- var g;
- d();
- var e = $(".spotlightBanner li").length;
- var b = ($(".track").height() - $(".trackBar").height()) / (e - 1);
- function d() {
- var h = $(".spotlightBanner li.selected").index();
- g = setInterval(function() {
- h += 1;
- if (h >= e) {
- h = 0
- }
- a(h)
- },
- 3000)
- }
- function a(h) {
- if (h % 4 == 0) {
- $(".spotlightBanner").scrollTo("li:eq(" + h + ")", 200)
- } else {
- if (f && h % 4 == 3) {
- $(".spotlightBanner").scrollTo("li:eq(" + (h - 3) + ")", 200)
- }
- }
- $(".spotlightBanner li").removeClass("selected").eq(h).addClass("selected");
- $(".spotlight li").fadeOut().eq(h).fadeIn();
- $(".trackBar").css("top", h * b)
- }
- function c() {
- clearInterval(g);
- g = null
- }