js实现轮播代码怎么写？

JavaScript010

js实现轮播代码怎么写？,第1张

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-">

<title>最简单的轮播广告</title>

<style>

body, div, ul, li {

margin:

padding:

}

ul {

list-style-type: none

}

body {

background: #

text-align: center

font: px/px Arial

}

#box {

position: relative

width: px

height: px

background: #fff

border-radius: px

border: px solid #fff

margin: px auto

}

#box .list {

position: relative

width: px

height: px

overflow: hidden

border: px solid #ccc

}

#box .list li {

position: absolute

top:

left:

width: px

height: px

opacity:

transition: opacity .s linear

}

#box .list li.current {

opacity:

}

#box .count {

position: absolute

right:

bottom: px

}

#box .count li {

color: #fff

float: left

width: px

height: px

cursor: pointer

margin-right: px

overflow: hidden

background: #F

opacity: .

border-radius: px

}

#box .count li.current {

color: #fff

opacity: .

font-weight:

background: #f

}

</style>

</head>

<body>

<div id="box">

<ul>

<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>

<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>

<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>

<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>

<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>

</ul>

<ul>

<li></li>

<li class=""></li>

<li class=""></li>

<li class=""></li>

<li class=""></li>

</ul>

</div>

<script>

var box=document.getElementById('box')

var uls=document.getElementsByTagName('ul')

var imgs=uls[].getElementsByTagName('li')

var btn=uls[].getElementsByTagName('li')

var i=index=//中间量，统一声明；

var play=null

console.log(box,uls,imgs,btn)//获取正确

//图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面

function show(a){    //方法定义的是当传入一个下标时，按钮和图片做出对的反应

for(i=i<btn.lengthi++ ){

btn[i].className='' //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。

btn[a].className='current'

}

for(i=i<imgs.lengthi++){ //把图片的效果设置和按钮相同

imgs[i].style.opacity=

imgs[a].style.opacity=

}

}

//切换按钮功能，响应对应图片

for(i=i<btn.lengthi++){

btn[i].index=i//不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住

btn[i].onmouseover=function(){

show(this.index)

clearInterval(play)//这就是最后那句话追加的功能

}

}

//自动轮播方法

function autoPlay(){

play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了

index++

index>=imgs.length&&(index=)//可能有优先级问题，所以用了括号，没时间测试了。

show(index)

},)

}

autoPlay()//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了

//div的鼠标移入移出事件

box.onmouseover=function(){

clearInterval(play)

}

box.onmouseout=function(){

autoPlay()

}

//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。

</script>

</body>

</html>

如下代码可以实现，不过你首先需要引用Jquery，我使用的是jquery-1.7.1.min.js

支持两个div或多个div的淡入淡出切换：

<div id="imgbox">

    <div style="width:100pxheight:100pxbackground-color:red"></div>

    <div style="width:100pxheight:100pxbackground-color:blue"></div>

</div>

<script src="jquery-1.7.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#imgbox div").fadeOut(0).eq(0).fadeIn(0)

    var i = 0

    setInterval(function(){

        if($("#imgbox div").length > (i+1)){

            $("#imgbox div").eq(i).fadeOut(0).next("div").fadeIn(1000)

            i++

        }

        else{

            $("#imgbox div").eq(i).fadeOut(0).siblings("div").eq(0).fadeIn(1000)

            i = 0

        }

    },2000)

})

</script>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0

            padding:0

        }

        .show{

            border:5px solid #c1c1c1

            margin:100px auto

            width:500px

            height: 200px

            overflow: hidden

        }

        .box{

            width:400%

            position: relative

            cursor: pointer

        }

        ul{

            list-style-type: none

        }

        .box ul li{

            float:left

            display: block

        }

    </style>

    <script>

        window.onload=function(){

            function $(id){

                return document.getElementById(id)

            }

            var num=0

            function autoplay(){

                num--

                $("box").style.left=num+"px"

                if(num==-1200){

                    num=0

                }

            }

            var int=setInterval(autoplay,30)

            $("box").onmouseover=function(){

                clearInterval(int)

            }

            $("box").onmouseout=function(){

                int=setInterval(autoplay,30)

            }

        }

    </script>

</head>

<body>

<div class="show">

    <div class="box" id="box">

        <ul>

            <li><img src="image/01.jpg" alt=""/></li>

            <li><img src="image/02.jpg" alt=""/></li>

            <li><img src="image/03.jpg" alt=""/></li>

            <li><img src="image/04.jpg" alt=""/></li>

            <li><img src="image/01.jpg" alt=""/></li>

            <li><img src="image/02.jpg" alt=""/></li>

        </ul>

    </div>

</div>

</body>

</html>