jquery 实现图片轮换功能

最新推荐文章于 2021-12-26 16:18:12 发布
最新推荐文章于 2021-12-26 16:18:12 发布
阅读量173 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/woody-wu/archive/2010/09/11/20100911-001.html
版权

通过jquery 实现的图片轮换功能。

 （1)可以定时轮换

   (2).手动切换功能 

  效果图如下:

    

 

 

代码实现：

 <!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 runat = " server " >
     < title > 图片轮换 < / title>

     < script language = " javascript "  type = " text/javascript "  src = " ../file/js/jquery.pack.js " >< / script>

     < script language = " javascript "  type = " text/javascript " >
        $(document.body).ready( function () {
            InitSwitchObj();
        });
         function  InitSwitchObj() {
            IMGLIST  =  $( " #IMG_UL_LIST_1 " );
            IMGINDEX  =  $( " #IMG_INDEX_UL_LIST_1 " );
            MAXINDEX  =  IMGLIST.find( " li " ).length;
            currIndex  =   0 ;
            currImgIndex  =  IMGINDEX.find( " li:eq( "   +  currIndex  +   " ) " );
            currImgLi  =  IMGLIST.find( " li:eq( "   +  currIndex  +   " ) " );
            currImgLi.show();
            interValTime  =   3000 ;
            fadeInTime  =   800
            fadeOutTime  =   1000 ;
            ImageAutoSwitch();
            ImageManualSwitch();
            ImageStopSwitch();
        }
         // 執行時間
         var  interValTime  =   0 ;
         // 下一張圖片顯示時間
         var  fadeInTime  =   0 ;
         // 上一張圖片的消失時間
         var  fadeOutTime  =   0 ;
         // 保存當前圖片定時的對象
         var  imageTimer  =   null ;
         // 當前的索引
         var  currIndex  =   null ;
         // 當前圖片的所以
         var  currImgIndex  =   null ;
         // 當前圖片
         var  currImgLi  =   null ;
         // 記錄需要切換的圖片集合
         var  IMGLIST  =   null ;
         // 記錄需要切換的圖片集合的索引。
         var  IMGINDEX  =   null ;
         // 最大圖片個數
         var  MAXINDEX  =   null ;
         // 自動定時切換。
         function  ImageAutoSwitch() {
             if  (imageTimer  !=   null ) {
                clearInterval(imageTimer);
            }
            imageTimer  =  setInterval( " IntervalImage() " , interValTime);
        }
         // 手動切換圖片
         function  ImageManualSwitch() {
            IMGINDEX.find( " li " ).each( function (i) {
                $( this ).hover( function () {
                     if  (imageTimer  !=   null ) {
                        clearInterval(imageTimer);
                    }
                    currIndex  =  i;
                    ImageSwitchChange();
                },  function () {
                    ImageAutoSwitch();
                });

            });
        }
         // 鼠標放到圖片上的換，停止切換
         function  ImageStopSwitch() {
            IMGLIST.find( " li " ).each( function () {
                $( this ).hover( function () {
                     if  (imageTimer  !=   null ) {
                        clearInterval(imageTimer);
                    }
                },  function () {
                    ImageAutoSwitch();
                });
            });

        }
         // 自动切换图片
         function  IntervalImage() {
            currIndex  =  parseFloat(currIndex);
            currIndex  =  currIndex  +   1 ;
             // 如果切換到最大數量的時候則從頭開始
             if  (currIndex  >=  MAXINDEX) {
                currIndex  =   0 ;
            }
             // 將原來的現實圖片索引的背景透明
            ImageSwitchChange();
        }
         // 切換圖片的時候，響應的圖片要實現漸變效果
         function  ImageSwitchChange() {
             if  (currImgIndex  !=   null ) {
                currImgIndex.css({  " background-color " :  " transparent "  });
            }
            currImgIndex  =  IMGINDEX.find( " li:eq( "   +  currIndex  +   " ) " );
            imgLi  =  IMGLIST.find( " li:eq( "   +  currIndex  +   " ) " );
            currImgIndex.css({  " background-color " :  " #999999 "  });
             if  (currImgLi  !=   null ) {
                currImgLi.fadeOut(fadeOutTime,  function () {
                    imgLi.fadeIn(fadeInTime);
                });
            }
            currImgLi  =  imgLi;
        }
     < / script>

     < style type = " text/css " >
        .img - swith - main
        {
            position: relative;
            font - family: Arial, Verdana;
            font - size: 12px;
            width: 400px;
            height: 300px;
            background - color: #f3f3f3;
        }
        .img - switch
        {
            width:  100 % ;
            height:  100 % ;
            overflow: hidden;
        }
        .img - switch  ul
        {
            margin: 0px;
            padding: 0px;
            list - style - type: none;
            overflow: hidden;
            width:  100 % ;
            height:  100 % ;
        }
        .img - switch  ul li
        {
             float : left;
            width:  100 % ;
            height:  100 % ;
            display: none;
        }
        .img - switch  ul li img
        {
            width:  100 % ;
            height:  100 % ;
            border: 0px;
        }
        .img - switch - clear
        {
            clear: both;
        }
        .img - switch - index
        {
            position: absolute;
            bottom: 20px;
            right: 20px;
            overflow: hidden;
        }
        .img - switch - index ul
        {
            margin: 0px;
            padding: 0px;
            list - style - type: none;
        }
        .img - switch - index ul li
        {
            padding: 2px;
            border: 1px solid #c0c0c0;
            margin - right: 5px;
             float : left;
            font - weight: bold;
            cursor: pointer;
            color: Black;
            padding - left: 6px;
            padding - right: 6px;
        }
     < / style>
< / head>
< body >
     < form id = " form1 "  runat = " server " >
     < div >
         < div class = ' img-swith-main ' >
             < div class = " img-switch " >
                 < ul id = " IMG_UL_LIST_1 " >
                     < li >
                         < img src = " ../file/news/20100118093115.JPG "   / >< / li >
                     < li >
                         < img src = " ../file/news/20100326142850.JPG "   / >< / li >
                     < li >
                         < img src = " ../file/news/20100118094417.JPG "   / >< / li >
                     < li >
                         < img src = " ../file/news/20100326142627.JPG "   / >< / li >
                     < li >
                         < img src = " ../file/news/20100317194049.JPG "   / >< / li >
                 < / ul>
             < / div>
             < div class = ' img-switch-index ' >
                 < ul id = " IMG_INDEX_UL_LIST_1 " >
                     < li id = " li_index_default "  style = " background-color: #aaa; " > 01 < / li>
                     < li > 02 < / li>
                     < li > 03 < / li>
                     < li > 04 < / li>
                     < li > 05 < / li>
                 < / ul>
             < / div>
             < div class = ' img-switch-clear ' >
             < / div>
         < / div>
     < / div>
     < / form>
< / body>
< / html>

 

转载于:https://www.cnblogs.com/woody-wu/archive/2010/09/11/20100911-001.html

weixin_30273175
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jQuery实现图片轮播与切换功能
weixin_45539338的博客
06-20 1909
使用jQuery实现图片轮播与切换功能
jQuery实现图片轮播效果
ta_men的博客
03-19 3111
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签;
使用jQuery实现图片轮播
m0_60013147的博客
12-26 3272
图片轮播的基本原理如下图 可以设置overflow：hidden来隐藏除了要显示的图片之外的图片（即其他三张图） 以下为实现代码 index.css文件放置css代码 *{ margin: 0; padding: 0; } .container{ width: 100em; margin: 0 auto; } /* 所有图片div */ .myimage{ position: absolute; width: 400%; } /* 单张..
jQuery实现一个简单的轮播图
lincoco49的博客
05-15 4841
一.轮播图内容组成 包括：4张图片，图片标号，向左翻页，向右翻页的几个部分，如下图所示： 二.实现功能 1.加载页面后，4张图片默认从第一张图片开始轮播，索引值为1。 2.当把鼠标over到图片上时，图片定住不动。 3.点击图片索引值可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播. 4.点击【向左翻页】/【向右翻页】可以切换图片，鼠标离开图片后，图片从切换后的图片开始轮播...
JQuery实现图片轮换
MTT_SKY
10-05 1178
jQuery函数图片CSS [html] view plaincopy 这段时间在做公司网站,要用到图片的切换,从网上下载了一下JQuery实现图片切换的方法,再次做一个小小的总结。   网页中Html代码如下:(仅图片切换的代码) [html] view plaincopy div id="img">          ul>    
jQuery 实现图片轮播
cyanciel的专栏
01-07 985
自从学习jQuery之后，简直怀疑人生了。      因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞定了~~~      好啦，进入正题~~~      下面要使用jQuery实现图片轮播~~~       1.先把基础的背景搭起来：         最终使我们的图片在方框内进行轮播：         2.实现
Jquery 实现图片轮换
10-24
JQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务，因此非常适合用来实现图片轮换功能。本篇文章将探讨如何使用JQuery实现图片轮换，并通过给出的代码示例进行解析。 首先，我们...
jquery 图片轮换效果
12-01
在Web开发中，经常需要实现图片轮换的效果来吸引用户的注意力或展示一系列相关的图片。jQuery作为一个强大的JavaScript库，提供了简单易用的API，使得实现这种效果变得轻松。本篇文章将详细介绍如何使用jQuery实现一...
用jquery实现图片轮换
04-05
根据提供的文件信息，本文将详细解析如何利用jQuery实现图片轮换功能，并且通过鼠标点击或鼠标悬停在相应的数字上可以切换到对应的图片。 ### 一、理解需求 本项目的目标是创建一个简单的图片轮播插件。用户可以...
Jquery实现图片轮换效果，很大气！
09-19
jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理和动画效果等任务，因此用jQuery实现图片轮换效果非常常见。在这个项目中，我们看到的"Jquery实现图片轮换效果，很大气！"是一个利用jQuery库创建...
jQuery实现图片切换效果
01-22
本文实例为大家分享了jQuery实现图片切换效果的具体代码，供大家参考，具体内容如下 动画：点击左右按钮实现图片切换 jQuery方法：animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq() 动画效果： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>图片切换</title> <script src=../jquery.mi
Jquery实现图片切换
03-22
NULL 博文链接：https://makuixuan.iteye.com/blog/978614
换一批功能的实现jquery
05-19
获取数据源以后，利用jquery实现每次点击切换不同的展示内容，知道数据全部展示之后，再重新开始刷新抓取
jquery实现的各种图片自动轮换效果
02-08
现在各大网站所用到的图片轮换，带数字，和带方框的都有！很全的！强力推荐！
jquery图片轮换
09-15
本篇将详细介绍如何使用jQuery实现图片轮换效果。 首先，我们需要理解图片轮换的基本概念。图片轮换，也称为幻灯片或滑动展示，是指一组图片在一定时间内按照预设顺序自动切换显示，通常伴有过渡动画，让页面更加...
Jquery实现图片轮换效果
weixin_34255793的博客
06-23 249
最近在看jquery书时，看到一个比较有趣的东西：图片轮换。这里和大家分享下我看完后写的一个demo。实现图片轮换要完成三部分模块：html部分、css部分、jqury部分。下面分步详细说明。1.html部分： <div class="showContainer"> <div class="showHead"> ...
jquery实现图片轮换
xiaolifangfulei的博客
10-06 607
使用jquery编写的一个简单的图片轮换，主要还是根据图片的下标来进行图片轮换，代码简单易懂
利用JQuery实现轮播图
热门推荐
changeie的博客
03-22 4万+
上一篇文章写了利用初级JS实现无缝轮播图，但是实际写起来有点费劲，量有些大，如果改用jQuery写无缝轮播图的话，写起来比较便捷，而已逻辑比较清晰，简单，实现起来比较快捷，性能相对于初级JS来说也会高很多。以下为代码，供大家学习和参考。&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title...
Jquery实现图片切换的三种方法
qq_42328196的博客
07-20 1万+
获取数字的背景颜色 ，切换图片的按钮的背景颜色和实现按钮图片替换。 function back(num){ $(".adver").css({"background":"url('images/adver0"+num+".jpg')"}) $("li").css({"background":"black&qu
jquery实现商品以及图片分页功能
最新发布
06-01
要实现商品和图片的分页功能，可以使用jQuery插件，比如jPages、twbsPagination、pagination.js等。 首先，你需要在页面中引入jQuery和所选的分页插件的JS和CSS文件。然后，你需要准备一些数据，比如商品或图片的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值