首页图片滚动效果
很多网站首页，都用滚动的大图，每滚过一张，停留几秒；点击图片，能进入详情页；上面有导航器，点击导航，图片可以滚动到指定页，这个效果我想学习很久了，最近才自己摸索出来：
<!doctype html> <html> <head> <meta charset="utf-8"> <style> #outer-border { width:1000px; height:400px; overflow:hidden; } #items { width: 300%; position: relative; left:-1000px; } ._item { float: left; } #item_index { position: absolute; top:360px; left:40px; } ._index { width:18px; height:18px; border:solid 1px; text-align:center; float:left; margin-right:8px; overflow:auto; cursor:pointer; } </style> <script src="../js/jquery-2.1.1.min.js" type="text/javascript"></script> <script> $(document).ready( function(e) { var imgWidth = $("._item").eq(0).width(); //获取单张图片宽度 var _index = 0; //图片指示器初始位置 var current_index = 0; //当前显示图片的索引 var img_scroll = setInterval(scroll_left,3000);//设置停顿时间 //设置点击图片时的事件 $("._item").click(function(e) { var src = $(this).attr("src");//获取所点击的图片的地址，根据该地址来判断点击了哪张图片，需要进入什么页面 switch(src){ case "../images/index_picture/1.jpg" : alert("'" + src + "' was clicked"); break; case "../images/index_picture/2.jpg" : alert("'" + src + "' was clicked"); break; case "../images/index_picture/3.jpg" : alert("'" + src + "' was clicked"); break; case "../images/index_picture/4.jpg" : alert("'" + src + "' was clicked"); break; default: alert("You click nothing!"); } }); //设置图片指示器被点击时的处理方法 $("._index").click(function(e) { clearInterval(img_scroll); //停止图片滚动 var clicked_index = $(this).index("._index"); //获取被点击的索引 var distance = clicked_index - current_index; //计算被点击的索引与当前索引的距离 if(distance > 0 ){ $("._index").eq(current_index).css("background","none"); $("._index").eq(clicked_index).css("background","blue"); for(var t = 0; t < distance; t++){ $("#items").animate({ left:"-=" + imgWidth +"px" }, 100, function(){ $(this).css("left","-1000px"); var num = $("._item").length; var temp = $("._item").eq(0).attr("src"); for(var i = 0; i < (num - 1); i++) { $("._item").eq(i).attr("src",$("._item").eq(i+1).attr("src")); } $("._item").eq(num - 1).attr("src",temp); } ); } _index = clicked_index; current_index = clicked_index; } if(distance < 0){ $("._index").eq(current_index).css("background","none"); $("._index").eq(clicked_index).css("background","blue"); distance = -distance; for(var t = 0; t < distance; t++){ $("#items").animate({ left:"+=" + imgWidth +"px" }, 100, function(){ $(this).css("left","-1000px"); var num = $("._item").length; var temp = $("._item").eq(num - 1).attr("src"); for(var i = num - 1; i > 0; i--) { $("._item").eq(i).attr("src",$("._item").eq(i-1).attr("src")); } $("._item").eq(0).attr("src",temp); } ); } _index = clicked_index; current_index = clicked_index; } img_scroll = setInterval(scroll_left,3000); }); //左滚动函数 function scroll_left(){ $("._index").eq(_index).css("background","none"); if(_index == 3){ _index = -1; } current_index = _index + 1; $("._index").eq(_index + 1).css("background","blue"); _index += 1; $("#items").animate({ left:"-=" + imgWidth +"px" }, 1000, function(){ $(this).css("left","-1000px"); var num = $("._item").length; var temp = $("._item").eq(0).attr("src"); for(var i = 0; i < (num - 1); i++) { $("._item").eq(i).attr("src",$("._item").eq(i+1).attr("src")); } $("._item").eq(num - 1).attr("src",temp); } ); } //右滚动函数，最终并没有用到这个函数，只是运用到了它的原理，但还是值得保留 function scroll_right(){ $("._index").eq(_index).css("background","none"); if(_index == 3){ _index = -1; } current_index = _index + 1; $("._index").eq(_index + 1).css("background","blue"); _index += 1; $("#items").animate({ left:"+=" + imgWidth +"px" }, 1000, function(){ $(this).css("left","-1000px"); var num = $("._item").length; var temp = $("._item").eq(num - 1).attr("src"); for(var i = num - 1; i > 0; i--) { $("._item").eq(i).attr("src",$("._item").eq(i-1).attr("src")); } $("._item").eq(0).attr("src",temp); } ); } }); </script> </head> <body> <!--大图区--> <div id="outer-border"> <!--图片区--> <div id="items"> <img class="_item" src="../images/index_picture/1.jpg" /> <img class="_item" src="../images/index_picture/2.jpg" /> <img class="_item" src="../images/index_picture/3.jpg" /> <img class="_item" src="../images/index_picture/4.jpg" /> </div> <!--索引区--> <div id="item_index"> <div class="_index" style="background:blue;"></div> <div class="_index"></div> <div class="_index"></div> <div class="_index"></div> </div> </div> </body> </html>
