难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正:
运作环境win7,代码编辑器是:sublime; 我把源码复制了一下,
<!doctype html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} #outer{width: 314px;height: 220px;position: relative;margin: 30px auto;} #inner{width: 314px;height: 220px;position: absolute;z-index: -1;} #inner img{width: 314px;height: 220px;position: absolute;left: 0;top: 0; z-index: 0; opacity: 0;} #xiabiao{width: 100px;overflow: hidden;position: absolute;bottom: 10px;left: 100px;list-style: none;} #xiabiao li{width: 15px;height: 15px;font-size: 12px; float: left;margin-left: 5px;background: #fff;text-align: center;cursor: pointer;} #left{width: 30px;height: 60px;position: absolute;left: 0;top: 80px;background: #aaa;opacity: 0.5;cursor: pointer;} #right{width: 30px;height: 60px;position: absolute;right: 0;top: 80px;background: #aaa;opacity: 0.5;cursor: pointer;} #inner .show{opacity: 1;} #xiabiao .select{background: red;color: #fff;} </style></head><body> <div id="outer"> <div id="inner"> <img class="show" src="img/01.jpg" alt=""> <img src="img/02.jpg" alt=""> <img src="img/03.jpg" alt=""> <img src="img/04.jpg" alt=""> <img src="img/06.jpg" alt=""> </div> <ul id="xiabiao"> <li class="select">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <p id="left"></p> <p id="right"></p> </div><script src="jquery.js"></script>
<script> var x=0; var y; var timer1=null,timer2=null,timer3=null; $(function () { function everygo(){ var a=0; if (x>=$('#inner img').length) { x=0; }; $('#xiabiao li').eq(x).css({'background':'red','color':'#fff'}).siblings().css({'background':'#fff','color':'black'}); $('#inner img').eq(x).css('z-index','1').siblings().css('z-index','0'); timer1=setInterval(function(){ a++; if (a>=10) { clearInterval(timer1); $('#inner img').eq(x).siblings().css('opacity','0'); }; var b=a/10; $('#inner img').eq(x).css('opacity',b); },30) }; function autogo(){ timer2=setInterval(function () { x++; everygo(); },2000) }; autogo(); $('#xiabiao li').click(function () { clearInterval(timer1); clearInterval(timer2); x=$(this).index(); everygo(); autogo(); }) $('#left').click(function () { clearInterval(timer1); clearInterval(timer2); x--; everygo(); autogo(); }) $('#right').click(function(){ clearInterval(timer1); clearInterval(timer2); x++; everygo(); autogo(); }) });</script>
</body></html>忙的时候想休息,休息的时候想代码,也是没有谁了,呵呵口水大军淹死我吧。