设为首页收藏本站
查看: 1850|回复: 19

[其它] 【Web前端】轮播图

[复制链接]
  • TA的每日心情
    开心
    2019-2-23 00:06
  • 签到天数: 32 天

    [LV.5]常住居民I

    发表于 2019-2-21 00:11:48 | 显示全部楼层 |阅读模式
    本帖最后由 志乡下客 于 2019-2-21 16:42 编辑

    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>slideshow</title>
            <link rel="stylesheet" type="text/css" href="css/slideshow.css">
    </head>
    <body>
            <div class="slide-wrap" id="slide-wrap">
                    <ul class="img-box" id="img-box">
                            <li style="display: block;"><img src="images/slideshow/img_0.jpg"></li>
                            <li><img src="images/slideshow/img_1.jpg"></li>
                            <li><img src="images/slideshow/img_2.jpg"></li>
                    </ul>
                    <ul class="btn-box" id="btn-box">
                            <li class="current"><a href="javascript:void(0);"></a></li>
                            <li><a href="javascript:void(0);"></a></li>
                            <li><a href="javascript:void(0);"></a></li>
                    </ul>
                    <a href="javascript:void(0);" class="slide-arrow" id="back"></a>
                    <a href="javascript:void(0);" class="slide-arrow" id="next"></a>
            </div>
            <script type="text/javascript" src="js/common.js"></script>
            <script type="text/javascript" src="js/slideshow.js"></script>
    </body>
    </html>

    CSS:
    @charset 'utf-8';
    body,ul{
            margin: 0;
            padding: 0;
    }
    ul{
            list-style-type: none;
    }
    /*幻灯片容器*/
    .slide-wrap{
            position: relative;
            width: 1200px;
            height: 400px;
            margin: 0 auto;
            cursor: pointer;
    }
    /*图片容器*/
    .img-box,.img-box li,.img-box img{
            width: 100%;
            height: 100%;
    }
    .img-box li{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
    }
    /*幻灯片下方按钮*/
    .btn-box{
            position: absolute;
            top: 370px;
            left: 50%;
            transform: translateX(-50%);
    }
    .btn-box::after{
            display: block;
            content: "";
            clear: both;
    }
    .btn-box li{
            float: left;
    }
    .btn-box a{
            display: block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background: #FFF;
            border-radius: 50%;
    }
    .current a{
            background: #C0C0C0;
    }
    /*幻灯片左右两侧箭头*/
    .slide-arrow{
            position: absolute;
            display: block;
            width: 47px;
            height: 47px;
            top: 50%;
            transform: translateY(-50%);
    }
    .slide-arrow:hover{
            opacity: 1!important;
    }
    #back{
            background: url(../images/mac_btn.png) 0 0 no-repeat;
            left: 0;
            opacity: 0;
            transition: all 0.1s;
    }
    #next{
            background: url(../images/mac_btn.png) 0 -45px no-repeat;
            right: 0;
            opacity: 0;
            transition: all 0.1s;
    }
    .slide-wrap:hover #back{
            left: 45px;
            opacity: 0.7;
    }
    .slide-wrap:hover #next{
            right: 45px;
            opacity: 0.7;
    }

    js:
    var slideWrap = document.getElementById('slide-wrap');//获取幻灯片容器
    var imgList = document.getElementById('img-box').getElementsByTagName('li');//获取与图片相关的<li>元素
    var btnList = document.getElementById('btn-box').getElementsByTagName('li')//获取与按钮相关的<li>元素
    var back = document.getElementById('back');//左箭头
    var next = document.getElementById('next');//右箭头
    var timer;//定时器
    var index = 0;//当前图片索引值
    //事件绑定
    window.onload = function (){
            bindEvent(slideWrap,'mouseenter',stop);
            bindEvent(slideWrap,'mouseleave',play);
            for (var i = 0;i < btnList.length;i++){
                    btnList.onmouseenter = (function (i){
                            return function (){
                                    index = i;
                                    showImg();
                                    changeBtnColor();
                            }
                    })(i);//闭包函数
            }
            bindEvent(back,'click',function (){index--;if (index <0 ) {index = 2;}showImg();changeBtnColor();});
            bindEvent(next,'click',function (){index++;if (index > 2) {index = 0;}showImg();changeBtnColor();});
    }
    // 播放
    function play(){
            timer = setInterval(function (){
                    index++;
                    if (index > 2) {
                            index = 0;
                    }
                    showImg();
                    changeBtnColor();
            },2500);
    }
    // 停止播放
    function stop(){
            clearInterval(timer);
    }
    // 显示图片
    function showImg(){
            for (var i = 0;i < imgList.length;i++){
                    if (imgList.style.display == 'block') {
                            imgList.removeAttribute('style');
                            break;
                    }
            }
            imgList[index].style.display = 'block';
    }
    // 修改当前图片对应的按钮颜色
    function changeBtnColor(){
            for (var i= 0;i < btnList.length;i++){
                    if (btnList.className == 'current') {
                            btnList.removeAttribute('class');
                            break;
                    }
            }
            btnList[index].className = 'current';
    }
    play();
    /**
    * 事件绑定兼容处理
    * @param  {object} obj        监听的对象   
    * @param  {String} eventType  事件类型
    * @param  {object} handle     事件触发时执行的函数
    * @param  {boolean} useCapture 可选。指定事件是否在捕获或冒泡阶段执行
    * @return {void}            无
    */
    function bindEvent(obj,evt,handle,useCapture){
        if (arguments.length == 3) {//useCapture缺省处理
            useCapture = false;
        }
        if (obj.addEventListener){
            obj.addEventListener(evt, handle, useCapture);  //非IE浏览器
        }else{
            obj.attachEvent('on' + evt,handle);  //IE浏览器
        }
    }

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?注册

    x
  • TA的每日心情

    16 小时前
  • 签到天数: 171 天

    [LV.7]常住居民III

    发表于 2019-2-21 00:29:03 | 显示全部楼层
    什么东西啊,不懂啊
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    6 天前
  • 签到天数: 42 天

    [LV.5]常住居民I

    发表于 2019-2-21 21:58:21 | 显示全部楼层
    这是web,网页制作吧
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    前天 21:31
  • 签到天数: 24 天

    [LV.4]偶尔看看III

    发表于 2019-2-22 08:17:41 | 显示全部楼层
    新人,网页制作是不是要域名
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    6 天前
  • 签到天数: 182 天

    [LV.7]常住居民III

    发表于 2019-2-22 09:10:49 | 显示全部楼层
    林深时见鹿 发表于 2019-2-22 08:17
    新人,网页制作是不是要域名

    发布外网出去需要域名和服务器,局域网内不用
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    昨天 09:46
  • 签到天数: 152 天

    [LV.7]常住居民III

    发表于 2019-2-22 09:24:35 | 显示全部楼层
    这个是网页制做 代码有些多
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    昨天 20:06
  • 签到天数: 45 天

    [LV.5]常住居民I

    发表于 2019-2-25 20:43:22 | 显示全部楼层
    林深时见鹿 发表于 2019-2-22 08:17
    新人,网页制作是不是要域名

    你可以先在自己电脑搭完一套网站,当成练习
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    前天 09:01
  • 签到天数: 35 天

    [LV.5]常住居民I

    发表于 2019-2-26 08:34:46 | 显示全部楼层
    这是HTML网页吧
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    2019-2-26 12:39
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    发表于 2019-2-26 12:44:51 | 显示全部楼层
    前端页面代码
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    4 天前
  • 签到天数: 31 天

    [LV.5]常住居民I

    发表于 2019-3-3 00:26:06 | 显示全部楼层
    林深时见鹿 发表于 2019-2-22 08:17
    新人,网页制作是不是要域名

    纯粹测试的不需要  要是想投放到外网需要申请域名
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    4 天前
  • 签到天数: 31 天

    [LV.5]常住居民I

    发表于 2019-3-3 00:37:21 | 显示全部楼层
    表示还没学js  不是很会用  琢磨了会
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2019-3-10 14:08
  • 签到天数: 35 天

    [LV.5]常住居民I

    发表于 2019-3-3 14:26:58 | 显示全部楼层
    路人甲1024 发表于 2019-2-25 20:43
    你可以先在自己电脑搭完一套网站,当成练习

    请问下,怎么弄
    回复 支持 反对

    使用道具 举报

    头像被屏蔽
  • TA的每日心情

    2019-3-6 00:24
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2019-3-3 21:31:19 | 显示全部楼层
    提示: 作者被禁止或删除 内容自动屏蔽
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    前天 08:10
  • 签到天数: 24 天

    [LV.4]偶尔看看III

    发表于 2019-3-8 09:51:45 | 显示全部楼层
    网建三大语言html css js
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    关闭

    站长推荐 上一条 /1 下一条

    红盟社区--中国红客联盟 

    Processed in 0.097916 second(s), 27 queries.

    站点统计| 举报| Archiver| 手机版| 黑屋 |   

    Powered by HUC © 2001-2017 Comsenz Inc.

    手机扫我进入移动触屏客户端

    关注我们可获取更多热点资讯

    Honor accompaniments. theme macfee

    快速回复 返回顶部 返回列表