轮播代码

it2024-10-19 18

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部分

转载于:https://www.cnblogs.com/lichun123/p/4987244.html