吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1511|回复: 9
收起左侧

[已解决] 已解决

[复制链接]
Samding 发表于 2019-12-5 10:17
本帖最后由 Samding 于 2019-12-5 12:10 编辑

为什么鼠标移动到数字上的时候广告跟不上,求大神解决
1-5.jpg

1.jpg 2.jpg 3.jpg 4.jpg 5.jpg
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
        *{
                        margin: 0;
                        padding: 0;
                }
                body{
                        font-size: 12px;
                }
                #div1{
                        border: 1px solid silver;
                        width: 426px;
                        margin:0 auto;
                }
                #div1 img{
                        display: block;
                }
        
                .samding{
                        width: 426px;
                        
                }
                #div2{
                        height: 20px;
                        background: silver;
                }
                #div2 ul{
                        list-style: none;
                        display: block;
                }
                #div2 ul li{
                        float: left;
                        width: 18px;
                        height: 18px;
                        background: #9E2E07;
                        margin-left: 10px;
                        margin-top: 1px;
                        color: white;
                        text-align: center;
                }
        
                #div2 ul li a{
                        text-decoration: none;
                        color: white;
                }
                #div2 ul li a:hover { 
                        text-decoration:underline;
                        color: red
                }
                .over{
                        width: 200px !important;
                        background: white !important;
                        color: red !important;
                }
                /*-------------------------------*/
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <div id="div1">
                <img src="images1/1.jpg" id="img1">
            <div id="div2">
                    <ul>
                            <li><a href="javascript:void(0)">1</a></li>
                            <li><a href="javascript:void(0)">2</a></li>
                            <li><a href="javascript:void(0)">3</a></li>
                            <li><a href="javascript:void(0)">4</a></li>
                            <li><a href="javascript:void(0)">5</a></li>
                    </ul>
            </div>
    </div>
        <script>
                window.onload=init
            var lis=document.getElementsByTagName('li')
            function init(){
                    for (var i = 0; i < lis.length; i++) {
                                        (function(i){
                                                lis[i].onmouseover=function(){
                                                        click(i)
                                                }
                                        })(i)
                            }
                    update()
            }

            var img1=document.getElementById("img1")
                var arr_img=['images1/1.jpg','images1/2.jpg','images1/3.jpg','images1/4.jpg','images1/5.jpg']
                //--------------------------
                var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
                var index=0
                var oldindex=-1
                
                //-----------------------------
            function update(){
                    img1.src=arr_img[index]
                    //-----------------------
                        var arr=document.getElementsByTagName('li')
                        arr[index].innerHTML=arr_adv[index]
                        arr[index].className='over'
                        if(oldindex!=-1){
                                arr[oldindex].innerHTML=oldindex+1
                                arr[oldindex].className='licopy'
                        }
                        oldindex=index
                        //-----------------------
                    index++
                    if(index==arr_img.length){
                            index=0
                    }
                    setTimeout('update()',2000)
            }

            function click(i){
                    img1.src=arr_img[i]
            }
                </script>
</body>
</html>

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

头像被屏蔽
iYolo丶Yudi 发表于 2019-12-5 10:27
提示: 作者被禁止或删除 内容自动屏蔽
侧面不粗 发表于 2019-12-5 10:29
凌长天 发表于 2019-12-5 10:31
天灾丶人灬 发表于 2019-12-5 10:35
你这种轮播图第一次见,可能是因为定时器,有时间再仔细看
godxkey 发表于 2019-12-5 10:45
楼主,您的这个js需要重构:::
[JavaScript] 纯文本查看 复制代码
function update(){
            img1.src=arr_img[index]
            //-----------------------
            var arr=document.getElementsByTagName('li')
            arr[index].innerHTML=arr_adv[index]
            arr[index].className='over'
            if(oldindex!=-1){
                arr[oldindex].innerHTML=oldindex+1
                arr[oldindex].className='licopy'
            }
            oldindex=index
            //-----------------------
            index++
            if(index==arr_img.length){
                index=0
            }
            setTimeout('update()',2000)
        }


我放在这个里面看了下,您看,这个是不是死循环在这个单次setTimeout里面了:
[JavaScript] 纯文本查看 复制代码
  function init(){
            for (var i = 0; i < lis.length; i++) {
                    (function(i){
                        lis[i].onmouseover=function(){
                            click(i);
                            update();
                        }
                    })(i)
                }
        }
wysheep 发表于 2019-12-5 10:48
你的  javasript:vido(0) 是 点击 没有任何效果的,当用户链接时,void(0)计算为0,用户点击不会发生任何效果
cglmj 发表于 2019-12-5 11:11
本帖最后由 cglmj 于 2019-12-5 11:13 编辑

[JavaScript] 纯文本查看 复制代码
[mw_shl_code=html,true]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
    *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 12px;
        }
        #div1{
            border: 1px solid silver;
            width: 426px;
            margin:0 auto;
        }
        #div1 img{
            display: block;
        }
     
        .samding{
            width: 426px;
             
        }
        #div2{
            height: 20px;
            background: silver;
        }
        #div2 ul{
            list-style: none;
            display: block;
        }
        #div2 ul li{
            float: left;
            width: 18px;
            height: 18px;
            background: #9E2E07;
            margin-left: 10px;
            margin-top: 1px;
            color: white;
            text-align: center;
        }
     
        #div2 ul li a{
            text-decoration: none;
            color: white;
        }
        #div2 ul li a:hover { 
            text-decoration:underline;
            color: red
        }
        .over{
            width: 200px !important;
            background: white !important;
            color: red !important;
        }
        /*-------------------------------*/
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <div id="div1">
        <img src="images1/1.jpg" id="img1">
        <div id="div2">
            <ul>
                <li><a href="javascript:void(0)">1</a></li>
                <li><a href="javascript:void(0)">2</a></li>
                <li><a href="javascript:void(0)">3</a></li>
                <li><a href="javascript:void(0)">4</a></li>
                <li><a href="javascript:void(0)">5</a></li>
            </ul>
        </div>
    </div>
    <script>
        window.onload=init
        var lis=document.getElementsByTagName('li')
        function init(){
            for (var i = 0; i < lis.length; i++) {
                    (function(i){
                        lis[i].onmouseover=function(){
                            click(i)
                        }
                        lis[i].onmouseout=function(){
                            myTime = setTimeout('update()',2000);
                        }
                    })(i)
                }
            update()
        }

        var img1=document.getElementById("img1")
        var arr_img=['images1/1.jpg','images1/2.jpg','images1/3.jpg','images1/4.jpg','images1/5.jpg']
        //--------------------------
        var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
        var index=0
        var oldindex=-1
        var myTime;
        //-----------------------------
        function update(){
            img1.src=arr_img[index]
            //-----------------------
            var arr=document.getElementsByTagName('li')
            arr[index].innerHTML=arr_adv[index]
            arr[index].className='over'
            if(oldindex!=-1){
                arr[oldindex].innerHTML=oldindex+1
                arr[oldindex].className='licopy'
            }
            oldindex=index
            //-----------------------
            index++
            if(index==arr_img.length){
                index=0
            }
            myTime = setTimeout('update()',2000)
        }

        function click(i){
            img1.src=arr_img[i];
                        window.clearTimeout(myTime);
                        var arr=document.getElementsByTagName('li');
                        for(var j = 0; j < lis.length; j++){
                                var temp = arr[j];
                                if(temp.classList.contains("over")){
                                        arr[j].innerHTML=j+1;
                                        arr[j].className='licopy';
                                }
                        }
                        arr[i].innerHTML=arr_adv[i];
                        arr[i].className='over';
        }
        </script>
</body>
</html>
[/mw_shl_code]
wysheep 发表于 2019-12-5 11:14
改写的一点
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 12px;
        }
        #div1{
            border: 1px solid silver;
            width: 426px;
            margin:0 auto;
        }
        #div1 img{
            display: block;
        }

        .samding{
            width: 426px;

        }
        #div2{
            height: 20px;
            background: silver;
        }
        #div2 ul{
            list-style: none;
            display: block;
        }
        #div2 ul li{
            float: left;
            width: 18px;
            height: 18px;
            background: #9E2E07;
            margin-left: 10px;
            margin-top: 1px;
            color: white;
            text-align: center;
        }

        #div2 ul li a{
            text-decoration: none;
            color: white;
        }
        #div2 ul li a:hover {
            text-decoration:underline;
            color: red
        }
        .over{
            width: 200px !important;
            background: white !important;
            color: red !important;
        }
        /*-------------------------------*/
    </style>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>
<body>
<div id="div1">
    <img src="images1/1.jpg" id="img1">
    <div id="div2">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</div>
<script>
    window.onload=init
    var lis=document.getElementsByTagName('li')
    function init(){
        for (var i = 0; i < lis.length; i++) {
            (function(i){
                lis[i].onmouseover=function(){
                    click(i)
                }
            })(i)
        }
        update()
    }

    var img1=document.getElementById("img1")
    var arr_img=['images1/1.jpg','images1/2.jpg','images1/3.jpg','images1/4.jpg','images1/5.jpg']
    //--------------------------
    var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
    var index=0
    var oldindex=-1

    //-----------------------------
    function update(){
        img1.src=arr_img[index]
        //-----------------------
        var arr=document.getElementsByTagName('li')
        arr[index].innerHTML=arr_adv[index]
        arr[index].className='over'
        if(oldindex!=-1){
            arr[oldindex].innerHTML=oldindex+1
            arr[oldindex].className='licopy'
        }
        oldindex=index
        //-----------------------
        index++
        if(index==arr_img.length){
            index=0
        }
        setTimeout('update()',5000)
    }

    function click(i){
        img1.src=arr_img[i]
    }

    function clicks(i) {
        var arr=document.getElementsByTagName('li')
        for(var j=0;j<5;j++){
            if(j == i){
                arr[i].innerHTML=arr_adv[i]
                arr[i].className='over'
                img1.src=arr_img[i]
                index = i
            }else{
                arr[j].className='licopy'
                arr[j].innerHTML= j+1;
            }
        }
        oldindex=index
        index++
        if(index==arr_img.length){
            index=0
        }
    }
</script>
</body>
</html>
雪夜丶辉煌 发表于 2019-12-5 11:32
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
    *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 12px;
        }
        #div1{
            border: 1px solid silver;
            width: 426px;
            margin:0 auto;
        }
        #div1 img{
            display: block;
        }
     
        .samding{
            width: 426px;
             
        }
        #div2{
            height: 20px;
            background: silver;
        }
        #div2 ul{
            list-style: none;
            display: block;
        }
        #div2 ul li{
            float: left;
            width: 18px;
            height: 18px;
            background: #9E2E07;
            margin-left: 10px;
            margin-top: 1px;
            color: white;
            text-align: center;
            transition: all 0.5s;
            cursor: pointer;
        }
     
        #div2 ul li a{
            text-decoration: none;
            color: white;
        }
        #div2 ul li a:hover { 
            text-decoration:underline;
            color: red
        }
        .over{
            width: 200px !important;
            background: white !important;
            color: red !important;
        }
        /*-------------------------------*/
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <div id="div1">
        <img src="https://attach.52pojie.cn/forum/201912/05/101540yno0ppt2nuhronz0.jpg" id="img1">
        <div id="div2">
            <ul>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
                <li><a>4</a></li>
                <li><a>5</a></li>
            </ul>
        </div>
    </div>
    <script>
        var timer
        window.onload=init
        var lis=document.getElementsByTagName('li')
        function init(){
            for (var i = 0; i < lis.length; i++) {
                    (function(i){
                        lis[i].onmouseover=function(){
                          console.log(i)
                          click(i)
                        }
                    })(i)
                }
            update()
        }
 
        var img1=document.getElementById("img1")
        var arr_img=[
          'https://attach.52pojie.cn/forum/201912/05/101526lvovzvolvvzi9p24.jpg',
          'https://attach.52pojie.cn/forum/201912/05/101540yno0ppt2nuhronz0.jpg',
          'https://attach.52pojie.cn/forum/201912/05/101542d5z42h3whwmnccnn.jpg',
          'https://attach.52pojie.cn/forum/201912/05/101544mbii1dqdxqpypqrl.jpg',
          'https://attach.52pojie.cn/forum/201912/05/101547aaabza7rm4vqcvha.jpg'
        ]
        var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
        var index=0
        var oldindex=-1

        function update(){
          console.log('执行更新')
            img1.src = arr_img[index]
            var arr=document.getElementsByTagName('li')
            var old=document.getElementsByClassName('over')
  
            arr[index].innerHTML=arr_adv[index]
            arr[index].className='over'
            if(oldindex!=-1){
                arr[oldindex].innerHTML=oldindex+1
                arr[oldindex].className='licopy'
            }
            oldindex = index
            clearTimeout(timer)
            timer = setTimeout(() => {
              next()
            },5000)
        }

        function next () {
          index ++;
          if (index >= arr_img.length) index = 0
          update()
        }
 
        function click(i){
          console.log(index)
          if (index === i) {
            return;
          }
          index = i
          update()
        }
        </script>
</body>
</html>


我也改了一下

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
Samding + 1 + 1 感谢,免费评分当采纳啦

查看全部评分

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

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-26 22:49

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

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