码迷,mamicode.com
首页 > Web开发 > 详细

jquery自动焦点图

时间:2015-02-28 18:18:55      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:

效果预览:http://runjs.cn/detail/vydinibc

 带左右箭头的自动焦点图:http://runjs.cn/detail/wr1d1keh

html:

<div class="recommend">
                
                
                <div class="pic" id="fade">
                    <ul>
                        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" /></a></li>
                        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_32.jpg" /></a></li>
                        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_38.jpg" /></a></li>
                    </ul>
                    <ol>
                        <li class="active"><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_29.jpg" /></a></li>
                        <li><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_32.jpg" /></a></li>
                        <li><a href="javascript:;"><img src="http://sandbox.runjs.cn/uploads/rs/198/kn8pai72/index_38.jpg" /></a></li>
                    </ol>
                    <p>内容1~</p>
                </div>

css:

        body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; }
        em { font-style:normal; }
        li { list-style:none; }
        a { text-decoration:none; }
        img { border:none; vertical-align:top; }
        table { border-collapse:collapse; }
        input,textarea { outline:none; }
        textarea { resize:none; overflow:auto; }
        body { font-size:12px; font-family:"微软雅黑"; }
        
        .recommend .pic { width:294px; height:168px; padding:12px 12px 0; background:#f8f8f8; position:relative; margin:0 auto; border-radius:6px; }
        .recommend .pic ul { width:223px; height:133px; position:absolute; top:12px; left:12px; }
        .recommend .pic ul li { width:223px; height:133px; border:1px solid #fff; position:absolute; top:0; left:0; }
        .recommend .pic ul img { width:223px; height:133px; }
        .recommend .pic ol { position:absolute; top:12px; right:12px; }
        .recommend .pic ol li,.recommend .pic ol img { width:54px; height:30px; }
        .recommend .pic ol li { border:3px solid #fff; margin-bottom:13px; }
        .recommend .pic ol .active { border:3px solid #d6191d; }
        .recommend .pic p { line-height:32px; position:absolute; left:12px; bottom:0px; }
        
        .recommend .list { padding:18px 26px 0; }
        .recommend .list li { height:27px; vertical-align:middle; }
        .recommend .list em { float:left; color:#dfdfdf; margin-right:7px; }
        .recommend .list em img { margin-right:3px; }
        .recommend .list a { float:left; color:#454545; }
        .recommend .list a:hover { text-decoration:underline; }
        .recommend .list span { float:right; font-family:arial; font-size:12px; color:#999; }

js:

    // 自动播放的焦点图
    (function (){
        var oDiv = $(#fade);
        var aUlLi = oDiv.find(ul li);
        var aOlLi = oDiv.find(ol li);
        var oP = oDiv.find(p);
        var arr = [ 内容1~, 内容2, 内容3 ];
        var iNow = 0;
        var timer = null;
        
        fnFade();
        
        aOlLi.click(function (){
            iNow = $(this).index();
            fnFade();
        });
        oDiv.hover(function (){ clearInterval(timer); }, autoPlay);
        
        function autoPlay() {
            timer = setInterval(function () {
                iNow++;
                iNow%=arr.length;
                fnFade();
            }, 2000);
        }
        autoPlay();
        
        function fnFade() {
            aUlLi.each(function (i){
                if ( i != iNow ) {
                    aUlLi.eq(i).fadeOut().css(zIndex, 1);
                    aOlLi.eq(i).removeClass(active);

                } else {
                    aUlLi.eq(i).fadeIn().css(zIndex, 2);
                    aOlLi.eq(i).addClass(active);
                }
            });
            oP.text(arr[iNow]);
        }
    })();

 

jquery自动焦点图

标签:

原文地址:http://www.cnblogs.com/wanliyuan/p/4305797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!