jQuery项目总结10.6

最新推荐文章于 2024-08-12 00:32:33 发布

归-途

最新推荐文章于 2024-08-12 00:32:33 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/w1824575989/article/details/108949964

版权

这段代码展示了如何使用jQuery实现轮播图、新闻滚动和背景颜色切换等网页交互功能。包括图片滑动、导航菜单收起和下拉列表等动态效果。通过监听鼠标事件，实现了元素的显示隐藏、动画滚动以及定时器控制的内容切换。

摘要由CSDN通过智能技术生成

<script src="js/jquery-1.7.2.js"></script>

<script type="text/javascript">
   //轮播图
   $(function () {
   var index = 0;
   var timeId;
   //获取图片滚动的高度
   var height = $(".ad").height();
   //页面加载完毕让其下标为1的li高亮显示
   $(".num li:first").addClass("on");
   //当鼠标移动到li元素上时，当前li元素高亮显示
   $(".num li").mouseover(function () {
   //获取当前鼠标放入的li元素所在的索引位置
   index = $(".num li").index($(this));
   //执行滚动方法，传index进来就是当用户滑到第几张的时候就显示第几张
   showImg(index);
   });
   //当鼠标放入图片上时，停止滚动（清除定时器），鼠标离开，开始滚动（启动定时器）
   $(".ad").hover(function () {
   //清除定时器
   clearInterval(timeId);
   }, function () {
   //启动定时器
   timeId = setInterval(function () {
   index++;
   if (index == 5) {
   index = 0;
   }
   showImg(index);
   }, 2000);
   }).trigger("mouseout");
   function showImg(index) {
   //获取图片滚动高度
   var height = $(".ad").height();
   //根据当前索引使图片移动到对应的距离高度
   $(".slider").animate({ top: -index * height }, 1000);
   $(".num li").eq(index).addClass("on").siblings().removeClass("on");
   };
   });
   //最新动态新闻滚动
   $(function () {
var $this = $(".scrollNews");
var scrollTimer;
$this.hover(function () {
clearInterval(scrollTimer);
}, function () {
scrollTimer = setInterval(function () {
scrollNews($this);
}, 1000);
}).trigger("mouseleave");
function scrollNews(obj) {
var $self = obj.find("ul:first");
var lineHeight = $self.find("li:first").height(); //获取行高
$self.animate({ "marginTop": -lineHeight + "px" }, 600, function () {
$self.css({ marginTop: 0 }).find("li:first").appendTo($self); //appendTo能直接移动元素
})
       };

   });
//改变背景颜色
$(function () {
$("#skin li").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
var cssName = $(this).attr("id");
//alert(cssName)
$("#cssfile").attr("href", "styles/skin/" + cssName + ".css")
})
});
   //图片滑动
   $(function () {
       var mysw = $(".prolist").width();
//获取子元素所在区域宽度
var i = 0
$(".goLeft").click(function () {
i++
//点击i加1
if (i < 3) {
$(".prolist_content").css("left", -(mysw * i));
//子元素集合向左移动，距离为子元素的宽度乘以i。
} else {
i = 0;
$(".prolist_content").css("left", -(mysw * i));
//超出可移动范围后点击不再移动。
}
});
$(".goRight").click(function () {
i--
//点击i减1
if (i >= 0) {
$(".prolist_content").css("left", -(mysw * i));
//子元素集合向右移动，距离为子元素的宽度乘以i。
} else {
i = 2;
$(".prolist_content").css("left", -(mysw * i));
//超出可移动范围后点击不再移动。最前几个子元素被显示时i为0。
}
       });



   })
//导航菜单收起
$(function () {
$(".module_up_down").toggle(function () {
var $self = $(this);
//prev() 方法返回被选元素的前一个同级元素。
$self.prev().slideToggle(600, function () {
$("img", $self).attr("src", "images/up.gif");
});
}, function () {
var $self = $(this);
$self.prev().slideToggle(600, function () {
$("img", $self).attr("src", "images/down.gif");
});
});
//下拉列表
$(".m-treeview>li").click(function () {
var cl = $(this).attr("class");
if (cl == "m-collapsed")
$(this).attr("class", "m-expanded");
else if (cl == "m-expanded")
$(this).attr("class", "m-collapsed");
       }

})
</script>