简洁js轮播图自动轮播图

本博客主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

这是一个悲痛的日子
简洁js轮播图自动轮播图

 

直接上代码:


<div id="container">
        <div onclick="tutu1()" id="list" style="left: 0px;">
            <img onclick="tu1()" src="img/1 (1).jpg" alt="1" />
            <img onclick="tu()" src="img/1 (2).jpg" alt="2" />
            <img onclick="tu()" src="img/1 (3).jpg" alt="3" />
            <img onclick="tu()" src="img/1 (4).jpg" alt="4" />
            <img onclick="tu()" src="img/1 (5).jpg" alt="5" />
            
        </div>
        
    </div>

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    padding-top: 200px;
    padding-left: 600px;
    
}

#container {
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid #333;
    overflow: hidden;
}

#list {
    position: absolute;
    z-index: 1;
    width: 4200px;
    height: 400px;
}

img {
    float: left;
    
}

#container:hover .arrow {
    display: block;
}
#dadiv{
    width: 1200px;
    height: 800px;
    display:"none";
}
#dadiv img{
    display:"none";
    z-index: 9999;
    width: 1200px;
    height: 800px;
}
//自动轮播 每1秒轮播一次
var kaishi = document.getElementById("list");

    function lun(){ 
        if(list.style.left == "-2400px"){
            yuan = 0;
        }else{
            yuan = parseInt(list.style.left)-600;
        }
        list.style.left = yuan + "px";
        } 
        var t2 = window.setInterval("lun()",3000); 

 

未经允许不得转载:作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《简洁js轮播图自动轮播图》 发布于2019-01-11

分享到:
赞(3) 打赏

评论 抢沙发

8 + 2 =


简洁js轮播图自动轮播图

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

79代刷网
代刷网各种代刷 售后有保证 代做各种网站有需要留言给我即可!
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册