生活随笔
收集整理的這篇文章主要介紹了
基于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 () { var n = 0;function autoShowNext() { n += 1; 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").hover(function () { clearInterval(id); $(".btn").fadeIn(); }, function () { id = setInterval(autoShowNext, 1000); $(".btn").hide(); });$("ul").on("mouseenter", "li", function () {$(this).addClass("activate").siblings().removeClass("activate");var $index = $(this).index();n = $index; $(".box div:lt(3)").eq($index).show().siblings(".pic").hide();$(".btn").attr("index", $index); });$(".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实现轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
