jqueryでslideshow_jqueryを実装する簡単な方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryでslideshow_jqueryを実装する簡単な方法

May 16, 2016 pm 03:47 PM

jquery スライドショー

この記事の例では、jquery を使用してスライドショーを簡単に実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;幻灯片&lt;/title&gt;
&lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
.slide{position: relative; overflow: hidden;}
.slide img{max-width: 100%; position: absolute; left: 0; top: 0;}
.slide img:first-child{position: relative; visibility: visible;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="slide"&gt;
 &lt;img src="images/172233f3cyzidsc8rl8irz.jpg" /&gt;
 &lt;img src="images/172231vxzvzz2xvk92d5m0.jpg" /&gt;
 &lt;img src="images/172228jybldywbdwdflfzm.jpg" /&gt;
 &lt;img src="images/172223i8otbbsot8b232o5.jpg" /&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
var size = $('.slide img').size();
var _index = size;
var timer = null;
 $('.slide').append($('.slide img:eq(0)').clone());
  timer = setInterval(function(){
    $('.slide img').eq(_index).fadeOut(800);
    _index == 1&#63;_index=size:_index--;
    $('.slide img').eq(_index).fadeIn(800);
  },4000);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

この記事が皆さんの jquery プログラミング設計に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。