Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve simple carousel effect based on jquery". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to achieve simple carousel effect based on jquery" can help you solve the problem.

First, the effect.

code on

html

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代码

$(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); });关于"基于jquery怎么实现简单轮播图效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.