html图片快速轮播特效代码,轻松实现javascript图片轮播特效

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

还是先来看一看效果图：

具体代码：

一、HTML代码分析

• 
• 
• 
• 
• 

• A版是一款手机DOTA应用，它涵盖了
• A版是一款手机应用，它涵盖了
• A版是一款手机应用，它涵盖了
• A版是一款手机应用，它涵盖了
• A版是一款手机应用，它涵盖了

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

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

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

$(function(){

var nowImage = 0;

/* 为定时动画服务 */

$(".dota #content li").first().clone().appendTo($(".dota #content"));

var timer = setInterval(autoAnimate, 1500);

$(".dota").mouseenter(function(){

clearInterval(timer);

}).mouseleave(function(){

timer = setInterval(autoAnimate, 1500);

});;

$(".dota #indicator li").mouseenter(function(){

$(this).addClass("current").siblings().removeClass("current");

nowImage = $(this).index();

/*stop() 可以立刻清楚以前的动画，防止动画叠加*/

$(".dota #content").stop().animate({"top": -230 * nowImage}, 1000);

});

function autoAnimate(){

if(nowImage == 4){

nowImage = 0;

$(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");

$(".dota #content").stop().animate({"top":-230 * 5}, 1000,function(){

$(".dota #content").css("top",0);

});

}

else{

nowImage++;

$(".dota #content").stop().animate({"top": -230 * nowImage}, 1000);

$(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");

}

}

});

以上就是轻松实现javascript图片轮播特效的详细代码，希望对大家的学习有所帮助。