jquery实现图片自动轮换效果(兼容IE6,IE7)

最新推荐文章于 2021-06-16 05:07:12 发布
最新推荐文章于 2021-06-16 05:07:12 发布
阅读量5.4k 收藏 1
点赞数
分类专栏： js 文章标签： js 图片轮换 ie6 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h348592532/article/details/16980595
版权

总是用别人的例子，出错了不知道怎么改，就自己亲自写了一个，有注释，通俗易懂，希望能跟大家一起沟通交流

目录结构如下：

源代码下载地址：http://pan.baidu.com/s/1zkY5i    (下载即可打开)

IE7下效果图如下:

源码下载地址:http://pan.baidu.com/s/1EcqJO   (需要复制网址打开)

domo.html代码如下：

.................................................................................................................................................................................................................

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/1.css" />
<title>图片轮播</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
    /*初始化是向右转动*/
    var dir = "right";
    var timer;
    var speed = 1000;

    function direct(old_dir) {
        dir = old_dir;
        if (dir == "right") {
            /*清除计时器*/
            window.clearInterval(timer);
            /*计时器*/
            timer = window.setInterval("right()", speed);
        }
        if (dir == "left") {
            /*清除计时器*/
            window.clearInterval(timer);
            /*计时器*/
            timer = window.setInterval("left()", speed);
        }
    }

    /*向左滚动*/
    function left() {
        var left = $("#pic").css("left");
        var left1 = parseInt(left) + 230;
        if (left1 > 0) {
            left1 = -1840;
        }
        k = left1 / -230;
        $("#pic").css("left", left1);
        $("#banner_btn li").siblings().removeClass("current");
        $("#banner_btn li").eq(k).addClass("current");
    }

    /*向右滚动*/
    function right() {
        var left = $("#pic").css("left");
        var left1 = parseInt(left) - 230;
        if (left1 < -1840) {
            left1 = 0;
        }
        k = left1 / -230;
        $("#pic").css("left", left1);
        $("#banner_btn li").siblings().removeClass("current");
        $("#banner_btn li").eq(k).addClass("current");
    }

    /*页面初始化执行*/
    $(function() {
        /*自动滚动*/
        direct(dir);
        /*鼠标移到数字上切换图片*/
        $("#banner_btn li").hover(function() {
            window.clearInterval(timer);
            /*跟自己同级别的所有节点*/
            $(this).siblings().removeClass("current");
            $(this).addClass("current");
            var i = $(this).index();
            var j = -230 * parseInt(i);
            $("#pic").css("left", j);
        });
        /*鼠标离开数字时继续滚动*/
        $("#banner_btn li").mouseleave(function() {
            direct(dir);
        });
        /*鼠标移到图片上停止滚动*/
        $(".pic li img").hover(function() {
            window.clearInterval(timer);
        });
        /*鼠标移开继续滚动*/
        $(".pic li img").mouseleave(function() {
            direct(dir);
        });
    });
</script>
</head>
<body>
    <div class="a">
        <pre class="pre" onClick="direct('left');">pre</pre>
        <pre class="next" onClick="direct('right');">next</pre>
        <div class="pic1">
            <ul class="pic" id="pic">
                <li><img src="images/13691345082.jpg"></li>
                <li><img src="images/1353485118249.jpg"></li>
                <li><img src="images/1355742153253.jpg"></li>
                <li><img src="images/1363943359756.jpg"></li>
                <li><img src="images/1364279216643.jpg"></li>
                <li><img src="images/1366770146652.jpg"></li>
                <li><img src="images/1367138383721.jpg"></li>
                <li><img src="images/1368518565890.jpg"></li>
                <li><img src="images/1372038703930.jpg"></li>
            </ul>
        </div>
        <ul id="banner_btn" class="points">
            <!-- creatBtnli() -->
            <li num="0" class="current">1</li>
            <li num="1" class="">2</li>
            <li num="2" class="">3</li>
            <li num="3" class="">4</li>
            <li num="4" class="">5</li>
            <li num="5" class="">6</li>
            <li num="6" class="">7</li>
            <li num="7" class="">8</li>
            <li num="8" class="">9</li>
            <!-- <li num="9" class="">9</li> -->
        </ul>
    </div>

</body>
</html>


............................................................................................................................................

css代码如下：

............................................................................................................................................

body{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.a {
    width: 800px;
    margin: 0 auto;
    position: relative;
}
.a .pre{
    background: url("images/20120606wwwzzjsnet_40.png") no-repeat;
    text-indent: -999px;
    width: 39px;
    height: 81px;
    position: absolute;
    left: 150px;
    top:150px;
    cursor: pointer;
}
.a .next{
    background: url("images/20120606wwwzzjsnet_40.png") no-repeat 100%;
    text-indent: -999px;
    width: 39px;
    height: 81px;
    position: absolute;
    right: 150px;
    top:150px;
    cursor: pointer;
}
.a .pic1{
    width: 230px;
    height: 350px;
    overflow: hidden;
    margin: 0 auto;
    position:relative;

top:0;

left:0;
}
.a .pic{
    left:0px;
    width: 10000px;
    position: relative;
}
.a .pic li{
    float: left;
    
}
.a .points{
    margin: 0 auto;
    width: 270px;
    height:30px;
}
.a .points li{
    float: left;
    padding: 1px 7px;
    border: 1px solid;
    margin: 3px;
    cursor: pointer;
}
.a .points .current{
    background-color: #DB5C49;
}


-----------------------------------------------------------------------------------------------------------------

源代码下载地址：http://pan.baidu.com/s/1zkY5i    (下载即可打开) 欢迎大家共同沟通学习

送人玫瑰手留余香
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jQuery图文卡片列表左右滑动轮播代码
09-25
一款简单实用的jQuery+CSS3响应式图文卡片布局轮播切换特效，自适应电脑和手机端浏览。
代码非常简洁的焦点图切换（兼容IE6+，chrome，火狐，opera等）
06-29
代码非常简洁的焦点图左右切换，兼容IE6+，Chrome，火狐，Opera等所有浏览器。
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
12-12
代码如下: <!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″ /> <meta name=”author” content=”Nancle from CAU CS101″
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
12-10
本屌丝最近工作要求重写网站所有代码，so…极其蛋疼的事情出现了，管我的人要求不能用网上的插件，oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能： 需求：网页遮罩层/弹出层，兼容IE6 幸好本屌丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。 屁话不多放，无码无真相！ 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.0 *******************************/ ;(function($){ $.fn.l
js制作返回顶部、二级菜单、选项卡、轮播图
04-22
原生js制作返回顶部、二级菜单、选项卡、轮播图
适用于各个浏览器并兼任ie7以上的轮播图
汉堡请不要欺负面条
03-06 2801
这是使用绝对定位来做 轮播图 body,ul,li{margin: 0;padding: 0;} /*幻灯片*/ .bannerwarp{ width: 100%; height: 600px; position: relative;
兼容ie及以上 轮播图
Downiy的博客
03-31 814
关于轮播图 原生JS 兼容IE7+等各大浏览器 左右箭头切换 点击索引切换 只需修改图片路径 html <div class="all" id="box"> <div class="screen" id="screen"> <ul> <li> ...
html轮播图兼容ie8,兼容IE8的响应式带标题带缩略图的图片轮播
weixin_35002851的博客
06-16 221
CSS语言：CSSSCSS确定* {margin: 0;padding: 0;}html {background: #222;}body {_width: 70%;color: #888;font: 14px/20px Helvetica, Arial, sans-serif;margin: 20px auto 0;max-width: 800px;text-align: center;text-...
多个jquery图片轮播效果集合兼容IE6以上所有主流浏览器
04-23
多个jquery图片轮播效果集合，兼容所有主流浏览器，兼容IE6-IE11,代码易看懂，注释很齐全，非常的实用。 让你下得安心，用的放心！
jquery图片轮播兼容IE
01-20
jquery实现的三种图片轮播，兼容IE浏览器
jq 兼容ie7 8的图片轮播
01-03
jq 兼容ie7 8的图片轮播 里面有左右滚动 和上下滚动的例子 希望大家支持下
兼容ie6的一个轮播图
01-09
兼容ie6的轮播图片和位置的设置这是我自己做的一个简单的代码原图，ie6是一个比较难兼容，但是却又很多用户在使用
图片瀑布流jQuery代码兼容ie6+主流浏览器
04-28
兼容ie6、ie7、ie8、ie9、Chrome、Firefox等主流浏览器，轻量简洁容易上手使用，是web开发、学习的必备之选。
带左右箭头按钮的js循环滚动图片特效代码
01-22
兼容IE7+ IE6图片格式改下 带左右箭头按钮的js循环滚动图片特效代码
基于jquery的返回顶部效果（兼容IE6）
01-19
最近也在学jquery，就顺便记录一下了。 HTML 代码如下: ”scroll”></div> [removed][removed] [removed][removed] CSS 代码如下: .scroll{ background:url(../image/scroll.gif) no-repeat cen
jQuery实现可兼容IE6的滚动监听功能
12-04
本文实例讲述了jQuery实现可兼容IE6的滚动监听功能。分享给大家供大家参考，具体如下： 其实这东西本打算用原生的javascript来写，但是原生的javascript取class与监听滚动条的滚动过于麻烦，因此上了jQuery，没关系...
js数字过长导致前后端数字不一样（真是js的一个大坑）
生活要继续的专栏
12-04 8938
function send(){ var users=[1000000013810001001]; var data={ users:users, flag:true }; var address="192.168.30.237:10101"; alert
jquery实现文件树目录、折叠目录树代码（兼容IE6,IE7）
生活要继续的专栏
11-26 8511
例子简单，个人爱好，如有不足，可以共同探讨 foder.html代码如下 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> html> head> meta http-equiv="Content-Type
使用jquery实现图片轮播效果
最新发布
04-05
以下是一个简单的使用jquery实现图片轮播效果的例子： HTML代码： ```html <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` CSS代码： ```css .slider { position: relative; width: 500px; height: 300px; overflow: hidden; } .slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slider img.active { opacity: 1; } ``` jQuery代码： ```javascript $(document).ready(function() { // 默认显示第一张图片 $('.slider img:first').addClass('active'); // 自动轮播 setInterval(function() { var $active = $('.slider img.active'); var $next = $active.next(); if (!$next.length) { $next = $('.slider img:first'); } $active.removeClass('active'); $next.addClass('active'); }, 2000); }); ``` 解释： 首先，我们将所有图片放在一个 div 容器中，并设置容器的宽度和高度。然后，我们使用 CSS 将所有图片设置为绝对定位，并设置它们的透明度为 0。在当前活动的图片上添加一个“active”类，以便我们可以在 jQuery 中轻松地找到它。 在 jQuery 中，我们为轮播设置了一个定时器，每隔 2 秒钟就会执行一次。在每次执行时，我们找到当前活动的图片并将其“active”类删除。然后，我们找到下一张图片并将其添加到“active”类中。如果我们到达了最后一张图片，我们将下一张图片设置为第一张图片。 最后，我们在文档准备就绪时设置第一张图片为活动图片，并开始自动轮播。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值