jquey animate 实现切换图片效果

最新推荐文章于 2021-06-05 10:53:13 发布

曹振华

最新推荐文章于 2021-06-05 10:53:13 发布

阅读量2.4k

点赞数 1

分类专栏： jquery 文章标签： jquery animate 切换图片

本文链接：https://blog.csdn.net/chadcao/article/details/8649668

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication57.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        #prev{ cursor:pointer; margin-top:136px;}
        #next{ cursor:pointer; margin-top:136px;}
        .prev_content{ width:17px; height:296px; float:left;}
        .next_content{ width:17px; height:296px; float:left;}
        .v_content { position:relative; overflow:hidden; width:412px; height:296px; margin:0px; float:left;}
        .v_content_list { position:absolute; width:1236px;top:0px; left:0px; }
        .v_content_item { float:left;}
    </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            var item_length = $('div.v_content_item').length;
            var item_index = 1;
            var v_content_width = $('div.v_content').width();
            $('#prev').click(function () {//Show the previous chart. If it is the first chart, then show the last one.
                if (!$('div.v_content_list').is(':animated')) {
                    if (item_index == 1) {
                        $('div.v_content_list').animate({ left: '-=' + v_content_width * (item_length - 1) }, 'slow');
                        item_index = item_length;
                    }
                    else {
                        $('div.v_content_list').animate({ left: '+=' + v_content_width }, 'slow');
                        item_index--;
                    }
                }
            });
            $('#next').click(function () {//Show the next chart. If it is the last chart, then show the first one.
                if (!$('div.v_content_list').is(':animated')) {
                    if (item_index == item_length) {
                        $('div.v_content_list').animate({ left: '+=' + v_content_width * (item_length - 1) }, 'slow');
                        item_index = 1;
                    }
                    else {
                        $('div.v_content_list').animate({ left: '-=' + v_content_width }, 'slow');
                        item_index++;
                    }
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="prev_content">
        <img id="prev" src="Image/prev.png" alt="" />
    </div>
    <div class="v_content">
        <div class="v_content_list">
            <div class="v_content_item"><img id="Img1" src="Image/1.png" alt="" /></div>
            <div class="v_content_item"><img id="Img2" src="Image/2.png" alt="" /></div>
            <div class="v_content_item"><img id="Img3" src="Image/3.png" alt="" /></div>
        </div>
    </div>
    <div class="next_content">
        <img id="next" src="Image/next.png" alt="" />
    </div>
</asp:Content>