jQuery实现图片轮播效果

来源：互联网发布：淘宝刷销量会被编辑：程序博客网时间：2024/05/16 04:20

　　　图片轮播是一个老生常谈的东西，今天跟着书上写了一个demo。（参考《锋利的jQuery》）
　　　要实现的功能，图片可以向左向右滚动，自动循环播放，并且可以跳转至指定页面。
这里写图片描述

　　　查看示例

　　　图片滚动效果主要用到的东西就是position:absolute 和 left: 0; overflow：hidden属性，用于定位图片和隐藏显示多余图片。
　　　具体代码可以点开示例链接——查看网页源代码。。
　　　看一下代码结构吧
　　　scroll.html:
　　　

<div class="v_show">    <div class="v_caption">        //4个页面标识，可点击切换至具体页面        <div class="highlight_tip">            <span class="current">1</span>            <span>2</span>            <span>3</span>            <span>4</span>        </div>        //向左 向右按钮        <div class="change_btn">            <span class="prev">back</span>            <span class="next">next</span>        </div>    </div>    //图片容器    <div class="v_content">        //图片显示区域        <div class="v_content_list">            <ul>                //将图片资源全部写在这里                <li><a href="#"><img src="img/01.jpg" alt="海贼王"/></a><h4><a href="#">海贼王</a></h4>                    <span>播放:<em>28,276</em></span></li>                <li><a href="#"><img src="img/01.jpg" alt="海贼王"/></a><h4><a href="#">海贼王</a></h4>                    <span>播放:<em>28,276</em></span></li>                .......            </ul>        </div>    </div></div>

　　　main.js:
　　　

$(function () {        var page = 1;        var i = 4;        //向右滚动效果实现        $("span.next").click(function () {            //console.log('enter');            var $parent = $(this).parents("div.v_show");            var $v_show = $parent.find("div.v_content_list");            var $v_content = $parent.find("div.v_content");            //获取内容显示区宽度            var v_width = $v_content.width();            var len = $v_show.find("li").length;            var page_count = Math.ceil(len / i);            if (!$v_show.is(":animated")) {                //如果已经是最后一页，则滚动到第一页                if (page == page_count) {                    $v_show.animate({left: "0"}, "normal");                    page = 1;                } else {                    $v_show.animate({left: "-=" + v_width}, "normal");                    page++;                }                $parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");            }        });        //向左滚动效果实现        $("span.prev").click(function () {            var $parent = $(this).parents("div.v_show");            var $v_show = $parent.find("div.v_content_list");            var $v_content = $parent.find("div.v_content");            var v_width = $v_content.width();            var len = $v_show.find("li").length;            var page_count = Math.ceil(len / i);            //防止多次连续点击鼠标移除后仍在进行动画            //判断当前元素是否处于动画状态，并选择是否执行动画操作            if (!$v_show.is(":animated")) {                //如果已经是第一页，则滚动到最后一页                if (page == 1) {                    $v_show.animate({left: '-=' + v_width * (page_count - 1)}, "slow");                    page = page_count;                } else {                    $v_show.animate({left: "+=" + v_width}, "normal");                    page--;                }                //上方4个标识的样式增加与移除                $parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");            }        });        $(".highlight_tip span").click(function () {            var $pageToGo = $(this).index() +1;            var $parent = $(this).parents("div.v_show");            var $v_show = $parent.find("div.v_content_list");            var $v_content = $parent.find("div.v_content");            var v_width = $v_content.width();            var len = $v_show.find("li").length;            if (!$v_show.is(":animated")) {                //判断向右滚动还是向左滚动                if ($pageToGo > page) {                    $v_show.animate({left: "-=" + v_width*($pageToGo - page)}, "normal");                    page = $pageToGo;                    $parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");                } else {                    $v_show.animate({left: "+=" + v_width*(page - $pageToGo)}, "normal");                    page = $pageToGo;                    $parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");                }            }            });            //设置自动滚动 时间设为3秒setInterval("$('span.next').trigger('click')",3000);    })

主要css样式：

.highlight_tip span {    display: inline;    float: left;    width: 7px;    height: 7px;    overflow: hidden;    margin: 0 2px;    background: url(img/btn_cartoon.gif) no-repeat 0 -320px;    text-indent: -9999px;    cursor: pointer;}.v_content {    position: relative;    width: 592px;    height: 160px;    overflow: hidden;    border-right: 1px solid #E7E7E7;    border-bottom: 1px solid #E7E7E7;    border-left: 1px solid #E7E7E7;}.v_content_list {    position: absolute;    width: 2500px;    top: 0px;    left: 0px;}.highlight_tip .current {    background-position: 0 -220px;}

详细实现代码可以查看上方给出的示例链接，在此不赘述。

0 0