php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧

本文实例介绍了javascript图片轮播特效的详细代码以及实现思路，分享给大家供大家参考，具体内容如下

还是先来看一看效果图：

具体代码：

一、HTML代码分析

此效果的层次结构比较清楚：

1. class为data的p是最外层的容器，可以用来控制整个效果图显示的位置。

2. id为content的ul用来存放左侧滚动的图片。

3. id为indicator的ul用来显示右侧的指示栏。

二、CSS代码

*{margin: 0; padding: 0;}

img{

border:0;

}

.dota{

width:570px;

height: 230px;

margin:100px auto;

position: relative;

overflow: hidden;

}

.dota #content{

float: left;

list-style: none;

position: absolute;

width:380px;

height:230px;

}

.dota #content img{

width:380px;

height:230px;

}

.dota #indicator{

float: right;

list-style: none;

width:180px;

height:220px;

padding: 5px;

background-color: #100F13;

}

.dota #indicator li{

width: 180px;

height: 44px;

background: url(images/anniu.png) 0 -44px;

}

.dota #indicator li.current{

background-position: 0 0;

}

.dota #indicator li a{

display: block;

width: 160px;

height: 34px;

padding: 5px 0 5px 25px;

}

.dota #indicator li a:link , .dota #indicator li a:visited{

text-decoration: none;

color: #686477;

font: 12px/145% "宋体";

}

这里，我对indicator中li的代码进行说明：

.dota #indicator li中的css代码就是设置右侧指示栏中的每一项，注意到，这里使用了background属性，也就是说li的背景是一张图片。准备好的图片如下：

这张准备好的图片大小为 180 * 88， 而.dota #indicator li中的background属性设置的position属性大小为 0 -44px, 即截取的图片的下半部分；所以indicator中所有的背景图片显示的是下半部分比较暗的部分； 而.dota #indicator li.current 的position属性大小为 0 0，所以默认情况下indicator的第一个显示高亮，其余的显示为暗黑的那部分。然后通过JQuery代码控制current属性作用在 "谁" 身上来切换选中状态。

三、JQuery代码