*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
.slideShow{
width: 620px;
height: 700px; /*å
¶å®å°±æ¯å¾ççé«åº¦*/
border: 1px #eeeeee solid;
margin: 100px auto;
position: relative;
overflow: hidden; /*æ¤å¤éè¦å°æº¢åºæ¡æ¶çå¾çé¨åéè*/
}
.slideShow ul{
width: 2500px;
position: relative; /*æ¤å¤é注ærelative : 对象ä¸å¯å±å ï¼ä½å°ä¾æ®leftï¼rightï¼topï¼bottomçå±æ§å¨æ£å¸¸ææ¡£æµä¸å移ä½ç½®ï¼å¦æ没æè¿ä¸ªå±æ§ï¼å¾çå°ä¸å¯å·¦å³ç§»å¨*/
}
.slideShow ul li{
float: left; /*让åå¼ å¾ç左浮å¨ï¼å½¢æ并æç横çå¸å±ï¼æ¹ä¾¿ç¹å»æé®æ¶ç左移å¨*/
width: 620px;
}
.slideShow .showNav{ /*ç¨ç»å¯¹å®ä½ç»æ°åæé®è¿è¡å¸å±*/
position: absolute;
right: 10px;
bottom: 5px;
text-align:center;
font-size: 12px;
line-height: 20px;
}
.slideShow .showNav span{
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #ff5a28;
margin-left: 2px;
color: #fff;
}
.slideShow .showNav .active{
background: #b63e1a;
}
js代ç è§èï¼
<script src="../../../jQuery/js/jquery-2.1.4.js"></script> <script type="text/javascript">
$(document).ready(function(){
var slideShow=$(".slideShow"), //è·åæå¤å±æ¡æ¶çå称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"), //è·åæé®
oneWidth=slideShow.find("ul li").eq(0).width(); //è·åæ¯ä¸ªå¾çç宽度
var timer=null; //å®æ¶å¨è¿åå¼ï¼ä¸»è¦ç¨äºå
³éå®æ¶å¨
var iNow=0; //iNow为æ£å¨å±ç¤ºçå¾çç´¢å¼å¼ï¼å½ç¨æ·æå¼ç½é¡µæ¶é¦å
æ¾ç¤ºç¬¬ä¸å¼ å¾ï¼å³ç´¢å¼å¼ä¸º0
showNumber.on("click",function(){ //为æ¯ä¸ªæé®ç»å®ä¸ä¸ªç¹å»äºä»¶
$(this).addClass("active").siblings().removeClass("active"); //æé®ç¹å»æ¶ä¸ºè¿ä¸ªæé®æ·»å é«äº®ç¶æï¼å¹¶ä¸å°å
¶ä»æé®é«äº®ç¶æå»æ
var index=$(this).index(); //è·ååªä¸ªæé®è¢«ç¹å»ï¼ä¹å°±æ¯æ¾å°è¢«ç¹å»æé®çç´¢å¼å¼
iNow=index;
ul.animate({ "left":-oneWidth*iNow, //注ææ¤å¤ç¨å°leftå±æ§ï¼æ以ulçæ ·å¼éé¢éè¦è®¾ç½®position: relative; 让ul左移N个å¾ç大å°ç宽度ï¼Næ ¹æ®è¢«ç¹å»çæé®ç´¢å¼å¼iNOWxç¡®å®
})
});
function autoplay(){
timer=setInterval(function(){ //æå¼å®æ¶å¨
iNow++; //让å¾ççç´¢å¼å¼æ¬¡åºå 1ï¼è¿æ ·å°±å¯ä»¥å®ç°é¡ºåºè½®æå¾ç
if(iNow>showNumber.length-1){ //å½å°è¾¾æåä¸å¼ å¾çæ¶åï¼è®©iNowèµå¼ä¸ºç¬¬ä¸å¼ å¾çç´¢å¼å¼ï¼è½®æææ跳转å°ç¬¬ä¸å¼ å¾éæ°å¼å§
iNow=0; }
showNumber.eq(iNow).trigger("click"); //模æ触åæ°åæé®çclick
},2000); //2000为轮æçæ¶é´
}
autoplay();
slideShow.hover( function(){clearInterval(timer);},autoplay); å¦å¤æ³¨æsetIntervalçç¨æ³æ¯è¾å
³é®ã
})
</script>
主ä½ä»£ç ï¼
[html] view plain copy print?
<body>
<div class="slideShow">
<!--å¾çå¸å±å¼å§-->
<ul>
<li><a href="#"><img src="images/view/111.jpg"/></a></li>
<li><a href="#"><img src="images/view/112.jpg" /></a></li>
<li><a href="#"><img src="images/view/113.jpg" /></a></li>
<li><a href="#"><img src="images/view/114.jpg" /></a></li>
</ul>
<!--å¾çå¸å±ç»æ-->
<!--æé®å¸å±å¼å§-->
<div class="showNav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--æé®å¸å±ç»æ-->
</div>
</body>
温馨提示:答案为网友推荐,仅供参考