使用jQuery制作轮播图

其他 2018-07-17 05:15:22 阅读次数: 0

任务要求：

一、无缝轮播；

二、鼠标悬停，轮播停止；鼠标移开，轮播开始；

三、鼠标在小图片上切换可同时切换图片。


代码（第一种方法）：

<script src="Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //创建图片索引，默认为0
            var index = 0
            //获取显示标签的高度
            var heightimg = $("div .ad").height();
            //创建时针
            var times;
            function time(){
               times=  setInterval(function ()  {
                ////选中当前索引的数字并添加on样式
                //$(".num li:eq(" + index + ")").attr({ class: "on" })
                ////将选中的数字前边数字删除样式
                //$(".num li:gt(" + index + ")").removeAttr("class")
                ////将选中的数字后边数字删除样式
                //$(".num li:lt(" + index + ")").removeAttr("class")
                //调用时针方法
                LBimg(index);
                //每次循环索引加一
                index++;
                //当索引等于图片个数则索引等于0
                if (index == $(".slider li").length) {
                    index = 0;
                }
               }, 1500)
               }
            //调用时针方法
            time()
            //时针方法
            function LBimg(index) {
                $(".slider").animate({ top: -heightimg * index }, 1000)
                //选中所有数字标签清除class，然后选中传递的index，并添加样式on
                $(".num li").removeClass("on").eq(index).addClass("on")
            }
            //鼠标移动到图片上停止
            $(".slider").mouseover(function () {
                //清除时针
                clearInterval(times)
            })
            //鼠标移出继续轮播
            $(".slider").mouseout(function () {
                //创建时针
                //time = setInterval(function () {
                //    //选中当前索引的数字并添加on样式
                //    $(".num li:eq(" + index + ")").attr({ class: "on" })
                //    //将选中的数字前边数字删除样式
                //    $(".num li:gt(" + index + ")").removeAttr("class")
                //    //将选中的数字后边数字删除样式
                //    $(".num li:lt(" + index + ")").removeAttr("class")
                //    //调用时针方法
                //    LBimg(index);
                //    //每次循环索引加一
                //    index++;
                //    //当索引等于图片个数则索引等于0
                //    if (index == $(".slider li").length) {
                //        index = 0;
                //    }
                //}, 1500)
                //调用时针方法
                time();
            })
            //鼠标移动到数字图片后对应相应的图片
            $(".num li").mouseover(function () {
                //结束指针
                clearInterval(times)
                //将当前选中数字的索引赋值给index
                index = $(".num li").index(this)
                //调用时针方法，并把index传过去
                LBimg(index);
                //选中当前索引的数字并添加on样式
                //$(".num li:eq(" + index + ")").attr({ class: "on" })
                ////将选中的数字前边数字删除样式
                //$(".num li:gt(" + index + ")").removeAttr("class")
                ////将选中的数字后边数字删除样式
                //$(".num li:lt(" + index + ")").removeAttr("class")
            }).mouseout(function () {
                //time = setInterval(function () {
                //    //选中当前索引的数字并添加on样式
                //    $(".num li:eq(" + index + ")").attr({ class: "on" })
                //    //将选中的数字前边数字删除样式
                //    $(".num li:gt(" + index + ")").removeAttr("class")
                //    //将选中的数字后边数字删除样式
                //    $(".num li:lt(" + index + ")").removeAttr("class")
                //    //调用时针方法
                //    LBimg(index);
                //    //每次循环索引加一
                //    index++;
                //    //当索引等于图片个数则索引等于0
                //    if (index == $(".slider li").length) {
                //        index = 0;
                //    }
                //}, 1500)
                //调用时针方法
                time();
            })

        })
    </script>

第二种方法和网页全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jane shopping</title>
    <link rel="stylesheet" href="styles/main.css" type="text/css" />
    <link rel="stylesheet" href="styles/index.css" type="text/css" />
    <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" />
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        //文档就绪函数
        $(function () {
            //定义索引
            var $heigh = $(".content_right .ad").height();
            var count = 0;
            var $img = $(".slider li").length;
            var $time;
            //定时器开启
            var $time = setInterval(function () {
                Change(count);
                count++;
                //索引为0
                if (count == $img) {
                    count = 0;
                }
            }, 1500)
            //图片停止滚动
            $(".ad").hover(function () {
                //清除时间定时器
                clearInterval($time);
            }, function () {
                $time = setInterval(function () {
                    Change(count);
                    count++;
                    if (count == $img) {
                        count = 0;
                    }
                }, 1500)
            })
            //鼠标悬停在数字1-5之间的索引对应数字和图片停留
            $(".num li").mouseover(function () {
                count = $(".num li").index(this);
                Change(count);
            })
            //获取图片依次向上获取图片滑动
            function Change(count) {
                $(".slider").stop(true, false).animate({ top: -$heigh * count }, 1000);
                $(".num li").removeClass("on").eq(count).addClass("on");
            }
        })
    </script>
</head>
<body>
    <!--头部开始-->
    <div id="header">
        <a id="logo" href="#">Jane Shopping</a>
        <ul id="skin">
            <li id="skin_0" title="蓝色" class="selected">蓝色</li>
            <li id="skin_1" title="紫色">紫色</li>
            <li id="skin_2" title="红色">红色</li>
            <li id="skin_3" title="天蓝色">天蓝色</li>
            <li id="skin_4" title="橙色">橙色</li>
            <li id="skin_5" title="淡绿色">淡绿色</li>
        </ul>

    </div>
    <!--头部结束-->
    <!--导航开始-->
    <div id="navigation">
        <ul>
            <li><a href="#">首 页</a></li>
            <li>
                <a href="#">衬 衫</a>
                <ul>
                    <li><a href="#">短袖衬衫</a></li>
                    <li><a href="#">长袖衬衫</a></li>
                    <li><a href="#">无袖衬衫</a></li>
                </ul>
            </li>
            <li>
                <a href="#">卫 衣</a>
                <ul>
                    <li><a href="#">开襟卫衣</a></li>
                    <li><a href="#">套头卫衣</a></li>
                </ul>
            </li>
            <li>
                <a href="#">裤 子</a>
                <ul>
                    <li><a href="#">休闲裤</a></li>
                    <li><a href="#">卡其裤</a></li>
                    <li><a href="#">牛仔裤</a></li>
                    <li><a href="#">短裤</a></li>
                </ul>
            </li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <!--导航结束-->
    <!--主体开始-->
    <div id="content">
        <div class="content_left">
            <div class="global_module news">
                <h3>最新动态</h3>
                <div class="scrollNews">
                    <ul>
                        <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
                        <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
                        <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
                        <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
                        <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
                        <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
                        <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
                    </ul>
                </div>
                <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
            </div>
            <div class="global_module procatalog">
                <h3>产品分类</h3>
                <ul class="m-treeview">
                    <li class="m-expanded">
                        <span>衬衫</span>
                        <ul>
                            <li><span>短袖衬衫</span></li>
                            <li><span>长袖衬衫</span></li>
                        </ul>
                    </li>
                    <li class="m-expanded">
                        <span>卫衣</span>
                        <ul>
                            <li><span>开襟卫衣</span></li>
                            <li><span>套头卫衣</span></li>
                        </ul>
                    </li>
                    <li class="m-expanded">
                        <span>裤子</span>
                        <ul>
                            <li><span>休闲裤</span></li>
                            <li><span>免烫卡其裤</span></li>
                            <li><span>牛仔裤</span></li>
                            <li><span>短裤</span></li>
                        </ul>
                    </li>
                </ul>
                <p class="module_up_down"><img src="images/down.gif" alt="" /></p>
            </div>
        </div>
        <div class="content_right">
            <div class="ad">
                <ul class="slider">
                    <li><img src="images/ads/1.gif" /></li>
                    <li><img src="images/ads/2.gif" /></li>
                    <li><img src="images/ads/3.gif" /></li>
                    <li><img src="images/ads/4.gif" /></li>
                    <li><img src="images/ads/5.gif" /></li>
                </ul>
                <ul class="num">
                    <li class="on">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
            <div class="global_module prolist">
                <h3>新款上市</h3>
                <div class="prolist_content">
                    <ul>
                        <li>
                            <a href="detail.html"><img src="images/img_1.jpg" title="免烫高支棉衬衣" alt="假装有图片" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                    </ul>
                </div>
                <p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
            </div>
        </div>
    </div>
    <!--主体结束-->
</body>
</html>

猜你喜欢

转载自blog.csdn.net/cool__king/article/details/80814266
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022