jQuery图文介绍轮播滚动特效代码

jQuery图文介绍轮播滚动特效代码

一款简单jQuery实现图文轮播滚动代码。左边按钮的js代码有,只是没写样式,因为该项目不用。

使用方法
在页面引入以下jquery.js、Choices.js文件

1
2
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/Choices.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!--选择尚德开始-->
<div class="Choices">
<div class="Choices_text">
<div class="Choices_head">为何选择尚德</div>
<div class="Choices_content">
<div class="Choicesnext"><img src="images/Choicesnext.png" width="100%"></div>
<div class="Choices_banner">
    <ul>
        <li>
            <div class="Choices_left"><img src="images/Choices1.jpg" width="100%"></div>
            <div class="Choices_right">
                <h1>直播+录播</h1>
                <h2>随时随地轻松学</h2>
                <p>采用直播互动课堂加录播的方式,课程界面显示PPT和板书,错过直播可以看回放,随时随地上课,不必担心错过重要知识点。</p>
                <div class="Choicesbut"><a onClick="interactive.openNtkf('0','')">了解尚德</a></div>
            </div>
        </li>
        <li>
            <div class="Choices_left"><img src="images/Choices2.jpg" width="100%"></div>
            <div class="Choices_right">
                <h1>师资力量雄厚</h1>
                <h2></h2>
                <p>尚德机构13年起便推进教师全职化,吸纳北京广州优秀师资力量,提升教学团队硬实力,专注课程服务自升级,构建标准化课程体系,致力于让每一个学员都爱上学习并从中受益。</p>
                <div class="Choicesbut"><a onClick="interactive.openNtkf('0','')">了解尚德</a></div>
            </div>
        </li>
        <li>
            <div class="Choices_left"><img src="images/Choices3.jpg" width="100%"></div>
            <div class="Choices_right">
                <h1>精良课程模块</h1>
                <h2></h2>
                <p>优质课程设计,基础知识点详解,精选题库训练点拨,高频知识点切片解析,考前精编模拟题演练。</p>
                <div class="Choicesbut"><a onClick="interactive.openNtkf('0','')">了解尚德</a></div>
            </div>
        </li>
    </ul>
</div>
<div class="Choicestel">
    <ul>
        <li><01/03></li>
        <li><02/03></li>
        <li><03/03></li>
    </ul>
</div>
</div>
</div>
</div>
<!--选择尚德结束-->

文件信息:

    1

    发表评论