基于jquery實現(xiàn)簡單輪播圖效果

更新時間：2022年04月14日 10:04:44 作者：coder_wb

這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文使用jquery實現(xiàn)輪播圖效果，供大家參考，具體內(nèi)容如下

首先上效果

上代碼

html

<div id="main">
? ? <div class="pic">
? ? ? <ul>
? ? ? ? <li style="background: url(img/bg1.jpg);">
? ? ? ? ? <img class="img1" src="img/text1.png" />
? ? ? ? ? <img class="img2" src="img/con1.png" />
? ? ? ? </li>
? ? ? ? <li style="background: url(img/bg2.jpg);">
? ? ? ? ? <img class="img1" src="img/text2.png" />
? ? ? ? ? <img class="img2" src="img/con2.png" />
? ? ? ? </li>
? ? ? ? <li style="background: url(img/bg3.jpg);">
? ? ? ? ? <img class="img1" src="img/text3.png" />
? ? ? ? ? <img class="img2" src="img/con3.png" />
? ? ? ? </li>
? ? ? ? <li style="background: url(img/bg4.jpg);">
? ? ? ? ? <img class="img1" src="img/text4.png" />
? ? ? ? ? <img class="img2" src="img/con4.png" />
? ? ? ? </li>
? ? ? ? <li style="background: url(img/bg5.jpg);">
? ? ? ? ? <img class="img1" src="img/text5.png" />
? ? ? ? ? <img class="img2" src="img/con5.png" />
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? ? <div class="nav">
? ? ? <ul>
? ? ? ? <li class="select"></li>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? ? </ul>
? ? </div>
? </div>
<div style="width: 100px; height: 100px; background: red; display: none;"></div>

css代碼

<style type="text/css">
? ? * {
? ? ? margin: 0;
? ? ? padding: 0;
? ? }
? ? ul li {
? ? ? list-style: none;
? ? }
? ? #main {
? ? ? width: 760px;
? ? ? height: 300px;
? ? ? position: relative;
? ? ? margin: 50px auto;
? ? }
? ? #main .pic {
? ? ? width: 760px;
? ? ? height: 300px;

? ? ? overflow: hidden;
? ? }
? ? #main .pic ul li {
? ? ? width: 760px;
? ? ? height: 300px;
? ? ? position: relative;
? ? }
? ? #main .pic ul li .img1 {
? ? ? position: absolute;
? ? ? top: 0;
? ? ? left: -760px;
? ? }
? ? #main .pic ul li .img2 {
? ? ? position: absolute;
? ? ? top: 0;
? ? ? left: -20px;
? ? ? display: none;
? ? }
? ? #main .nav {
? ? ? position: absolute;
? ? ? right: 20px;
? ? ? bottom: 20px;
? ? }
? ? #main .nav ul li {
? ? ? width: 10px;
? ? ? height: 10px;
? ? ? border: 1px solid #fff;
? ? ? float: left;
? ? ? margin-left: 5px;
? ? }
? ? #main .nav ul li.select {
? ? ? background: #fff;
? ? }

js代碼

<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
? <script type="text/javascript">
? ? $(function () {
? ? ? $(".pic li")
? ? ? ? .eq(0)
? ? ? ? .find(".img1")
? ? ? ? .stop()
? ? ? ? .animate({ left: 0 }, 800)
? ? ? ? .next()
? ? ? ? .stop()
? ? ? ? .show()
? ? ? ? .animate({ left: 0 }, 800);
? ? ? var i = 0;
? ? ? setInterval(function () {
? ? ? ? i++;
? ? ? ? if (i == $(".pic li").length) {
? ? ? ? ? i = 0;
? ? ? ? }
? ? ? ? $(".pic li")
? ? ? ? ? .eq(i)
? ? ? ? ? .fadeIn()
? ? ? ? ? .find(".img1")
? ? ? ? ? .stop()
? ? ? ? ? .animate({ left: 0 }, 800)
? ? ? ? ? .next()
? ? ? ? ? .stop()
? ? ? ? ? .show()
? ? ? ? ? .animate({ left: 0 }, 800)
? ? ? ? ? .end()
? ? ? ? ? .end()
? ? ? ? ? .siblings()
? ? ? ? ? .fadeOut()
? ? ? ? ? .find(".img1")
? ? ? ? ? .css({ left: "-760px" })
? ? ? ? ? .next()
? ? ? ? ? .hide()
? ? ? ? ? .css({ left: "-20px" });
? ? ? ? $(".nav li")
? ? ? ? ? .eq(i)
? ? ? ? ? .addClass("select")
? ? ? ? ? .siblings()
? ? ? ? ? .removeClass("select");
? ? ? }, 2000);
? ? });
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: