html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播</title> <link rel="stylesheet" type="text/css" href="../css/main.css"/> <script type="text/javascript" src="../js/jquery-1.11.3.js"></script> <script type="text/javascript" src="../js/main.js"></script> </head> <body> <div id="header">轮播图！</div> <div id="wrap"> <div id="position-div"> <div id="left-images"> <div id="left-nav"> << </div> <div id="right-nav"> >> </div> <div id="radio-div"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <img id="im1" src="../images/1.jpg"/> <img id="im2" src="../images/2.jpg"/> </div> </div> </div> </body> </html>
css部分
body{
background:silver;
}
#header{
margin:50px auto;
width:100px;
font-size:x-large;
color:deeppink;
}
#wrap{
height:300px;
width:400px;
margin:auto;
border:1px solid #6e6e6e;
}
#position-div{
width:800px;
overflow:hidden;
}
#im1{
height:300px;
width:400px;
position:absolute;
top:0;
left:0;
z-index: -1;
}
#im2{
height:300px;
width:400px;
position:absolute;
top:0;
left:400px;
z-index: -1;
}
#left-images{
height:300px;
width:400px;
float:left;
overflow: hidden;
position:relative;
}
#radio-div{
overflow: hidden;
margin:250px 0 0 60px;
}
#radio-div div{
height:30px;
width:30px;
border-radius:30px;
background:pink;
float:left;
margin-left:10px;
text-align:center;
line-height:30px;
font-size:medium;
color:white;
opacity:0.7;
}
#radio-div div:hover{
opacity:1;
cursor:pointer;
}
#left-nav,#right-nav{
color:white;
font-size:x-large;
font-weight:bolder;
margin-top:150px;
opacity:0.5;
cursor:pointer;
}
#left-nav:hover,#right-nav:hover{
opacity:1;
}
#left-nav{
float:left;
}
#right-nav{
float:right;
}
js部分
/**
* Created by Administrator on 2015/9/23.
*/
$(document).ready(function(){
var leftStart=0;
var rightStart=400;
var imgs=["1","2","3","4","5","6"];
var mg=3;
var firstObj="../images/";
var lastObj=".jpg";
var status=true; //是否在进行setinterval
var moveStatus=false; //移入移出状态
var timeId=setInterval(run,4);
function run(){
$("#im1").css("left",leftStart);
$("#im2").css("left",rightStart);
leftStart--;
rightStart--;
if(leftStart<=-400){
leftStart=400;
if(mg<imgs.length-1){
mg++;
}else{
mg=0;
}
$("#im1").get(0).src=firstObj+imgs[mg]+lastObj;
}
if(rightStart<=-400){
rightStart=400;
if(mg<imgs.length-1){
mg++;
}else{
mg=0;
}
$("#im2").get(0).src=firstObj+imgs[mg]+lastObj;
}
}
$("#left-images").mouseover(over);
function over(e){
if(!moveStatus){
moveStatus = true;
if (status) {
$("img").stop(true);
clearInterval(timeId);
if (leftStart < rightStart) {
$("#im2").animate({"left": 0}, 1000);
$("#im1").animate({"left": -400}, 1000, function () {
$("#im1").css("left", "400px");
leftStart = 400;
rightStart = 0;
status = false;
if (!moveStatus) {
timeId = setInterval(run, 4);
status = true;
}
});
} else {
$("#im1").animate({"left": 0}, 1000);
$("#im2").animate({"left": -400}, 1000, function () {
$("#im2").css("left", "400px");
leftStart = 0;
rightStart = 400;
status = false;
if (!moveStatus) {
timeId = setInterval(run, 4);
status = true;
}
});
}
}
}
}
$("#left-images").mouseout(out);
function out(e){
if(e.pageX<=$("#left-images").offset().left||
e.pageX>=$("#left-images").width()+$("#left-images").offset().left||
e.pageY<=$("#left-images").offset().top||
e.pageY>=$("#left-images").height()+$("#left-images").offset().top
){
moveStatus=false;
if(!status){
timeId=setInterval(run,4);
status=true;
}
}
}
//*********************************
$("#radio-div div").click(function(e){
var n= e.target.innerHTML;
if(leftStart==0){
$("#im2").get(0).src=firstObj+n+lastObj;
$("#im2").animate({"left":0},1000);
$("#im1").animate({"left":-400},1000,function(){
$("#im1").css("left","400px");
leftStart=400;
rightStart=0;
});
}else if(rightStart==0){
$("#im1").get(0).src=firstObj+n+lastObj;
$("#im1").animate({"left":0},1000);
$("#im2").animate({"left":-400},1000,function(){
$("#im2").css("left","400px");
leftStart=0;
rightStart=400;
});
}
});
$("#right-nav").click(function(){
if(leftStart==0){
if(mg<imgs.length){
mg++;
if(mg==imgs.length){
mg=0;
}
$("#im2").get(0).src=firstObj+imgs[mg]+lastObj;
$("#im2").animate({"left":0},1000);
$("#im1").animate({"left":-400},1000,function(){
$("#im1").css("left","400px");
leftStart=400;
rightStart=0;
});
}
}else if(rightStart==0){
if(mg<imgs.length){
mg++;
if(mg==imgs.length){
mg=0;
}
$("#im1").get(0).src=firstObj+imgs[mg]+lastObj;
$("#im1").animate({"left":0},1000);
$("#im2").animate({"left":-400},1000,function(){
$("#im2").css("left","400px");
leftStart=0;
rightStart=400;
});
}
}
});
//**********************************
$("#left-nav").click(function(){
if(leftStart==0){
$("#im2").css("left","-400px");
if(mg>0){
mg--;
if(mg<0){
mg=imgs.length-1;
}
$("#im2").get(0).src=firstObj+imgs[mg]+lastObj;
$("#im2").animate({"left":0},1000);
$("#im1").animate({"left":400},1000,function(){
$("#im1").css("left","400px");
leftStart=400;
rightStart=0;
});
}
}else if(rightStart==0){
$("#im1").css("left","-400px");
if(mg>0){
mg--;
if(mg<0){
mg=imgs.length-1;
}
$("#im1").get(0).src=firstObj+imgs[mg]+lastObj;
$("#im1").animate({"left":0},1000);
$("#im2").animate({"left":400},1000,function(){
$("#im2").css("left","400px");
leftStart=0;
rightStart=400;
});
}
}
});
});
加上jqeury部分
原文：http://www.cnblogs.com/lichun123/p/4987244.html