学做网站培训课程介绍

当前位置:

如何制作网站轮播图(网页图片轮播幻灯片代码分享)

各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。

现在在这里我想给同学做分享一个网页幻灯片轮播代码,可以使用到任意一个网站上,只要把代码里的图片和文字改成自己的就可以了。

下面是用这个网页幻灯片轮播代码制作的网页幻灯片效果图:

网页图片轮播幻灯片效果图

以下是网页图片轮播幻灯片代码

HTML代码:


<div class="banner">
        <img class="change pre"  src="images/pre.png" >
        <img class="change next" src="images/next.png" >

        <div class="cirbox" >
            <div class="cir cr"></div>
            <div class="cir"></div>
            <div class="cir"></div>
            <div class="cir"></div>
        </div>
        <div class="imgbox">
            <img class="img im" src="images/banner-01.png">
            <img class="img" src="images/banner-02.png">
            <img class="img" src="images/banner-03.png">
            <img class="img" src="images/banner-04.png">
        </div> 
    </div>

    <div>

    </div>

CSS代码:


.banner {
    width: 100%;
    height: 500px;
    background-color: aqua;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.imgbox {
    width: 100%;
    height: 500px;
    position: relative;
    background-color: #222222;
    overflow: hidden;
}
.img {
    position: absolute;
    display: none;
    left: 50%;
    margin-left: -683px;
}
.im {
    display: block;
}
.change {
    height: 100px;
    display: block;
    position: absolute;
    z-index: 20;
    opacity: 0.4;
    transition: 0.4s;
    top: 50%;
    margin-top: -50px
}
.change:hover {
    opacity: 1;
}
.pre {
    left: 1%;
}
.next {
    right: 1%;
}
.cirbox {
    width: 88px;
    position: absolute;
    bottom: 15px;
    z-index: 10;
    left: 50%;
    margin-left: -44px;
    cursor: pointer;
}
.cir {
    width: 12px;
    height: 12px;
    background-color: white;
    opacity: 0.4;
    float: left;
    border-radius: 6px;
    margin: 0 5px 0 5px;
    cursor: pointer;
}
.cir:hover {
    background-color: cyan;
    transition: 0.8s;
}
.cr {
    opacity: 1;
}
.cr:hover {
    background-color: white;
}

JQERY代码:


document.write("<script src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'><\/script>");
$(document).ready(function(){
    var t;
    var index=-1;
    var times=3000;//切换速度
    t=setInterval(play,times);

    function play(){
        index++;
        if(index>3){index=0}
        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
    }

    $('.cir').click(function(){
        $(this).addClass('cr').siblings().removeClass('cr')
        var index=$(this).index()
        $('.img').eq(index).fadeIn(600).siblings().fadeOut(600)
    })

    $('.pre').click(function(){
        index--
        if(index<0){index=3}
        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
    })
    $('.next').click(function(){
        index++
        if(index>3){index=0}
        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
    })

    $('.banner').hover(
        function(){
            clearInterval(t)
        },
        function(){
            t=setInterval(play,times)
            function play(){
                index++
                if(index>3){index=0}
                $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)
                $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')
            }
        }
    );

});

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在我们仿站过程中,有点网站上带有轮播图,大多都是通过JS+FLASH的方式。这会给网站带来大量的冗余代码。如果你不喜欢,可以用一张图片来替换
  • 网页如何添加背景音乐 视频教程附件下载 (1116826 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • 学做网站时,经常要修改代码,很多时候需要用到颜色代码,由于太多,不可能都记住,所以找到了一个带有中文颜色名称表示的颜色代码表,以便后期网页设
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • 分享一款超漂亮的内衣模板,适合内衣销售衣服类物品,化妆品展示都可以。自己做的二次开发,使用很简单,直接在WP程序后台安装就可以了。喜欢的同学可