Jquery自动切换图片

最新推荐文章于 2020-10-13 12:27:45 发布
最新推荐文章于 2020-10-13 12:27:45 发布
阅读量478 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/f5187446/article/details/38644747
版权
<!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>无标题文档</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<link href="XjhHomePage.css" rel="stylesheet" type="text/css"/>
<script>
//jquery 图片自动切换
    $(function ()
{
var ul = $(".lxfscroll");
        var li = $(".lxfscroll li");
        var tli = $(".lxfscroll-title li");
var speed = 350;
        var autospeed = 3000;
var i = 1;
var index = 0;
var n = 0;
/*标题按钮事件 */
            function lxfscroll() {
                var index = tli.index($(this));
                tli.removeClass("hover");
                $(this).addClass("hover");


                ul.css({ "left": "0px" });
                li.css({ "left": "0px" });
                li.eq(index).css({ "z-index": i });
                li.eq(index).css({ "left": "540px" });
                ul.animate({ left: "-540px" }, speed);
                i++;


            };
            /* 自动轮换 */
            function autoroll() {
                if (n >= 5) {
                    n = 0;
                }
                tli.removeClass("hover");
                tli.eq(n).addClass("hover");
                ul.css({ "left": "0px" });
                li.css({ "left": "0px" });
                li.eq(n).css({ "z-index": i });
                li.eq(n).css({ "left": "540px" });


                n++;
                i++;
                timer = setTimeout(autoroll, autospeed);
                ul.animate({ left: "-540px" }, speed);
            };
            /* 鼠标悬停即停止自动轮换 */
            function stoproll() {
                li.hover(function () {
                    clearTimeout(timer);
                    n = $(this).prevAll().length + 1;
                }, function () {
                    timer = setTimeout(autoroll, autospeed);
                });
                tli.hover(function () {
                    clearTimeout(timer);
                    n = $(this).prevAll().length + 1;
                }, function () {
                    timer = setTimeout(autoroll, autospeed);
                });
            };
            tli.mouseenter(lxfscroll);
            autoroll();
            stoproll();
    });
</script>
</head>


<body>


                <div class="focus">
                    <ul class="lxfscroll">
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/8c78ce0c-4af6-4205-abc7-56f62ff4af6c.jpg" width="536" height="278">
                            
                            </a> </li> 
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/6019718e-6ab6-42ec-86e2-0fecc91626c7.jpg" width="536" height="278"></a> </li>
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/a7e5177d-acc2-4aa1-9f71-a6094e9eb8b8.jpg" width="536" height="278">
                        </a></li>
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/c9c3c50a-f1a9-4797-96d9-2f92c804f1f3.jpg" width="536" height="278"></a>
                        </li>
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/1.jpg" width="536" height="278"></a>
                        </li>
                    </ul>
                    <ul class="lxfscroll-title">
                      <li class="hover">1</li>
                        <li class="">2</li>
                        <li class="">3</li>
                        <li class="">4</li>
<li class="">5</li>
                  </ul>
</div>




</body>

</html>



/*XhjHomePage.css*/

.focus
{
    width: 536px;
    margin-left: 0;
    margin-right: auto;
    margin-top: 10px;
    position: relative;
    height: 300px; /*border: 4px solid #EFEFEF;*/
    overflow: hidden;
}
ul
{
margin:0px;
padding:0px;
}
.focus .lxfscroll
{
    /*width: 536px;
    margin-left: 0;
    margin-right: auto;*/
    margin-top: 0px;
    
    position: relative;
     /*border: 4px solid #EFEFEF;*/
    list-style: none;
}


.focus .lxfscroll li
{
    height: 300px;
    width: 536px;
    text-align: center;
    height: 278px;
    position: absolute;
    font-size: 40px;
    font-weight: bold;
}


.lxfscroll-title
{
    position:absolute;
    display:block;
    height: 7px;
    width: 536px;
    text-align: center;
    margin-top: 284px;
}




.focus .lxfscroll-title li
{
    width: 30px;
    height: 8px;
    margin: 0 10px;
    background-color: #e6e6e6;
    display: inline-block;
    _display: inline;
    overflow: hidden;
    vertical-align: top;
    zoom: 1;
    line-height: 40px;
    cursor: pointer;
}


.focus .lxfscroll-title .hover
{
    background-color: #b01b15;
}


xiehuihuang2012
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery进行图片切换
weixin_44886806的博客
05-08 3974
图片切换用JavaScript来写的话代码稍微有点多，如果用jQuery的话就简单的多了。 首先先写好HTML和css的代码： HTML： <div id="box"> <img src="../0bed5d59f12720752019fc2b8ad48993.jpg" alt=""> <img src="../1c34660a6917f03b1249f8a1923d36ef.jpg" alt=""> <img src="../83f4b8d
Jquery实现图片切换
03-22
NULL 博文链接：https://makuixuan.iteye.com/blog/978614
JQuery实现图片切换（自动切换+手动切换）
热门推荐
点滴汇聚，智在积累。——Danny
01-31 2万+
JQuery实现图片切换（自动切换+手动切换）
jq实现自动轮播图效果
caimaomaocai的博客
04-15 2万+
自动轮播图思路：    1、设置定时器和自动切换函数，设置底部button的索引值。    2、点击左右箭头时，定时器清除，手动切换图片。当离开时，自动播放    3、点击底部button的时候，定时器清除，手动切换图片。当离开时，自动播放&lt;div id="container"&gt; &lt;a class="item" href="#"&gt;&lt;img sr...
jquery实现图片自动切换
11-12
这是用jquery实现的图片自动切换效果，包括用鼠标划过时图片切换，自动切换等效果的实现。
jquery手动自动图片切换.rar_jquery手动自动图片切换
09-23
jquery手动自动图片切换是一款多屏幕切换的焦点图特效。
jQuery上下自动切换图片相册.zip_jQuery上下自动切换图片相册
09-20
一款jQuery实现的上下自动切换图片的相册代码。 适用浏览器
jQuery自动或手动图片切换效果
11-27
 在浏览各大商城网站的时候，或者某些网站的首页，都会展示与本网站相关的一些实时切换的图片， 本文就给大家分享一个用jQuery实现图片自动切换的例子。  主页核心代码（Default.aspx）： <!DOCTYPE html> ...
jquery自动切换图片,带个数标签,带左右按钮
02-06
jquery自动切换图片,带个数标签,带左右按钮,纯手工打造,可轻松更改图片数量
jQuery动态图片定时切换.zip
07-04
jQuery动态图片定时切换是一款基于jquery实现的多张图片组合动态定时切换的特效代码。
jquery自动切换图片
baidu_27055905的博客
06-10 493
/*CSS*/ .BannerBOX{width:100%; height:425px;  position:relative; overflow:hidden; margin:0 auto; min-width:1100px;} .cdl li{ width:20px; height:20px; float:left;  list-style:none; background-image:u
jq多张图片切换src
qq_45727750的博客
10-10 856
<div class="slider_nav"> <ul> <li><a href="#"><img src="images/1.jpg" alt="" src_2="images/2.jpg" /></a></li> <li><a href="#"><...
Jquery实现图片切换的三种方法
qq_42328196的博客
07-20 1万+
获取数字的背景颜色 ，切换图片的按钮的背景颜色和实现按钮图片替换。 function back(num){ $(".adver").css({"background":"url('images/adver0"+num+".jpg')"}) $("li").css({"background":"black&qu
jquery 实现鼠标经过 切换图片效果
liu709127859的专栏
04-10 9709
知识点：1 hover事件的两个方法，一个是进入发生的事件，一个是离开触发的事件。只写一个默认为两个事件相同2 jquery css attr 的使用&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Title&lt;/tit
JQuery自动更换背景图
weixin_44167504的博客
10-13 1022
JQuery自动更换背景图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更换背景图</title> <style> #box { width
jQuery实现图片切换
Lin 的博客
05-02 2439
在学习使用$()来实现jQuery伪数组的遍历过程中，突然希望实现在一个固定的div框中，通过鼠标点击不同的标题来查看对应的图片，做到对应的图片的隐藏和展示功能。通过下标的遍历来实现。 设置选择项： <ul id="tab"> <li>图片一</li> <li>图片二</li> <li>图片三</li> &...
js实现图片自动切换
fangyuwuzhu的博客
09-18 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;图片切换&lt;/title&gt;     &lt;style type="text/css"&gt;         .
jQuery 实现图片切换
稻香的专栏
10-23 784
$.fn.imgtransition = function(o){ var defaults = { speed : 3000, animate : 1000 }; o = $.extend(defaults, o); return this.each(function(){ var arr_e = $("li", this); function shownext(
做jQuery图片切换效果
最新发布
03-30
以下是一个简单的jQuery图片切换效果的实现： HTML代码： ``` ``` CSS代码： ``` .slider { position: relative; width: 500px; height: 300px; overflow: hidden; } .slider img { position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值