一些Simpleness图片切换与轮播

首先先添加外部文件jquery-2.0.3.min.js
可以在http://www.jq22.com/jquery-info122 下载最新的jquery文件

下面其功能是点击一张图片切换另一张图片

body标签的内容

<div id="wai">
     <img src="~/Content/Pic/50524.jpg" alt="" id="one" />
</div>

JS代码

<script type="text/javascript">
function change_pic() { 
            var pic = document.getElementById("one");
            pic.onclick = function () {
                if (pic.getAttribute("src", 2) == "../Content/Pic/50524.jpg") {
                    pic.setAttribute("src", "../Content/Pic/295743.jpg");
                }
                else {
                    pic.setAttribute("src", "../Content/Pic/50524.jpg");
                };
            }
        }
        change_pic()
</script>

以上的代码说明：先调用change_pic()方法，方法的名称可随意命名，声明变量获取到图片的所在的ID，给到ID一个点击事件，写一个判断，如果是当前的图片，点击变成所要切换的图片，如果不是，就切回原来的图片，需要用到两个方法，getAttribute和setAttribute, getAttribute () 方法返回指定属性名的属性值,setAttribute () 方法创建或改变某个新属性。

通过点击图片切换文字

body标签的内容

<div id="wei">
       <img src="~/Content/Pic/313849.jpg" alt="" id="twe" />
</div>

JS代码

<script type="text/javascript">
var rr=1;
  $("#wei").click(function () {
     if (rr == 1) {
         rr=2
$("#wei").html('<p style="color:#0094ff;font-size:120px;height:300px;margin:0;padding:0;line-height:250px">Hello</p>')
            }
            else if (rr == 2) {
                rr=1
                $("#wei").html('<img src="/Content/Pic/313849.jpg" alt="" id="twe" />')
            }
        })

此方法调用html元素即可
声明变量等于1，给ID一个点击事件，如果等于1的话，就切换所要呈现在html的元素的内容，否则就返回变量等于1的内容。

图片轮播，通过改变像素来实现。

body标签的内容

<div class="ggg" style="position:relative;left:36.8%">
     <div id="jj" >
        <img src="~/Content/Pic/279846.jpg" alt="" />
        <img src="~/Content/Pic/295743.jpg" alt="" />
        <img src="~/Content/Pic/279878.jpg" alt="" />
     </div>
 </div>

JS代码

s
<script type="text/javascript">
etInterval(function () {
            var left = parseInt($("#jj").css("left"));
            if (left < -1000) {
                $("#jj").animate({"left": -145 + 'px'},0)
            }
            else {
                $("#jj").animate({ "left": left - 500 + 'px' }, 1000)
            }
        },1000)

jQuery Animate() 方法允许创建自定义的动画。