當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

超级简单的jquery轮播图demo

發(fā)布時間：2023/11/27 生活经验 31 豆豆

生活随笔收集整理的這篇文章主要介紹了超级简单的jquery轮播图demo 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>輪播圖demo</title><script type="text/javascript" src="js/jquery-3.2.1.slim.js" ></script><link rel="stylesheet" href="css/demo.css" /><script type="text/javascript">var t = n = i = 0, count;$(function(){count=$(".scroll_pic a").length;//求出圖片數量
                $(".scroll_pic a:not(:first)").hide();//隱藏第一張以外的所有圖片
                $("#scroll_button li").click(function(){i = n = $(this).index();//index() 方法返回指定元素相對于其他指定元素的 index 位置。
                    $(".scroll_pic a").eq(i).show().siblings().hide();//siblings()選擇除自身以外的所有同胞元素
                    $(this).addClass("scroll_in").siblings().removeClass("scroll_in");//鼠標經過圖片區(qū)域停止setInterval()調用函數，移開恢復
                });t = setInterval("picShowAuto()", 3500);//setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉
                $(".scroll").hover(function(){clearInterval(t)}, function(){t = setInterval("picShowAuto()", 3500);});});function picShowAuto(){n = n >=(count -1) ?0 : ++n;$("#scroll_button li").eq(n).trigger("click");//trigger() 方法觸發(fā)被選元素的指定事件類型
            }</script></head><body><div class="scroll"><div class="scroll_pic"><a href="#"><img src="img/pic1.jpg" alt=""/></a><a href="#"><img src="img/pic2.jpg" alt=""/></a><a href="#"><img src="img/pic3.jpg" alt=""/></a><a href="#"><img src="img/pic.jpg" alt=""/></a></div><ul id="scroll_button"><li class="scroll_in"></li><li></li><li></li><li></li></ul></div></body>
</html>

.scroll {width: 720px;height: 410px;margin: 0 auto;margin-top: 100px;overflow: hidden;position: relative;
}.scroll ul {padding: 5px 5px;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);position: absolute;bottom: 10px;left: 50%;background:rgba(455,455,455,0.4);border-radius: 28px;
}.scroll ul li {float: left;margin: 0px 5px;width: 16px;height: 16px;border-radius: 16px;border:1px #73B613 solid;background: #FCBE47;cursor: pointer;}.scroll ul li.scroll_in{background:#FF6600;
}

轉載于:https://www.cnblogs.com/Strom-HYL/p/6904438.html

總結

以上是生活随笔為你收集整理的超级简单的jquery轮播图demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。