jquery不规则随机切换焦点图

浏览数：29 / 时间：2015年06月09日

js：jquery.nivo.slider.pack.js+jquery-1.6.1.min.js

html：

<!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>jquery不规则随机切换焦点图</title>
</head>

<body>

<link rel="stylesheet" href="css/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />


<div class="slider-wrapper theme-orman">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        <img src="img/01.jpg" alt="Homepage Slider" title="the best" />
        <img src="img/02.jpg" alt="Web Design" title="Wedding" />
        <img src="img/03.jpg" alt="New Template" title="长城婚礼" />
        <img src="img/04.jpg" alt="Business Website" title="好朋友一起" />
    </div>
    <div class="nivo-controlNav-bg"></div>
</div>


<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(‘#slider‘).nivoSlider({
        controlNav:true
    });
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

css：

@charset "utf-8";
/* The Nivo Slider styles */
.nivoSlider{position:relative;}
.nivoSlider img{position:absolute;top:0px;left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink{position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;}
/* The slices and boxes in the Slider */
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;}
.nivo-box{display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption{position:absolute;left:0px;bottom: 0px;background:#000;color:#fff;opacity:0.8; /* Overridden by captionOpacity setting */width:100%;z-index:8;}
.nivo-caption p{padding:5px;margin:0;}
.nivo-caption a{display:inline !important;}
.nivo-html-caption{display:none;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer;}
.nivo-prevNav{left:0px;}
.nivo-nextNav{right:0px;}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a{position:relative;z-index:9;cursor:pointer;}
.nivo-controlNav a.active{font-weight:bold;}

@charset "utf-8";
/* theme-orman */
.theme-orman.slider-wrapper{width: 960px;height: 340px;position:relative; margin:0 auto;}
.theme-orman .nivoSlider{position:relative;width:960px;height:340px;background:url(../img/loading.gif) no-repeat 50% 50%;}
.theme-orman .nivoSlider img{position:absolute;top:0px;left:0px;display:none;width:960px; /* Make sure your images are the same size */height:340px; /* Make sure your images are the same size */}
.theme-orman .nivoSlider a{border:0;display:block;}
.theme-orman .nivo-controlNav-bg{position: absolute;left: 0;bottom: -15px;width: 960px;height: 44px;z-index: 100;background: url(../img/slider_nav_bg.png) no-repeat    }
.theme-orman .nivo-controlNav{position:absolute;left: 472px;bottom: 4px;margin-left:-30px; /* Tweak this to center bullets */z-index: 101;}
.theme-orman .nivo-controlNav a{display:block;width:12px;height:12px;background:url(../img/slider_nav_button.png) no-repeat;text-indent:-9999px;border:0;margin-right:7px;float:left;}
.theme-orman .nivo-controlNav a.active{background-position:0 -12px;}
.theme-orman .nivo-directionNav a{display:block;width:25px;height: 240px;background:url(../img/arrows.png) no-repeat 0% 50%;text-indent:-9999px;border:0;top:40px;}
.theme-orman a.nivo-nextNav{background-position:100% 50%;right:-24px;padding-right:20px;}
.theme-orman a.nivo-prevNav{left:-24px;padding-left:20px;}
.theme-orman .nivo-caption{font-family: Helvetica, Arial, sans-serif;}
.theme-orman .nivo-caption a{ color:#fff;border-bottom:1px dotted #fff;}
.theme-orman .nivo-caption a:hover{ color:#fff;}
.theme-orman .ribbon{background:url(../img/ribbon.png) no-repeat;width:111px;height:111px;position:absolute;top:-4px;left: -5px;z-index:300;}