js轮播图制作讲解（简单的js代码制作轮播图）

代码的格式可能有点乱，需要复制到编辑器上看。

<div class="container">

<div class="content-list">

</div>

<div class="content-body">

<div class="content-right-top">

<div class="slider">

<div class="slider-img">

<a href="#">

<img src="http://img.studyofnet.comimages/ads/1.jpg" alt=""/>

<img src="http://img.studyofnet.comimages/ads/2.jpg" alt=""/>

<img src="http://img.studyofnet.comimages/ads/3.jpg" alt=""/>

<img src="http://img.studyofnet.comimages/ads/4.jpg" alt=""/>

<img src="http://img.studyofnet.comimages/ads/5.jpg" alt=""/>

</a>

</div>

<div class="slider-dot">

<a href="#">

<ul>

<li>

相约情人节

<p>全场115元起</p>

css的代码：

.content-list{

width:20%;

height:560px;

border:1px solid #ccc;

float:left;

}

.content-body{

width:79%;

height:560px;

border:1px solid #ccc;

float: right;

}

.content-body,.content-list{

margin-top: 10px;

}

.content-right-top{

width:100%;

height:320px;

border:1px solid #ccc;

}

.content-right-bottom{

width:100%;

height:220px;

border:1px solid #ccc;

}

.slider{

width:69%;

height:320px;

border:1px solid #ccc;

float:left;

position: relative;

}

.slider-right{

float: left;

width: 30%;

height:320px;

border:1px solid #ccc;

}

.slier-right-top{

height:160px;

border: 1px solid #ccc;

}

.content-right-bottom{

margin-top:5px;

}

.list-title{

height:30px;

border: 1px solid #ccc;

}

.footer{

text-align: center;

}

.slider-img>a>img{

width: 100%;

height:320px;

position: absolute;

z-index:9;

top:0;

left:0;

}

.slider-img>a>img:first-child{

z-index:11;

}

.slider-dot{

position: absolute;

z-index: 13;

bottom: 0;

width: 100%;

}

.slider-dot>a{

text-decoration: none;

}

.slider-dot>a>ul{

width: 100%;

bottom:0;

}

.slider-dot>a>ul>li{

display: inline-block;

list-style: none;

width:19.4%;

height:35px;

text-align: center;

font-size: 12px;

color:#fff;

background-color: rgba(0,0,0,0.5);

}

.slider-dot>a>ul>li:hover,.active{

background-color: rgba(0,200,0,0.8) !important;

}

.list-tittle>ul>li{

list-style: none;

display: inline-block;

color: white;

width: 80px;

height: 20px;

text-align: center;

border: 1px solid #ccc;

margin-left: 10px;

background-color: red;

}

js的代码：

$(function(){

var index=0;

var timer=setInterval(slider,2000);

var $img= $(".slider-img>a>img");

var $li=$(".slider-dot>a>ul>li");

function slider(){

if(index>4){

index=0;

}

/*第二张显示其他张隐藏*/

$img.eq(index).fadeIn().siblings().fadeOut();

/*对应图片滚动，对应说明也要加上active样式*/

$li.eq(index).addClass("active").siblings().removeClass("active");

index ;

}

/*当鼠标悬停时候停止轮播*/

$(".slider").hover(function(){

clearInterval(timer);

},function(){

timer=setInterval(slider,2000);

})

/*鼠标悬停到那个说明就要显示哪一张图片*/

$li.hover(function(e){

e.stopPropagation();

e.preventDefault();

index=$(this).index();

$img.eq(index).fadeIn().siblings().fadeOut();

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

},function(e){

e.stopPropagation();

e.preventDefault();

})

$.ajax({

url:'../data/product_1.json',

type:'get',

success:function(data){

var pro=data;

var list='';

$(pro).each(function(index,elem){

list ='<li id="' elem.id '"><a href=""><img src="http://img.studyofnet.com' elem.src '"/></a></li>'

});

$(".list-content>ul").append(list);

}

})

})

,