zoukankan      html  css  js  c++  java
  • jquery简单焦点图

    !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-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="#" /><script type="text/javascript" src="../华为轮播图/jquery-1.8.3.js"></script><style tppe="text/css">
    *{margin:0;padding:0;}
    ul li{list-style:none;}
    img{border:0;}
    .fstL{980px;margin:100px auto; overflow:hidden}
    .flash{position:relative;980px;height:320px;overflow:hidden;}
    .slider{position:relative;}
    .slider li{float:left;position:absolute;left:0;top:0;}
    .num{position:absolute;right:40px;bottom:20px;cursor:pointer;}
    .num li{float:left;border-radius:50%;background:#06F;margin-left:10px;text-align:center;font:600 14px/24px Arial, Helvetica,sans-serif;color:#fff;height:24px;24px;}
    .num li.on{background:#c00;}
    </style><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">
    //焦点图
    $(function() {
        var index = 0,len = $(".num >li").length,timer;
        $(".num li").mouseover(function() {
            index = $('.num li').index(this);
            showImg(index);
        }).eq(0).mouseover();
        $('.flash').hover(function() {
            clearInterval(timer);
        },function() {
            timer = setInterval(function() {
                showImg(index)
                index++;
                if(index == len){index = 0;}
            },3000);
        }).trigger("mouseleave");
    });
    function showImg(index) {
        //$('.slider').stop(true,false).animate({left:-adWidth*index},800);
    	$('.slider li').eq(index).stop(true,false).fadeIn(200).siblings().stop(true,false).fadeOut(200);	
        $('.num li').removeClass('on').eq(index).addClass('on');
    }
    </script></head><body>
    <div class="fstL">

    <div class="flash" id="flash">
    <ul class="slider">
    <li><a href="#"><img src="banner_1.jpg" width="980" height="320"></a></li>
    <li><a href="#"><img src="banner_2.jpg" width="980" height="320"></a></li>
    <li><a href="#"><img src="banner_3.jpg" width="980" height="320"></a></li>
    </ul>
    <ul class="num">
    <li class="on">1</li>
    <li>2</li>
    <li>3</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    IO编程
    File类
    对于Java集合理解
    Java泛型
    多线程编程
    异常处理
    Static.final修饰符、super关键字及常量与变量
    java类的基本结构
    数组
    二叉树后序遍历 递归 非递归
  • 原文地址:https://www.cnblogs.com/lglijing/p/3489098.html
Copyright © 2011-2022 走看看