當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

基于css和jQuery实现轮播图

發布時間：2025/3/17 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了基于css和jQuery实现轮播图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這里我用的<div>元素代替的圖片，具體應用時，改為<img>元素就好了。效果圖：

代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script><script>$(function () { //$(document).ready(function() {...})的簡寫。頁面加載完了才執行腳本。//自動輪播，每隔1秒換一張圖片：輪流去除hide, 增加hide;var n = 0;function autoShowNext() { //展示下一張：n += 1; //每一次執行autoShow() ,i的值加1, 到3時，歸零注意：這里的i+=1 應該放在第一行，否則第一張切換要2秒if (n == 3) {n = 0;}$(".pic").eq(n).show().siblings(".pic").hide();$("li").eq(n).addClass("activate").siblings().removeClass("activate"); //處理按鈕效果}var p = 3;function autoShowPre() { //展示上一張p -= 1;if (p == -1) {p = 3;}$(".pic").eq(p).show().siblings(".pic").hide();$("li").eq(p).addClass("activate").siblings().removeClass("activate"); //處理按鈕效果}var id = setInterval(autoShowNext, 1000); //默認輪播// $(".box").mouseenter(function(){ //鼠標進入暫停輪播 // clearInterval(id); // }); // $(".box").mouseleave(function(){ //鼠標離開開始輪播 // id = setInterval(autoShowNext, 1000); // });//上面的兩個事件綁定可以通過下面hover方法搞定；$(".box").hover(function () { //函數1：鼠標懸浮clearInterval(id); //停止定時器$(".btn").fadeIn(); //顯示手動按鈕}, function () { //函數2：鼠標離開id = setInterval(autoShowNext, 1000); //開始定時器$(".btn").hide(); //隱藏手動按鈕});//手動輪播：懸浮數字圓圈，當前元素增加activate, 兄弟元素去除activate；// 獲取this索引，切換對應索引div,并去除hide,其兄弟元素增加hide$("ul").on("mouseenter", "li", function () {$(this).addClass("activate").siblings().removeClass("activate");var $index = $(this).index();n = $index; //給n重新賦值，保證手動點擊后，自動輪播能續上。$(".box div:lt(3)").eq($index).show().siblings(".pic").hide();$(".btn").attr("index", $index); //給btn自定義屬性賦值為當前索引});//前進后退按鈕，相當于手動定時播放，因此直接用輪播函數$(".btn").click(function () {if ($(this).attr("id") == "btn1") {autoShowPre();} else {autoShowNext();}});});</script><style>* {margin: 0;padding: 0;}.box {margin: auto;margin-top: 100px;width: 600px;height: 400px;border: 1px solid red;position: relative;}.pic {width: 600px;height: 400px;position: absolute;left: 0;top: 0;}#a {background-color: yellow;}#b {background-color: green;}#c {background-color: blue;}.btn {background-color: lightgrey;color: white;opacity: .5;font-size: 30px;width: 30px;height: 60px;text-align: center;line-height: 60px;position: absolute;top: 50%;margin-top: -30px;display: none;}#btn1 {left: 0;}#btn2 {right: 0;}ul {position: absolute;left: 50%;margin-left: -45px;bottom: 5px;}ul li {list-style: none;display: inline-block;width: 30px;height: 30px;border-radius: 50%;background-color: lightgray;opacity: .5;text-align: center;line-height: 30px;}.hide {display: none;}.activate {background-color: darkgray;color: white;}</style> </head> <body> <div class="box"><div id="a" class="pic"></div><div id="b" class="pic hide"></div><div id="c" class="pic hide"></div><div class="btn" id="btn1"><</div><div class="btn" id="btn2">></div><ul><li class="activate">1</li><li>2</li><li>3</li></ul> </div> </body> </html>

總結

以上是生活随笔為你收集整理的基于css和jQuery实现轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

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