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>
相關文章
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- CSS滑鼠懸浮圖片模糊切換效果CSS
- 簡單介紹Vue實現滑鼠懸浮切換圖片srcVue
- 用原生JS實現 圖片輪播切換 功能JS
- 成品直播原始碼,輪播圖無縫切換以及自動懸停原始碼
- CSS滑鼠移動圖片切換功能CSS
- css滑鼠懸浮切換圖片滑鼠離開又恢復預設CSS
- JQuery實現圖片輪播無縫滾動jQuery
- 手動實現輪播圖(二):迴圈滾動、定時切換與指示器
- 滑鼠懸浮遮罩層動畫方式滑動切換效果遮罩動畫
- CSS3實現的滑鼠懸浮廣告牌翻轉切換效果CSSS3
- css滑鼠浮劃過切換按鈕背景圖片CSS
- WPF手動實現切換頁面
- jquery Banner 圖片自動輪換顯示jQuery
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- 頁面圖片自動滾動
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- 解決ionic2/ionic3輪播圖切換頁面或者點選過後不自動輪圖
- (轉)jquery圖片左右滾動jQuery
- 使用jQuery實現的平滑滾動輪播圖jQuery
- jQuery手風琴圖片切換jQuery
- css實現滑鼠滑過切換背景圖片程式碼CSS
- 安卓-自動切換APP圖示安卓APP
- jquery實現的具有漸變效果的圖片切換jQuery
- JQuery實現簡單美觀的圖片切換效果jQuery
- switchable圖片切換
- jQuery 圖片垂直切換效果詳解jQuery
- CSS實現頁面切換時的滑動效果CSS
- 實現隨著滾動條滾動,導航會自動切換的效果
- JS動態相簿--隨滑鼠所至切換封面圖JS
- ubuntu命令切換滑鼠左右鍵Ubuntu
- MVVM框架下實現左右滑動切換tabMVVM框架
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- (轉)jquery實現圖片輪播jQuery
- vue swiper 元件切換tab後自動輪播失效,手動滑一下才自動輪播生效的問題Vue元件
- 直播軟體app開發,左右自動滑動的輪播圖廣告APP
- jQuery滑鼠懸浮當前圖片高亮其他圖片灰暗效果jQuery