m0_58201107 2021-10-06 18:32 采纳率: 80%
浏览 50
已结题

js图片轮番自动切换…..

图片轮番自动切换，鼠标悬停方块那里停住，失去焦点又恢复自动切换，点一下可以切换到指定图片

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-10-06 19:43
    关注

    大概写了个，有帮助麻烦点个采纳【本回答右上角】，谢谢~~

    
<!doctype html>
<meta charset="utf-8" />
<style>
    body {
        background: #333
    }

    .dots a {
        width: 45px;
        height: 45px;
        background: #666;
        display: block;
        margin-bottom: 5px;
        text-decoration: none;
        margin-left: 15px
    }

    .dots a.focus {
        background: #fc3
    }

    .slider div {
        background: #000;
        color: #fff;
        text-align: center;
        line-height: 30px
    }

    .slider img {
        width: 430px;
        height: 470px;
        display: block;
        border: 0
    }
</style>
<table align="center">
    <tr>
        <td class="slider">
            <div></div>
            <img />
            <div></div>
        </td>
        <td class="dots" valign="top">
            <a href="https://t7.baidu.com/it/u=2385494716,931161584&fm=193&f=GIF" title="图片一"></a>
            <a href="https://t7.baidu.com/it/u=2556336625,2995391728&fm=193&f=GIF" title="图片二"></a>
            <a href="https://t7.baidu.com/it/u=3541892791,1735760555&fm=193&f=GIF" title="图片三"></a>
            <a href="https://t7.baidu.com/it/u=1282096981,141440035&fm=193&f=GIF" title="图片四"></a>
        </td>
    </tr>
</table>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    var timer, slider = $('.slider'), divs = slider.find('div'), img = slider.find('img'), cur = 0;
    function startTimer() {
        console.log('startTimer')
        timer = setInterval(function () {
            cur++;
            if (cur >= as.length) cur = 0;
     
            as.eq(cur).trigger('click')


        }, 4000);//4秒切换一次，其他时间改这里
    }
    var as = $('.dots a').mouseenter(function () {
        clearInterval(timer)
        console.log('clearInterval')}).mouseleave(startTimer).click(function () {
        img.attr('src', this.href);
        var el = $(this);
        el.siblings().removeClass('focus');
        cur = el.addClass('focus').index();
        divs.eq(0).html(cur + 1 + '/' + as.length);
        divs.eq(1).html(el.attr('title'));
        return false;
    });
    as.eq(cur).trigger('click');
    startTimer();
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月15日
  • 已采纳回答 10月7日
  • 创建了问题 10月6日

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。