<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>幻灯片播放-2013</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/slide.js"></script> <link rel="stylesheet" href="css/slide.css" /> </head> <body> <div class="slide"> <div class="img"> <a href="#"><img src="images/2e2eb9389b504fc2298b0da2e4dde71191ef6d45.jpg" alt="狗狗狗-1" width="310" height="193" /></a> <a href="#"><img src="images/5bafa40f4bfbfbedc17b8bd879f0f736afc31f72.jpg" alt="马马马-2" width="310" height="193" /></a> <a href="#"><img src="images/9358d109b3de9c82f30548286d81800a19d84330.jpg" alt="二鸟-3" width="310" height="193" /></a> <a href="#"><img src="images/f603918fa0ec08faf639ae0058ee3d6d55fbda58.jpg" alt="蒙哥-4" width="310" height="193" /></a> <a href="#"><img src="images/03087bf40ad162d9695bdebb10dfa9ec8b13cde4.jpg" alt="长颈鹿-5" width="310" height="193" /></a> </div> <p class="title"></p> <ul class="slide-nav"></ul> </div> </body> </html>
JQ:
$(document).ready(function(){ var time=2000; //时间间隔 var interval; //计时对象 var picHeight=193; //图片高度 index=0; //当前 picLength=$(".img img").length; //图片张数 //准备 for(var i=0;i<picLength;i++) { var li="<li>"+(i+1)+"</li>"; $(".slide-nav").append(li); $(".slide .slide-nav li").eq(0).addClass("on"); var text=$(".slide .img a").eq(0).find("img").attr("alt"); $(".slide .title").text(text); } //鼠标移上 $(".slide .slide-nav li").mouseover(function() { index=$(this).index(); runPic(index); }) //自动循环 interval=setInterval(runPic,time); //每次执行函数 function runPic() { $(".slide .img").css({top:-picHeight*index}); $(".slide .slide-nav li").removeClass("on"); $(".slide .slide-nav li").eq(index).addClass("on"); var text=$(".slide .img a").eq(index).find("img").attr("alt"); $(".slide .title").text(text); index++; if(index==picLength) { index=0; } } //鼠标操作 $(".slide .slide-nav li").hover(function() { //停止循环 clearInterval(interval); },function() { //继续循环 interval=setInterval(runPic,time); }) })
*{ padding:0; margin:0;} img{ border:0;} .slide{position:relative;width:310px; height:193px; overflow:hidden;} .slide .img{ position:absolute;} .slide .title{position:absolute; top:0; width:100%;background:#6E717A; height:25px; line-height:25px; text-align:center; color:#fff;} .slide .slide-nav {position:absolute; bottom:3px; right:1px;} .slide .slide-nav li{width:20px; height:20px;float:left; list-style:none; display:inline-block; background:#6E717A; color:#fff; margin-right:3px; text-align:center; line-height:20px; cursor:pointer;} .slide .slide-nav li.on{background:#1D93D0;}