利用js写的轮播图

原创 2017年06月19日 20:22:47
咱们先来看看html部分:
<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="lunbotu.css" />
        <script src="lunbotu.js"></script>
</head>
<body>
        <div id="box">
                <ul>
                        <li><img src="img/img1.jpg"/></li>
                        <li><img src="img/img2.jpg"/></li>
                        <li><img src="img/img3.jpg"/></li>
                        <li><img src="img/img4.jpg"/></li>
                        <li><img src="img/img5.jpg"/></li>
                        <li><img src="img/img6.jpg"/></li>
                        <li><img src="img/12.jpg"/></li>
                        <li><img src="img/13.jpg"/></li>
                </ul>
               
                <div  id="left"><img src="img/copy_1_03.png"/></div>
                <div  id="right"><img src="img/copy_1_05.png"/></div>
               
                <div id="area">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                        <span>7</span>
                        <span>8</span>
                       
                </div>
        </div>
</body>
</html>


接下来就是css部分了:
* {
        margin: 0;
        padding: 0;
}
               
#box {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 60px auto;
        position: relative;
        overflow: hidden;
}
               
ul {
        width: 4000px;
        height: 500px;
        position: absolute;
        top: 0;
        left: 0;
}
               
li {
        display: block;
        width: 500px;
        height: 500px;
        float: left;
}
               
img {
        display: block;
        width: 500px;
        height: 500px;
}
               
#left {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 10px;
        top: 225px;
        opacity: 0.3;
        filter: alpha(opacity: 30);
}
               
#right {
        width: 50px;
        height: 50px;
        position: absolute;
        right: 10px;
        top: 225px;
        opacity: 0.3;
        filter: alpha(opacity: 30);
}
               
#left img {
        width: 50px;
        height: 50px;
}
               
#right img {
        width: 50px;
        height: 50px;
}
               
#area {
        width: 1600px;
        height: 20px;
        position: absolute;
        left: 170px;
        top: 460px;
}
               
#area span {
        text-align: center;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        background: #ffffff;
        float: left;
        margin-left:20px;
}
#area span:hover{
        color:red;
}
再然后不用多说了就是js了:
function $(id){
        return document.getElementById(id)
}


window.onload=function(){
        
var _box=$("box");
var iLi=_box.children[0].children[0].cloneNode(true);
_box.children[0].appendChild(iLi);

var _ul=_box.children[0];
_ul.style.width=iLi.offsetWidth*(_ul.children.length)+"px";


var index=0;
var time;
function zou(){
        time=setTimeout(function(){
                index++;
                move(_ul,index*(-500))
        },1000)
}
zou();

function move(ele,pos){
        clearInterval(ele.timer);
        ele.timer=setInterval(function(){
                var speed=(pos-ele.offsetLeft)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);        
                if(ele.offsetLeft==pos){
                        clearInterval(ele.timer);
                        if(ele.offsetLeft==(-4000)){
                                ele.style.left=0;
                                index=0;
                        }
                        zou();
                }else{
                        ele.style.left=ele.offsetLeft+speed+"px";
                }        
        },30)
}

var _left=$("left");
var _right=$("right");

_left.onclick=function(){
        
        clearTimeout(time);        
        clearInterval(_ul.timer);
        
        index--;
        if(index<0){
                index=7;
                _ul.style.left="-4000px";
        }        
        move(_ul,index*(-500));
}
_right.onclick=function(){
        
        clearTimeout(time);        
        clearInterval(_ul.timer);
        
        index++;        
        if(index>8){
                index=0;
                _ul.style.left=0;
        }
        move(_ul,index*(-500));
}




var _span=$("area").getElementsByTagName("span");

for(var  i=0;i<_span.length;i++){
        _span.index=i;
        _span.onmouseenter=function(){
                //console.log(this.index)
                clearTimeout(time);        
                clearInterval(_ul.timer);
                index=this.index;
                move(_ul,index*(-500));
        }

}

}

纯JS写的一个轮播图

最近学习了一下JavaScript,按照其他代码的思路,我写了一个JS的轮播图。代码如下: *{ padding:0px; margin: 0px; } ...
  • Hallin_Me
  • Hallin_Me
  • 2016年04月20日 15:17
  • 7154

JavaScript面向对象焦点图片轮播banner

2016-04-02     JavaScript学习笔记 实例:焦点轮播图 HTML / CSS部分 无标题文档 *{margin:0; padding:0;} ul...
  • perhapschen
  • perhapschen
  • 2016年04月02日 21:15
  • 2270

js两种形式写淡入弹出轮播图(面向对象和不面向对象)

please enter your title
  • babybk
  • babybk
  • 2016年04月27日 14:18
  • 754

JS原生轮播(JS篇)

接着上一篇,我接下来写关于JS的部分,我会按照我当时的思路一步一步的写,在最后附上全部的代码 一开始我打算写最简单的图片切换功能,怎么写呢?当我们点击左右箭头的时候是用改变left的值,有了思路就很...
  • qq_26626113
  • qq_26626113
  • 2015年07月28日 11:31
  • 5806

原生JS实现轮播图

javascript实现轮播图
  • Genius_S_
  • Genius_S_
  • 2015年08月06日 11:22
  • 930

原生JS实现图片轮播与淡入

最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js。然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长,希望自己在...
  • zerlinda_c
  • zerlinda_c
  • 2015年12月14日 19:31
  • 4973

js特效之腾讯视频的图片轮播

今天搞了一天的javascript,准备做一个特效图片轮播,现在晚上十二点,中午十二点我开始搞的,到了现在还没有搞好还差一个鼠标移进移出的暂定和播放,其实这是一个很简单的特效,就是从刚开始的css的布...
  • woshinannan741
  • woshinannan741
  • 2015年05月05日 17:45
  • 2193

js-动态生成小圆点(根据轮播图图片张数动态生成小圆点)

动态生成小圆点(根据轮播图图片张数动态生成小圆点) Document body,ul{ padding: 0; ...
  • u013217071
  • u013217071
  • 2016年11月23日 21:39
  • 3245

js面向对象---无缝轮播图(附面向过程代码)

轮播图 *{ padding: 0; marg...
  • sweetllh
  • sweetllh
  • 2017年06月29日 19:27
  • 171

js原生写图片轮播和切换

网上有很多轮播图的写法,有一些我觉得写的太过繁琐可读性差。所以我自己写了两个js块。第一个是轮播图写法,第二个是通过点击左右箭头切换图片。这里主要是展示js代码,省略了样式。 1.js原生写轮播图...
  • qq_31915745
  • qq_31915745
  • 2017年05月12日 16:38
  • 1626
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用js写的轮播图
举报原因:
原因补充:

(最多只允许输入30个字)