2020 用html jQuery实现广告轮播图自动切换滚动页面鼠标悬浮下标且左右切换图片

用html jQuery实现广告轮播图自动切换滚动页面

运行图片

代码

<!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" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>*{margin:0px;padding:0px;}#d1{border : 1px solid #aaaaaa;margin-left:200px;margin-top:40px;width:970px; height:300px; overflow:hidden;position:relative;}#adv,#num{position:absolute;}ul li{list-style:none;display:inline;}ul img{width:970px; height:300px;display:block;}#num{right:300px;bottom:5px;}#num li{float: left;color: blue;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;}.on{line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color:navajowhite;font-weight: bold;}#main{text-align:center; width: 1014px; margin: 0 auto;}
#adver{position:absolute;left:10px;top:30px;z-index:2;
}
</style><script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">$(document).ready(function(){var adverTop=parseInt($("#adver").css("top"));var adverLeft=parseInt($("#adver").css("left"));$(window).scroll(function(){var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离$("#adver").offset({top:scrollTop+adverTop});$("#adver").offset({left:scrollLeft+adverLeft});});});$(function(){$('#num li').mouseenter(function(){//取得光标指向的li的下标var index = $('#num li').index(this);//滚动图片showImage(index);}).eq(0).mouseenter();//鼠标进来的时候显示第一个var i = 0;var taskId;$('#d1').hover(function(){//光标进入，停止滚动clearInterval(taskId);},function(){//设置间隔时间taskId = setInterval(function(){showImage(i);i++;if(i==5){//如果是最后i = 0;//回到首张}},1000);//设置1秒}).mouseleave();//光标离开，开始滚动});function showImage(index){$('#adv').stop(true).animate({'top':-index * 300},1000);//stop(true):清空当前累积的所有的动画。//取选中索引为index的来加样式on高亮且其余li同级元素来移除没有高亮光标$('#num li').eq(index).addClass('on').siblings().removeClass('on');}
</script>
</head>
<body><div id="d1"><ul id="adv"><li><img src="img/adver01.jpg"/></li><li><img src="img/adver02.jpg"/></li><li><img src="img/adver03.jpg"/></li><li><img src="img/adver04.jpg"/></li><li><img src="img/adver05.jpg"/></li></ul><ul id="num"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><div id="main"><img src="img/main1.jpg"/><img src="img/main2.jpg"/><img src="img/main3.jpg"/></div>
</body>
</html>

2020 用html jQuery实现广告轮播图自动切换滚动页面鼠标悬浮下标且左右切换图片相关推荐

JQuery实现圆点轮播图自动播放
用jquery实现轮播图实现之后的效果实现思路 1,每次只显示一张图片其他的图片隐藏起来 2,每一次轮播相应位置的小圆点跟着变色 3,鼠标移入小圆点时显示相应的图片源代码 <!DOCTY ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
jQuery实现异形轮播图
思路: 异形轮播图与普通轮播图不同的一点,是异形轮播图一次性展示多个图片,且图片大小的位置会动态变化. 以往我的处理办法都是直接给要展示的图片动态的添加一个class类, 简单粗暴.这次我在很多地方都 ...
html新闻轮播插件,jQuery新闻类轮播图插件sliderBox
sliderBox.js是一款jQuery新闻类轮播图插件.该jQuery新闻类轮播图插件可以创建兼容ie8.带缩略图导航.以及多种过渡效果的轮播图. 使用方法在页面中引入jQuery.slider ...
Axure：实现跳转广告轮播图
功能实现:当打开app时,显示app的广告轮播图 1.元件需求三个图片.一个动态面板.三个动态模板的状态:state1.state2.state3 2.交互将三个 ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
jQuery实现碎片轮播图
碎片轮播图: 碎片轮播图顾名思义就是像碎片拼接而成的轮播图,若干个小方块碎片通过动画效果拼接成一张完整的图片. 实现原理: 轮播图的通常功能,都包括这几个部分,核心就是通过图片的索引值控制页面切换: ...
html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
Android弧形广告图,简单封装弧形广告轮播图（ViewPager+贝塞尔曲线）
前言通过ViewPager和贝塞尔曲线实现了一个弧形广告轮播图. 效果图弧形ViewPager 实现方法想要实现这个效果,现在几行代码就可以了: Step 1. Add it in your r ...
【原生js】详解轮播图之无缝滚动
前言:轮播图,是网站首页中最常见的一种图片切换特效,作为前端开发者,我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播,省事简单.所以我今天想介绍一下原生js代码实现的图片轮播. 结 ...

2020 用html jQuery实现广告轮播图自动切换滚动页面鼠标悬浮下标且左右切换图片

用html jQuery实现广告轮播图自动切换滚动页面

2020 用html jQuery实现广告轮播图自动切换滚动页面鼠标悬浮下标且左右切换图片相关推荐

最新文章

热门文章

2020 用html jQuery实现广告轮播图自动切换 滚动页面 鼠标悬浮下标且左右切换图片

用html jQuery实现广告轮播图自动切换 滚动页面

2020 用html jQuery实现广告轮播图自动切换 滚动页面 鼠标悬浮下标且左右切换图片相关推荐

最新文章

热门文章

2020 用html jQuery实现广告轮播图自动切换滚动页面鼠标悬浮下标且左右切换图片

用html jQuery实现广告轮播图自动切换滚动页面

2020 用html jQuery实现广告轮播图自动切换滚动页面鼠标悬浮下标且左右切换图片相关推荐