js的匿名函数及jQuery的图片轮播_怎么用匿名函数让图片左右移动-CSDN博客

本文链接：https://blog.csdn.net/qq_21773607/article/details/46291623

1.匿名函数自执行
（function（）{
config.log();

}）（）；
其中将function括起的小括号可以用其他字符代替：
eg：!function(){

}();

2.jQuery的图片切换（还需完善）

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#img-show{width:402px; height:160px;border:1px solid red;margin:0px auto;padding: 0px auto;position: relative;}
#img-top{width: 400px;height:30px;border:1px solid green;}
h4{margin:0px;padding: 0px;position: absolute;left: 5px;top: 5px;}
.height_tip{position: absolute;left: 100px;top: 5px;}
.current{border-radius: 10px;width:10px;height:10px;background-color: blue;margin:5px 10px 0px 0px; float: left;}
#img_main ul{overflow: hidden;width: 400px;height: 100px;padding-left: 10px;position: absolute;left: 0px;}
#img_main ul li{list-style:none;width:112px;height:100px;float:left;margin:10px;}
#img_main ul li img{width:100px;height:100px;}
</style>

<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
var page=1;
var i=3;
$("#next").click(function(){
var $parent=$(this).parents("div.img-show");
var $img_main=$("#img_main");
var $imgs=$("ul");
var img_width=$img_main.width();
var len=$imgs.find("li").length;
var page_count=Math.ceil(len/i);
if(!$imgs.is(":animated")){
if(page==page_count){
$imgs.animate({left:'0px'},2000);
page=1;
}else{
$imgs.animate({left:'-='+img_width},2000);
page++;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
});
})

</script>
</head>
<body>
<div id="img-show">
<div id="img-top">
<h4 class="match">赛事简介</h4>
<div class="height_tip">
<span class="current">1</span>
<span>2</span>
<input type="button" value="下一页" id="next">
</div>
</div>
<div id="img_main">
<ul>
<li><img src="images/pic1.jpg"></li>
<li><img src="images/pic2.jpg"></li>
<li><img src="images/pic3.jpg"></li>
<li><img src="images/pic1.jpg"></li>
<li><img src="images/pic2.jpg"></li>
<li><img src="images/pic3.jpg"></li>
</ul>
</div>
</div>
</body>
</html>