PC端图片切换特效带标题,图片数量,滚动切换效果

发表于 2017-05-12 10:05:01   |   下载附件   |   字体:
滚动切换图片切换广告切换


HTML代码:

<div id="focus">
    <ul>
        <li>
            <a href="http://www.jq22.com/demo/jQuery-lb20151231/#">
            <img src="files/13_04.jpg" alt="焦点图效果下载2"></a>
        </li>
        <li>
            <a href="http://www.jq22.com/demo/jQuery-lb20151231/#">
            <img src="files/13_03.jpg" alt="焦点图效果下载1"></a>
        </li>
        <li>
            <a href="http://www.jq22.com/demo/jQuery-lb20151231/#">
            <img src="files/13_05.jpg" alt="焦点图效果下载3"></a>
        </li>
        <li>
            <a href="http://www.jq22.com/demo/jQuery-lb20151231/#">
            <img src="files/13_03.jpg" alt="焦点图效果下载4"></a>
        </li>
        <li>
            <a href="http://www.jq22.com/demo/jQuery-lb20151231/#">
            <img src="files/13_04.jpg" alt="焦点图效果下载5"></a>
        </li>
    </ul>
</div>


javascript代码:

var switchPic = function(options){

    // 基本参数
    var defaults = {
        nodeId:null,
        btnBgCss:'btnBg',           // 背景样式
        titleCss:'title',           // 图片标题
        btnCss:'btn',               // 图片按钮
        preNextCss:'preNext',     // 上一张 下一张按钮样式
        preCss:'pre',               // 上一张 样式
        nextCss:'next'              // 下一张 样式
    };
    var opts = $.extend(defaults, options);
    var node = $(opts.nodeId);
    var sWidth = node.width(); // 获取焦点图的宽度(显示面积)
    var len = node.find("ul li").length; //获取焦点图个数
    var index = 0;
    var picTimer;
    
    // 以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮
    var btn = "<div class='"+opts.btnBgCss+"'></div>
        <div class='"+opts.titleCss+"'></div>
        <div class='"+opts.btnCss+"'>";
        for(var i=0; i < len; i++) {
            btn += "<span></span>";
        }
        btn += "</div>
        <div class='"+opts.preNextCss+" pre'>&lt;</div>
        <div class='"+opts.preNextCss+" next'>&gt;</div>";
    node.append(btn);

    // 为小按钮添加鼠标滑入事件,以显示相应的内容
    node.find("."+opts.btnCss+" span").mouseover(function() {
        index = node.find("."+opts.btnCss+" span").index(this);
        showPics(node,index);
    }).eq(0).trigger("mouseover");

    // 上一页、下一页按钮透明度处理
    node.find("."+opts.preNextCss).hover(function() {
        $(this).stop(true,false);
    },function() {
        $(this).stop(true,false);
    });

    // 上一页按钮
    node.find("."+opts.preCss).click(function() {
        index -= 1;
        if(index == -1) {index = len - 1;}
        showPics(node,index);
    });

    // 下一页按钮
    node.find("."+opts.nextCss).click(function() {
        index += 1;
        if(index == len) {index = 0;}
        showPics(node,index);
    });

    // 本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度
    node.find("ul").css("width",sWidth * (len));
    
    // 鼠标滑上焦点图时停止自动播放,滑出时开始自动播放
    node.hover(function() {
        clearInterval(picTimer);
    },function() {
        picTimer = setInterval(function() {
            showPics(node,index);
            index++;
            if(index == len) {index = 0;}
        },4000); //此4000代表自动播放的间隔,单位:毫秒
    }).trigger("mouseleave");
    
    //显示图片函数,根据接收的index值显示相应的内容
    function showPics(node,index) { //普通切换
        var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
        //$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
        node.find("ul").stop(true,false).animate({"left":nowLeft},300);
        node.find("."+opts.titleCss).text(node.find("ul li").eq(index).find("img").attr("alt"));
        node.find("."+opts.btnCss+" span").removeClass('on').stop(true,false).eq(index).addClass('on').stop(true,false); 
        //为当前的按钮切换到选中的效果
    }

}

$(function() {

    switchPic({
        nodeId:'#focus'
    });
    
});


CSS代码:

/* focus */
    #focus{ width:785px; height:413px; overflow:hidden; position:relative; }
    #focus ul { height:413px; position:absolute; }
    #focus ul li { float:left; width:785px; height:413px; overflow:hidden; position:relative; background:#000;}
    #focus ul li div { position:absolute; overflow:hidden; }
    #focus .btnBg { position:absolute; width:785px; height:40px; left:0; bottom:0; background:#000; opacity: 0.5; filter:alpha(opacity=50); }
    #focus .title { position:absolute; width:545px; height:40px; left:0; bottom:0; text-align:left; line-height: 40px; padding-left: 15px; color:#fff; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; cursor:pointer; }
    #focus .btn { position:absolute; width:200px; height:10px; right:15px; bottom:15px; text-align:right; }
    #focus .btn span { display:inline-block; _display:inline; _zoom:1; width:10px; height:10px; border-radius: 100%; _font-size:0; margin-left:10px; cursor:pointer; background:#fff; opacity: 0.4; filter:alpha(opacity=40); }
    #focus .btn span.on{ background:#fff; opacity: 1; filter:alpha(opacity=100); }

    /* 上一张 下一张 */
    #focus .preNext { width: 33px; height: 33px; color: #fff; border-radius: 100%; background:#000; position: absolute; text-align: center; font: 20px/33px 'Microsoft Yahei'; cursor: pointer; opacity: 0.2; filter:alpha(opacity=20); animation:opacity 1s; }
    #focus .preNext:hover { opacity: 0.5; filter:alpha(opacity=50); animation:opacity 1s; }
    #focus .pre { left:30px; top: 180px; }
    #focus .next { right:30px; top: 180px; }