java添加轮播图,[Java教程]js写的简单轮播图

待我称王封你为后i 2023-01-16 06:25 132阅读 0赞

\[Java教程\]js写的简单轮播图

2015-07-06 18:00:02

这个轮播图代码是从网上找来的，专门找了个写法简单的，只是作为一个小练习，大概原理如下：

1.首先是图片切换

2.自动播放

3.调用自动播放

4.移动到容器上边停止播放，离开自动播放

5.移动到导航上停止播放，离开自动播放

6.移动到导航上，切换相对应的导航

然后贴代码：

Document

\*\{margin:0;

padding:0;

list-style:none;\}

.wrap\{height:170px;

width:490px;

margin:60px auto;

overflow: hidden;

position: relative;

margin:100px auto;\}

.wrap ul\{position:absolute;\}

.wrap ul li\{height:170px;\}

.wrap ol\{position:absolute;

right:5px;

bottom:10px;\}

.wrap ol li\{height:20px; width: 20px;

background:\#ccc;

border:solid 1px \#666;

margin-left:5px;

color:\#000;

float:left;

line-height:center;

text-align:center;

cursor:pointer;\}

.wrap ol .on\{background:\#E97305;

color:\#fff;\}

window.οnlοad=function()\{

var wrap=document.getElementById('wrap'),

pic=document.getElementById('pic').getElementsByTagName("li"),

list=document.getElementById('list').getElementsByTagName('li'),

index=0,

timer=null;

// 定义并调用自动播放函数

timer = setInterval(autoPlay, 2000);

// 鼠标划过整个容器时停止自动播放

wrap.onmouseover = function () \{

clearInterval(timer);

// 鼠标离开整个容器时继续播放至下一张

wrap.onmouseout = function () \{

timer = setInterval(autoPlay, 2000);

// 遍历所有数字导航实现划过切换至对应的图片

for (var i = 0; i < list.length; i++) \{

list\[i\].onmouseover = function () \{

clearInterval(timer);

index = this.innerText - 1;

changePic(index);

\};

function autoPlay () \{

if (++index >= pic.length) index = 0;

changePic(index);

// 定义图片切换函数

function changePic (curIndex) \{

for (var i = 0; i < pic.length; ++i) \{

pic\[i\].style.display = "none";

list\[i\].className = "";

pic\[curIndex\].style.display = "block";

list\[curIndex\].className = "on";

\};

*  ![f59ecbf818e0fdd1f7accd28be3136f8.png][]
 *  ![745d894fa5c2b6f6fc0f87cfa6674449.png][]
 *  ![9924ad8303a3e3e327cdcb7c872893b2.png][]
 *  ![f1c28269c50a23059a8e1e896185b1e3.png][]
 *  ![8464ab37100bf0cffcf02682b16ee3fa.png][]

1.  1
2.  2
3.  3
4.  4
5.  5

只是个人的一个小练习，希望诸位大神看了，不要黑我...

本文网址：http://www.shaoqun.com/a/122905.html

\*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

[f59ecbf818e0fdd1f7accd28be3136f8.png]: /images/20221022/e2ff7be21ced46049d93740e8353022c.png
[745d894fa5c2b6f6fc0f87cfa6674449.png]: /images/20221022/e554f02806fc4de98180bf6e9bc7f586.png
[9924ad8303a3e3e327cdcb7c872893b2.png]: /images/20221022/53c75783897841e78fe2ea939c7e8640.png
[f1c28269c50a23059a8e1e896185b1e3.png]: /images/20221022/89fbd51bfa6044cbac877dba5d228ff6.png
[8464ab37100bf0cffcf02682b16ee3fa.png]: /images/20221022/d47d0d5942e6440ea276c010d3c38376.png