用jquery或js实现三个div自动循环轮播

Posted 2023-05-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery或js实现三个div自动循环轮播相关的知识，希望对你有一定的参考价值。

可以参考下面的daima :

//3个div的统一class = 'div'

var index =0;

//3秒轮播一次

var timer = setInterval(function()

index = (index == 2) ? 0 : index + 1;

//某个div显示，其他的隐藏

$(".div").hide().eq(index).show();

, 3000);

扩展资料：

javascript参考函数

getUTCFullYear() 根据邦际时间来失掉完全的年份

getUTCMonth() 依据国际时间来得到月份(0-11)

getUTCDate() 依据国际时间来失掉日(1-31)

getUTCHours() 依据国际时间来失掉小时(0-23)

getUTCMinutes() 根据邦际光阴来往归分钟(0-59)

getUTCMilliseconds()依据国际时间来返回毫秒(0-999)

参考资料来源：百度百科-javascript

参考资料来源：百度百科-jQuery

参考技术A //3个div的统一class = 'div'
var index =0;
//3秒轮播一次
var timer = setInterval(function()
    index = (index == 2) ? 0 : index + 1;
    //某个div显示，其他的隐藏
    $(".div").hide().eq(index).show();
, 3000);

本回答被提问者和网友采纳参考技术B div自动循环轮播，你可以用setInterval来解决。追问

这个知道的，就是不知道具体怎么写出来

参考技术C 直接百度 js特效自动切换

Jquery图片轮播循环问题，求大神指教，怎么实现循环播放？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#picShow imgwidth: 468px;height: 228px;margin: 0;padding: 0;
#picShowposition: relative;top: 0px;border: none;
#picTitleposition: relative;z-index: 11px;width: 468px;height: 30px;background: rgba(0,0,0,0.7);top: -955px;color: #999;text-indent: 10px;line-height: 30px; font-family: "Microsoft YaHei"
#communityActivitiesleft: 478px;top: 9px;position: absolute;width: 468px;height: 228px;overflow: hidden;

</style>
<script type="text/javascript" src='jquery-1.8.3.js'></script>
</head>

<body>

<section id="communityActivities">
<div id="picShow">
<img src="images/pic.jpg">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
<img src="images/pic4.jpg">
</div>
<div id="picTitle">这是新闻标题啊</div>
</section>

<script type="text/javascript">
function picTurn(elementId)
var $top = parseInt($(elementId).css('top'));
if ($top<-924)
$top=231;
var $pic=$(elementId).find('img:first').remove();
$(elementId).find('img:last').append($pic);
;
$top -=231;
$top +='px';

$(elementId).animate(top:$top,"slow");

$(document).ready(function()
setInterval("picTurn('#picShow')", 2000);
);

</script>
</body>
</html>
代码在这里了，下个jquery和几张图片就可以用，求大神帮我测一下，主要是想当循环播放到最后一张时又从第一张开始播放，过度和其他一样，就是类似第二张到第三张那样自然，而不是突然间刷的从第五张到第一张，一直测不好，求大神测好后告诉我，参考效果类似登陆后百度首页的新闻轮播，注意循环，最后一张到第一张的动画转换也是和其他一样的

//js
var isround = "";
var i=0;
$(function()
    isround = setTimeout("change()",3000);
    $("div[name=ban] div img:eq(0)").show().siblings().hide();
    $(".num li:eq(0)").addClass("current").siblings().removeClass("current");
    $(".num li").click(function()
        i=$(".num li").index(this);
        $(this).addClass("current").siblings().removeClass("current");
        $("div[name=ban] div img").eq($(".num li").index(this)).show().siblings().hide();
        isround = setTimeout("change()",3000);
    ).hover(function()
        clearTimeout(isround)
    ,function()
       isround = setTimeout("change()",3000);
    )
)
function change()
    if(i==$(".num li").length) i=0;
    $(".num li").eq(i).addClass("current").siblings().removeClass("current");
    $("div[name=ban] div img").eq(i).show().siblings().hide();
    i++;
    setTimeout("change()",3000);

//html
<div name="ban">
    <div>
        
        <img src="/resources/images/f1.jpg" width="369px" height="114px" />
        <img src="/resources/images/f2.jpg" width="369px" height="114px" />
        <img src="/resources/images/f1.jpg" width="369px" height="114px" />
        <img src="/resources/images/f2.jpg" width="369px" height="114px" />
        <img src="/resources/images/f1.jpg" width="369px" height="114px" />
    </div>
    <div class="numbox">
        
        <ul class="num">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

不懂再问，这是我自己写的一个轮换，里面包括了点击事件，原理是控制图片的显示隐藏，

别的有控制高度等等之类的。

追问

大哥，我不是要代码，要的话网上一大堆，主要是为了学习啊，上面是我自己写的，就是不知道怎么解决才来请教的

追答

setTimeout 用这个控制试试

参考技术A 循环播放的话大多采用在滚动到最后一张时，在最后一张图片后添加一整组图片，同时移除前面的所有图片。追问

能针对我的例子帮我修改一下吗？或者给个详细的思路也行，谢谢啦

参考技术B