想问下谁有轮播图的代码

Python初学

想问下谁有轮播图的代码，

鹰搏空

html:

1. <div id="box">
   
2.                 <ul>
   
3.                         <li class="color1 active"></li>
   
4.                         <li class="color2"></li>
   
5.                         <li class="color3"></li>
   
6.                         <li class="color4"></li>
   
7.                 </ul>
   
8.         </div>

复制代码

css:

1. *{
   
2.                         padding:0;
   
3.                         margin:0;
   
4.                 }
   
5.                 #box{
   
6.                         width: 800px;
   
7.                         height: 400px;
   
8.                         margin: 100px auto;
   
9.                 }
   
10.                 ul,li{
    
11.                         width: 100%;
    
12.                         height: 100%;
    
13.                 }
    
14.                 li{
    
15.                         list-style: none;
    
16.                         display: none;
    
17.                 }
    
18.                 .color1{
    
19.                         background: #F00;
    
20.                 }
    
21.                 .color2{
    
22.                         background: #FF0;
    
23.                 }
    
24.                 .color3{
    
25.                         background: #0F0;
    
26.                 }
    
27. 
    
28.                 .color4{
    
29.                         background: #DDD;
    
30.                 }
    
31.                 #box li.active{
    
32.                         display: block;
    
33.                 }

复制代码

js:

1. <script type="text/javascript">
   
2.                 var $li = $("#box ul li");
   
3.                 var timer = null;
   
4.                
   
5.                 console.log($li);
   
6.                 function autoPlay(){
   
7.                         var index_ = 0;
   
8.                         timer = setInterval(function(){
   
9.                                 $li.eq(index_).addClass('active').siblings('li').removeClass('active');
   
10. 
    
11.                                 index_ ++;
    
12. 
    
13.                                 if (index_ >= $li.length) {
    
14.                                         index_ = 0;
    
15.                                 }
    
16.                                 console.log(index_);
    
17.                         },2000);
    
18.                 }
    
19.                 autoPlay();
    
20.                
    
21.         </script>

复制代码

这个只是最简单的一种方法，你可以参考一下，不懂的欢迎提问

Python初学

多谢啊。<script type="text/javascript">
function autoScroll () {
        var oRoll = document.getElementById('roll');
        var oUl = oRoll.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var timer = null;
        var iSpeed = 2;

        oUl.innerHTML += oUl.innerHTML;
        oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';

        timer = setInterval(init,35);

        oUl.onmouseover = function () {
                clearInterval(timer);
        };

        oUl.onmouseout = function () {
                timer = setInterval(init,35);
        };

        function init () {
                oUl.style.left = oUl.offsetLeft - iSpeed + 'px';
                if (oUl.offsetLeft < -oUl.offsetWidth/2) {
                        oUl.style.left = 0;
                }
        }
}       
autoScroll();
</script>

这一串是啥意思，我在百度上搜是说 上下滚动？

肖采

鹰搏空 发表于 2016-7-13 22:50
html:

css:

没明白您的那个$函数是什么意思

鹰搏空

肖采 发表于 2016-7-17 11:58
没明白您的那个$函数是什么意思

$()是jQuery

鹰搏空

Python初学 发表于 2016-7-14 16:24
多谢啊。
function autoScroll () {
        var oRoll = document.getElementById('roll');

这一串应该是做无缝滚动的吧，是左右滚动

肖采

各位楼上的鱼友  谢谢

肖采

鹰搏空 发表于 2016-7-18 15:47
$()是jQuery

谢谢