<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript" src="Carousel.js"></script> <link rel="stylesheet" type="text/css" href="Carousel.css"/> <title>轮播</title> </head> <body> <div id="main"> <img id="prev" src="icon/prev.png"/> <img id="next" src="icon/next.png"/> <ul class="pic"> <li class="active"><img src="images/1.jpg" alt=""/></li> <li><img src="images/2.jpg" alt=""/></li> <li><img src="images/3.jpg" alt=""/></li> <li><img src="images/4.jpg" alt=""/></li> </ul> <ul class="num"> <li class="visited">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
$(function () { //点击上翻显示上一张图片 $("#prev").click(function () { clearInterval(time); now=(now-1+4)%4; autoPlay(); $(".pic li:eq("+now+")").addClass("active").siblings().removeClass(); $(".num li:eq("+now+")").addClass("visited").siblings().removeClass(); }) //点击下翻显示下一张图片 $("#next").click(function () { clearInterval(time); now=(now+1+4)%4; autoPlay(); $(".pic li:eq("+now+")").addClass("active").siblings().removeClass(); $(".num li:eq("+now+")").addClass("visited").siblings().removeClass(); }) //自动播放 var time=""; var now=0; function autoPlay(){ time = setInterval(function(){ if(now<3) { now++; }else{ now=0; } $(".pic li:eq("+now+")").addClass("active").siblings().removeClass(); $(".num li:eq("+now+")").addClass("visited").siblings().removeClass(); },1500); } autoPlay(); //点击数字显示对应图片 $(".num li").click(function () { clearInterval(time); numIndex=$(this).index(); now=numIndex; autoPlay(); $(this).addClass("visited").siblings().removeClass(); $(".pic li:eq("+numIndex+")").addClass("active").siblings().removeClass(); })
//鼠标经过是停止轮播
$(".pic img").mouseover(function () {
clearInterval(time);
})
//鼠标离开时继续轮播
$(".pic img").mouseout(function () {
autoPlay();
})
})
*{ margin:0; padding:0; } #main{ width: 1200px; height: 300px; margin: 0 auto; position: relative; } ul{ list-style: none; } .pic>li{ width: 800px; height: 300px; position: absolute; top:0; left: 200px; } .pic li img{ width: 800px; height: 300px; position: absolute; top:0; left: 0; z-index: 0; cursor: pointer; } .active{ width: 800px; height: 300px; position: absolute; top:0; left: 0; z-index: 1; } .num{ position:absolute; top: 250px; left: 850px; z-index: 999; } .num li{ display: block; float: left; padding:0 10px; text-align: center; background-color: #ff6600; border-right: 1px solid white; color: white; cursor: pointer; } .num li:hover{ background-color: white; color: #ff6600; } #prev{ position: absolute; top: 100px; left: 90px; width: 100px; cursor: pointer; } #next{ position: absolute; top: 100px; left: 1000px; width: 100px; cursor: pointer; } .num li.visited{ background-color: white; color: #ff6600; }
实现功能：
1、定时轮播
2、鼠标经过时图片停止轮播
3、上下翻页
4、点击对应显示第N张图片