轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播-蒲公英云

轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播

空话就不多说了，开始。。。

简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下

轮播和图片

每日一道理
感叹人生，是因为曾经没有过轰轰烈烈的壮举，觉得渺小，觉得平庸，似乎生活过于简略，简略得让人感觉烦躁。没有大言不惭地说过将来，只是比较现实地握住了现在，我想，这是一条路，每个人所必须踏上的一次旅程，曾经看到过这样一句话：成长的过程漫长却充实，自毁的过程短暂却留下一生痛苦，人生可以说是一次考验，何去何从取决于自我。

<!DOCTYPE html>
<html>
    <head>
        <title>简略经常使用的图片轮播，新闻轮播，焦点新闻轮播</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
        <script type="text/javascript">
            $(function(){           
                var index=0;
                var slideFlag = true;
                var length=$(".roll_pic img").length;
                function showImg(i){
                    $(".roll_pic a")
                    .eq(i).stop(true,true).fadeIn(600)
                    .siblings("a").hide();
                    $(".roll_num li").removeClass("roll_num_hover");
                    $(".roll_num li").eq(i).addClass("roll_num_hover");
                    $(".roll_title a")
                    .eq(i).stop(true,true).fadeIn(600)
                    .siblings("a").hide();
                }
                showImg(index);
                $(".roll_num li").click(function(){
                    index = $(".roll_num li").index(this);
                    showImg(index);
                    slideFlag = false;
                });    
                function autoSlide() {
                    setInterval(function() {
                        if(slideFlag) {
                            showImg((index+1) % length);
                            index = (index+1)%length;
                        }
                        slideFlag = true;
                    }, 3000);
                }
                autoSlide();
            });
        </script>
        <style type="text/css">
            * {padding:0px;    margin:0px;}
            .roll {width:480px;height:300px;border:solid 1px #c1c1c1;}
            .roll_num li.roll_num_hover {background:#fff;color:red;}
            .roll_pic img {width:480px;height:300px;}
            .roll_num {position:relative;top:-30px;margin-right:5px;float:right;z-index:10;}
            .roll_num li {list-style:none;float:left;font-size:12px;font-weight:600;width:18px;height:18px;line-height:18px;cursor:pointer;margin:0 3px;background:#000;opacity:0.50;text-align:center;color:#fff;-moz-border-radius:8px;border-radius:8px;}
            .roll_title {position:relative;top:-35px;padding-left:10px;height:30px;line-height:22px;background:#000;opacity:0.50;}
            .roll_title a {font-size:12px;text-decoration:none;color:#fff;}
            .roll_title a:hover {color:red;}
        </style>
    </head>
    <body>
        <div class="roll">
            <div class="roll_pic">
                <a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-05-22/1751132091.jpg"></a>
                <a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" ></a>
                <a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-04-12/1003432197.jpg"></a>
            </div>
            <div class="roll_num">
                <ul>
                    <li class="roll_num_hover">1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <div class="roll_title">
                <a href="http://www.875.cn/" target="_blank">图片1的标题</a>
                <a href="http://www.875.cn/" target="_blank" style="display:none">图片2的标题</a>
                <a href="http://www.875.cn/" target="_blank" style="display:none">图片3的标题</a>
            </div>
        </div>
    </body>
</html>

文章结束给大家分享下程序员的一些笑话语录：人工智能今天的发展水平：8乘8的国际象棋盘其实是一个体现思维与创意的强大媒介。象棋里蕴含了天文数字般的变化。卡斯帕罗夫指出，国际象棋的合法棋步共有1040。在棋局里每算度八步棋，里面蕴含的变化就已经超过银河系里的繁星总数。而地球上很少有任何数量达到这个级别。在金融危机之前，全世界的财富总和大约是1014人民币，而地球人口只有1010。棋盘上，所有可能的棋局总数达到10120，这超过了宇宙里所有原子的总数！经典语录网

-———————————————— 原创文章 By
轮播和图片
-————————————————