JQuery图片轮播（类似flash）
效果图：
以下为完整代码
*********************************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
  <title>jQuery图片轮播 demo</title>
    <style type="text/css">
    /*  自定义焦点容器 样式 大小 随自己的网站整体风格自定义调整  */
.CustomSlide {
    width: 98%;
    height: 252px;
    position:relative;
    left: -5px;
}
/* 幻灯容器 这里的样式 选择器 除高手外不要随便更改 样式随自己的网站风格调整  */
.slides div,ul, ol, li, h1,h2, p{margin:0;padding:0}
.slides div{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.2; padding:0 2px 0 0;}
.slides a{color:#047;text-decoration:none}
.slides a:hover{color:#a40000;text-decoration:none}
.slides h1{font-size:1em; font-weight:normal; line-height:1.8em}
.slides h1 a{background:#CFF; padding:2px 3px; text-decoration:none}
.slides h1 a:hover{background:#eee; text-decoration:underline}
.slides h2{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto}
.slides ul,li{list-style:none}
/* 幻灯样式 同上 选择器 不要随便更改 样式 自定义 */
.slides { position:relative; overflow:hidden; width:990px; height:250px; border:3px solid #e
ee; margin:0; }
.slide-pic{ overflow:hidden;width:990px}
.slide-pic img{ width:988px; height:248px;border:1px solid #E4E4E4}
.slide-pic li { display:none}
.slide-pic li.cur { display:block}
.slide-li { position:absolute; left:0; bottom:0; }
.slide-li li { float:left; width:197px; height:30px; line-height:30px; margin-right:1px; text-align:center}
.slide-li a:visited,.slide-li a:link { display:block; width:196px; height:30px; font-size:14px; color:#FFF}
.slide-li .cur a:visited, .slide-li .cur a:link, .slide-li a:hover { color:#333; text-decoration:none}
.op li { background:#666; opacity: 0.6; filter:alpha(opacity=60)}
.op li.cur { background:#99C914}
.slide-txt span { display:none}
</style>
    <script type="text/javascript" src="leapis/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
  <!--*幻灯开始*-->
<div class="CustomSlide">
<div class="slides" align="center">
  <ul class="slide-pic">
    <li><a href="blog.kpa7/">
        <img src="images/slide1.jpg" alt="" /></a></li>
    <li class="cur"><a href="blog.kpa7/">
        <img src="images/slide2.jpg" alt="" /></a></li>
    <li><a href="blog.kpa7/">
        <img src="images/slide3.jpg" alt="" /></a></li>
        <li><a href="blog.kpa7/">
        <img src="images/slide4.jpg" alt="" /></a></li>
    <li><a href="blog.kpa7/">
        <img src="images/slide5.jpg" alt="" /></a></li>
  </ul>
  <ul class="slide-li op">
    <li></li>
    <li class="cur"></li>
    <li></li>
    <li></li>
        <li></li>
  </ul>
  <ul class="slide-li slide-txt">
    <li><a href="">标题一</a></li>
    <li class="cur"><a href="">标题二</a></li>
    <li><a href="">标题三</a></li>
    <li><a href="">标题四</a></li>
        <li><a href="">标题五</a></li>
  </ul>
</div>   
</div>
<!-- 如果网站头部没有导入JQ库 也要以在这句注释的位置上导入 但同样要注意JQ多次导入的问题 见下面的说明 -->
<script>
//幻灯渐隐开始
var defaultOpts = {
    interval: 8000,        //当前画面停留时间
    fadeInTime: 1000,  //新画面切入时间
    fadeOutTime: 800  //当前画面离开时间  两张图片过渡时间为 切入和离开的总和
};
//Iterate over the current set of matched elements
var _titles = $("ul.slide-txt li");
var _titles_bg = $("ul.op li");
var _bodies = $("ul.slide-pic li");
var _count = _titles.length;
var _current = 0;
var _intervalID = null;
var stop = function() {
    window.clearInterval(_intervalID);
};
var slide = function(opts) {
    if (opts) {
        _current = opts.current || 0;
    } else {
        _current = (_current >= (_count - 1)) ? 0 : (++_current);
    };
    _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,
    function() {
jquery在线图片        _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
        _veClass("cur").eq(_current).addClass("cur");
    });
    _veClass("cur").eq(_current).addClass("cur");
    _veClass("cur").eq(_current).addClass("cur");
}; //endof slide
var go = function() {
    stop();
    _intervalID = window.setInterval(function() {
        slide();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。