JQuery回转图片展示（鼠标交互式）

最新推荐文章于 2024-09-23 13:41:34 发布

原创最新推荐文章于 2024-09-23 13:41:34 发布 · 680 阅读

0 ·

CC 4.0 BY-SA版权

JS或JQuery 同时被 2 个专栏收录

17 篇文章

订阅专栏

HTML和CSS

9 篇文章

订阅专栏

本文介绍了一种基于HTML、CSS和JavaScript实现的轮播图特效，包括动态加载图片、鼠标移动控制滚动速度以及响应式布局。通过设置容器宽度、图片宽度、滚动速度等参数，实现了流畅的图片轮播效果，并利用事件监听器根据鼠标位置调整滚动速度。

效果请看：http://www.thinkenter.net/

HTML:

<script type="text/javascript" src="/css_js/jquery182.js"></script>

<div id="runout">
   <div id="run1" class="rundiv">
      <div><a href="http://ano.cn" target="_blank"><img src="/te/image/swf/icon_ano.png"  /></a></div>
      <div><a href="http://www.jimbrothers.net" target="_blank"><img src="/te/image/swf/icon_jim.png" /></a></div>
      <div><a href="http://www.ccgrass.cn" target="_blank"><img src="/te/image/swf/icon_ccg.png" /></a></div>
      <div><a href="http://dision.com.cn" target="_blank"><img src="/te/image/swf/icon_dision.png" /></a></div>
      <div><a href="http://www.ecovacs.com" target="_blank"><img src="/te/image/swf/icon_ecovacs.png" /></a></div>
      <div><a href="http://hanwell.cc" target="_blank"><img src="/te/image/swf/icon_hw.png" /></a></div>
      <div><a href="http://www.joyea.cn" target="_blank"><img src="/te/image/swf/icon_j1.png" /></a></div>
      <div><a href="http://timethink.net" target="_blank"><img src="/te/image/swf/icon_tt.png" /></a></div>
      <div><a href="http://msxy.njnu.edu.cn" target="_blank"><img src="/te/image/swf/icon_nnu.png" /></a></div>  </div>
  <div id="run2" class="rundiv"></div>
</div>

CSS:

#runout {width:1000px; height:80px; margin:0px auto; overflow:hidden; position:relative;}
.rundiv { position:absolute; top:0px; left:0px;}
.rundiv div{float:left; padding:0px 10px; filter:Alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}
.rundiv div:hover{filter:none; -moz-opacity:1; opacity:1;}

JS:

$(window).load(function () {
            var runoutW = $("#runout").width(); //获取容器宽度
   var runW = 0;//run1的宽度，因为如果直接var runW = $("#run1").width();宽度会等于外框宽度，是错误的，所以用循环加出其宽度
   //设置移动块的宽度为其子元素的宽之和
   for(var i=0;i<=($("#run1 div").length);i++){
    runW += $("#run1 div").eq(i).width();
   };
   runW = runW + ($("#run1 div").length)*20;//每个子元素的左右padding值为10，如果有边还要加上边宽度


 if (runW > runoutW) {//如果内容够长

   $("#run1").width(runW);
   $("#run2").width(runW);
   $("#run2").html($("#run1").html()); //把run1的内容复制给run2
            //把每个图片垂直居中
   for(var i=0;i<=($(".rundiv img").length);i++){
    $(".rundiv img").eq(i).css({"padding-top": ($(".rundiv").height()-$(".rundiv img").eq(i).height())/2 +"px"});
   };
            var Speed = 2;  //初始速度2移动
            $("#runout").mousemove(function (e) {
                var mouseX = e.pageX - $(this).offset().left; //光标相对于容器的X位置
                Speed = Math.round((mouseX / runoutW) * 20 - 10); //把容器宽度分为20档，速度从-10到10
            });
            $("#runout").mouseout(function (e) {
                Speed = 2;
            });
            var timer = setInterval(runYou, 30); //每30毫秒执行一次runYou函数
            function runYou() {
                var run1L = $("#run1").position().left;
                var run2L = $("#run2").position().left;
                $("#run1").css({ left: run1L - Speed + "px" });
                if (run1L + runW <= runoutW) { //如run1向左移动脱离容器右边，把run2放到run1右边
                    $("#run2").css({ left: run1L + runW + "px" });
                };
                if (run1L >= 0) { //如run1向右移动脱离容器左边，把run2放到run1左边
                    $("#run2").css({ left: run1L - runW + "px" });
                };
                if (run1L + 2 * runW <= runoutW) { //如run2向左移动脱离容器右边，把run1放到run2右边
                    $("#run1").css({ left: run2L + runW + "px" });
                };
                if (run1L - runW >= 0) { //如run2向右移动脱离容器左边，把run1放到run2左边
                    $("#run1").css({ left: run2L - runW + "px" });
                };
            };
    } else {
        //不够长，就居中不动
        $("#run1").css({ "left": ((runoutW-runW)/2)+"px" });
    }
});