jqueryfuns实现横排多图文幻灯片点击切换效果代码

代码语言:html

所属分类:幻灯片

代码描述:jqueryfuns实现横排多图文幻灯片点击切换效果代码

代码标签: jquery funs 横排 图文 幻灯片 点击 切换

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jqueryfuns.css">
</head>

<body>
    <div class="btnMode" id="slider" style="margin-top:150px;">
        <a href="javascript:void(0);" class="prev btn"></a>
        <div class="scroll">
            <ul class="scrollContainer">
                <li class="panel" id="panel_1">
                    <a href="#" class="inside">
                        <img width="230" height="295" alt="Alexander" src="//repo.bfw.wiki/bfwrepo/image/62e88ca58fa21.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_230,h_295,/quality,q_90" />
                        <span>春晓秋冬</span>
                    </a>
                </li>
                <li class="panel" id="panel_2">
                    <a href="#" class="inside">
                        <img width="230" height="295" alt="Alexander" src="//repo.bfw.wiki/bfwrepo/image/62e20e6f61a50.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_230,h_295,/quality,q_90" />
                        <span>春晓秋冬</span>
                    </a>
                </li>
                <li class="panel" id="panel_3">
                     <a href="#" class="inside">
                        <img width="230" height="295" alt="Alexander" src="//repo.bfw.wiki/bfwrepo/image/62c370b52c7d8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_230,h_295,/quality,q_90" />
                        <span>春晓秋冬</span>
                    </a>
                </li>
                <li class="panel current" id="panel_4">
                      <a href="#" class="inside">
                        <img width="230" height=&qu.........完整代码请登录后点击上方下载按钮下载查看

网友评论0