網頁搭建入門---輪播圖特效實現

原創 joker柒月 2020-04-24 17:05

目錄

 

輪播圖

html代碼

css代碼

效果圖

封裝byId()方法

圖片自動輪播

圖片自動輪播和停止

點擊圓點切換圖片

按鈕切換圖片

輪播圖代碼

二級菜單

html代碼

css代碼

二級菜單

完整代碼

輪播圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圖片輪播</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="main" id="main">
		<!-- 圖片輪播 -->
		<div class="banner" id="banner">
			<a href="">
				<div class="banner-slide slide1 slide-active">
					
				</div>
			</a>	
			<a href="">
				<div class="banner-slide slide2">
					
				</div>
			</a>	
			<a href="">
				<div class="banner-slide slide3">
					
				</div>
			</a>	
		</div>
		<!-- 上一張 下一張按鈕 -->
		<a href="javascript:void(0)" class="button prev" id="prev"></a>
		<a href="javascript:void(0)" class="button next" id="next"></a>
		<div class="dots" id="dots">
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

css代碼

*{
	margin: 0;
	padding:0;
}
ul{
	list-style: none;
}
body{
	font: "微軟雅黑";
	color: #14191e;
}

.main{
	width:1200px;
	height:460px;
	margin:30px auto;
	overflow: hidden;
	position:relative;
}

.banner{
	width:1200px;
	height: 460px;
	overflow: hidden;
	position: relative;
}

.banner-slide{
	width:1200px;
	height:460px;
	background-repeat: no-repeat;
	position: absolute;
	display:none;
}

.slide-active{
	display: block;
}

.slide1{
	background-image: url("../img/bg1.jpg");
}

.slide2{
	background-image: url("../img/bg2.jpg");
}

.slide3{
	background-image: url("../img/bg3.jpg");
}

.button{
	position: absolute;
	width:40px;
	height: 80px;
	left:244px;
	top:50%;
	margin-top:-40px;
	background:url("../img/arrow.png") no-repeat center center;
}
.button:hover{
	background-color: #333;
	opacity: 0.8;
	filter:alpha(opacity=80);
}
.prev{
	transform: rotate(180deg);
}
.next{
	left:auto;
	right:0;
}
.dots{
	position: absolute;
	bottom:24px;
	right:0px;
	text-align: right;
	padding-right: 24px;
	line-height: 12px;
}
.dots span{
	display: inline-block;
	width:12px;
	height:12px;
	border-radius: 50%;
	margin-left: 8px;
	background-color: rgba(7,17,27,0.4);
	cursor: pointer;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

.dots span.active{
	box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
	background-color: #ffffff;
}

效果圖

封裝byId()方法

//封裝一個代替getElementById()的方法
function byId(id){
	return typeof(id)==="string"?document.getElementById(id):id;
}

圖片自動輪播


function byId(id){
	return typeof(id)==="string"?document.getElementById(id):id;
}

//全局變量
var index =0;
timer=null;
pics=byId("banner").getElementsByTagName("div");
len=pics.length;

function slideImg(){
	var main = byId("main");

	//滑過清除定時器，離開繼續
	main.onmouseover =function(){
		//滑過清除定時器
	}
	main.onmouseout =function(){
		timer = setInterval(function(){
			index++;
			if(index>=len){
				index=0;
			}
			//切換圖片
			changeImg();
		},2000);
	}
}

//切換圖片
function changeImg(){
	//遍歷banner下多有的div，將其隱藏
	for(var i=0;i<len;i++){
		pics[i].style.display = "none"
	}
	//根據index索引找到當前div,將其顯示出來
	pics[index].style.display="block";
}

slideImg();

圖片自動輪播和停止

點擊圓點切換圖片

在slideImg(）中加入:

按鈕切換圖片

輪播圖代碼


function byId(id){
	return typeof(id)==="string"?document.getElementById(id):id;
}

//全局變量
var index =0;
timer = null;
pics = byId("banner").getElementsByTagName("div");
dots = byId("dots").getElementsByTagName("span");
prev = byId("prev");
next = byId("next");
len = pics.length;

function slideImg(){
	var main = byId("main");

	//滑過清除定時器，離開繼續
	main.onmouseover =function(){
		//滑過清除定時器
		if(timer) clearInterval(timer);
	}
	main.onmouseout =function(){
		timer = setInterval(function(){
			index++;
			if(index>=len){
				index=0;
			}
			//切換圖片
			changeImg();
		},2000);
	}

	//自動在main上觸發鼠標離開的事件
	main.onmouseout();

	//遍歷所有點擊,且綁定點擊事件1,點擊圓點切換圖片
	for(var d=0;d<len;d++){
		//給所有span添加一個id的屬性，值爲d，作爲當前span索引
		dots[d].id =d;
		dots[d].οnclick=function(){
			//改變index爲當前span的id值
			index =this.id;
			//調用changImg,實現切換圖片
			changeImg();
		}
	}
}
//上一張
prev.οnclick=function(){
	index--;
	if (index<0) index=len-1;
	changeImg();
}
//下一張
next.οnclick=function(){
	index++;
	if(index>len-1) index=0;
	changeImg();
}

//切換圖片
function changeImg(){
	//遍歷banner下多有的div及所有的span，將其div隱藏，將span清除類
	for(var i=0;i<len;i++){
		pics[i].style.display = "none";
		dots[i].className = "";
	}
	//根據index索引找到當前div,將其顯示出來
	pics[index].style.display="block";
	dots[index].className = "active";
}

slideImg();

二級菜單

html代碼

		<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="main" id="main">
		<div class="menu-box">
		</div>
		<!--內容-->
		<div class="sub-menu hide" id="sub-menu">
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">手機、配件</div>
					<div class="sub-row">
						<span class="bold mr10">手機通訊：</span>
						<a href="">手機</a>
						<span class="ml10 mr10">/</span>
						<a href="">手機維修</a>
						<span class="ml10 mr10">/</span>
						<a href="">以舊換新</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">手機配件：</span>
						<a href="">手機殼</a>
						<span class="ml10 mr10">/</span>
						<a href="">手機存儲卡</a>
						<span class="ml10 mr10">/</span>
						<a href="">數據線</a>
						<span class="ml10 mr10">/</span>
						<a href="">充電器</a>
						<span class="ml10 mr10">/</span>
						<a href="">電池</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">運營商：</span>
						<a href="">中國聯通</a>
						<span class="ml10 mr10">/</span>
						<a href="">中國移動</a>
						<span class="ml10 mr10">/</span>
						<a href="">中國電信</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">智能設備：</span>
						<a href="">智能手環</a>
						<span class="ml10 mr10">/</span>
						<a href="">智能家居</a>
						<span class="ml10 mr10">/</span>
						<a href="">智能手錶</a>
						<span class="ml10 mr10">/</span>
						<a href="">其他配件</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">娛樂：</span>
						<a href="">耳機</a>
						<span class="ml10 mr10">/</span>
						<a href="">音響</a>
						<span class="ml10 mr10">/</span>
						<a href="">收音機</a>
						<span class="ml10 mr10">/</span>
						<a href="">麥克風</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">電腦</div>
					<div class="sub-row">
                       <span class="bold mr10">電腦：</span>
                       <a href="">筆記本</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">平板</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">一體機</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">電腦配件：</span>
                       <a href="">顯示器</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">CPU</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">主板</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">硬盤</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">電源</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">顯卡</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">其他配件</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">遊戲設備：</span>
                       <a href="">遊戲機</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">耳機</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">遊戲軟件</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">網絡產品：</span>
                       <a href="">路由器</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">網絡機頂盒</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">交換機</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">存儲卡</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">網卡</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">外部產品：</span>
                       <a href="">鼠標</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">鍵盤</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">U盤</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">移動硬盤</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">鼠標墊</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">電腦清潔</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">家用電器</div>
					<div class="sub-row">
                       <span class="bold mr10">電視：</span>
                       <a href="">國產品牌</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">韓國品牌</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">歐美品牌</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">空調：</span>
                       <a href="">顯示器</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">櫃式</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">中央</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">壁掛式</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">冰箱：</span>
                       <a href="">多門</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">對開門</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">三門</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">雙門</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">洗衣機：</span>
                       <a href="">滾筒式洗衣機</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">迷你洗衣機</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">洗烘一體機</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">廚房電器：</span>
                       <a href="">油煙機</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">洗碗機</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">燃氣竈</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">傢俱</div>
					<div class="sub-row">
                       <span class="bold mr10">家紡：</span>
                       <a href="">被子</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">枕頭</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">四件套</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">牀墊</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">燈具：</span>
                       <a href="">檯燈</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">頂燈</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">節能燈</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">應急燈</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">廚具：</span>
                       <a href="">烹飪鍋具</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">餐具</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">菜板刀具</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">家裝：</span>
                       <a href="">地毯</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">沙發墊套</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">裝飾字畫</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">照片牆</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">窗簾</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">生活日用：</span>
                       <a href="">收納用品</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">浴室用品</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">雨傘雨衣</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 菜單 -->
		<div class="menu-content" id="menu-content">
			<div class="menu-item">
				<a href="">
					<span>手機、配件</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="">
					<span>電腦</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="">
					<span>家用電器</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="">
					<span>傢俱</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
		</div>
		<div class="banner" id="banner">
			<a href="">
				<div class="banner-slide slide1 slide-active"></div>
			</a>
			<a href="">
				<div class="banner-slide slide2"></div>
			</a>
			<a href="">
				<div class="banner-slide slide3"></div>
			</a>
		</div>
		<a href="javascript:void(0)" class="button prev" id="prev"></a>
		<a href="javascript:void(0)" class="button next" id="next"></a>
		<div class="dots" id="dots">
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<script src="js/script.js"></script>
</body>
</html>

css代碼

*{
	margin:0;
	padding:0;
}

@font-face {font-family: 'iconfont';
    src: url('../img/font/iconfont.eot'); 
    src: url('../img/font/iconfont.eot') format('embedded-opentype'),
    url('../img/font/iconfont.woff') format('woff'),
    url('../img/font/iconfont.ttf') format('truetype'),
    url('../img/font/iconfont.svg#iconfont') format('svg');
}

a{
	text-decoration: none;
}

a:link,a:visited{
	color:#5e5e5e;
}

body{
	font-family:"微軟雅黑";
	color: #14191e;
}

.main{
	width:1200px;
	height:460px;
	margin:30px auto;
	position:relative;
	overflow:hidden;
}

.banner{
	width:1200px;
	height:460px;
	overflow:hidden;
	position:relative;
}

.banner-slide{
	width:1200px;
	height:460px;
	background-repeat:no-repeat;
	float:left;
	display:none;
}

.slide-active{
	display:block;
}

.slide1{
	background-image:url(../img/bg1.jpg);
}

.slide2{
	background-image:url(../img/bg2.jpg);
}

.slide3{
	background-image:url(../img/bg3.jpg);
}

.button{
    position: absolute;
    transform:rotate(180deg);
    top: 50%;
    left: 244px;
    height: 80px;
    width: 40px;
    margin-top:-40px;
    background:url(../img/arrow.png) center center no-repeat;
}

.next{
	transform:rotate(0deg);
	left:auto;
	right:0;
}

.button:hover{
	background-color:#333;
	opacity: 0.8;
	filter:alpha(opacity=80);
}

.dots {
	position: absolute;
	bottom: 24px;
	right: 0;
	text-align: right;
	padding-right: 24px;
	line-height: 12px;
}

.dots span {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-left: 8px;
	background-color: rgba(7, 17, 27, 0.4);
	cursor: pointer;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

.dots span.active{
	box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
	background-color: #ffffff;
}

/* menu-box */
.menu-box {
	background:rgba(7, 17, 27, 0.5);
	opacity: 0.5;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 244px;
	height: 460px;
	z-index: 1;
}

.menu-content{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 244px;
	height: 460px;
	z-index: 2;
	padding-top: 6px;
}

.menu-item{
	height: 64px;
	line-height: 66px;
	font-size: 12px;
	cursor: pointer;
	padding: 0 24px;
	position: relative;
}

.menu-item a{
	display: block;
	color: #fff;
	padding: 0 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	height: 63px;
	font-size:16px;
}

.menu-item:last-child a{
	border-bottom:none;
}

.menu-item i{
	position: absolute;
	right: 32px;
	top: 24px;
	color: rgba(255,255,255,0.5);
	font-size: 24px;
    top: 2px;
    font-style:normal;
    font-weight:normal;
    font-family:"iconfont";
}

.sub-menu {
	border:1px solid #d9dde1;
	background:#fff;
	position: absolute;
	left: 244px;
	top: 0px;
	width: 730px;
	height: 458px;
	z-index: 581;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
}

.hide{
	display:none;
}

.inner-box{
	width:100%;
	height:100%;
	background:url(../img/fe.png) no-repeat;
	display:none;
}

.sub-inner-box{
	width: 652px;
	margin-left: 40px;
	overflow: hidden;
}

.title{
	color: #f01414;
	font-size: 16px;
	line-height: 16px;
	margin-top: 28px;
	font-weight: bold;
	margin-bottom: 30px;
}

.sub-row{
	margin-bottom:25px;
}

.bold{
	font-weight:700;
}

.mr10{
	margin-right:10px;
}

.ml10{
	margin-left:10px;
}

二級菜單

完整代碼

var timer = null,
    index = 0,
    pics = byId("banner").getElementsByTagName("div"),
    dots = byId("dots").getElementsByTagName("span"),
    size = pics.length,
    prev = byId("prev"),
    next = byId("next"),
    menuItems = byId("menu-content").getElementsByTagName("div"),
    subMenu = byId("sub-menu"),
    subItems = subMenu.getElementsByClassName("inner-box");

function byId(id){
	return typeof(id)==="string"?document.getElementById(id):id;
}

// 清除定時器,停止自動播放
function stopAutoPlay(){
	if(timer){
       clearInterval(timer);
	}
}

// 圖片自動輪播
function startAutoPlay(){
   timer = setInterval(function(){
       index++;
       if(index >= size){
          index = 0;
       }
       changeImg();
   },3000)
}

function changeImg(){
   for(var i=0,len=dots.length;i<len;i++){
       dots[i].className = "";
       pics[i].style.display = "none";
   }
   dots[index].className = "active";
   pics[index].style.display = "block";
}

function slideImg(){
    var main = byId("main");
    var banner = byId("banner");
    var menuContent = byId("menu-content");
    main.onmouseover = function(){
    	stopAutoPlay();
    }
    main.onmouseout = function(){
    	startAutoPlay();
    }
    main.onmouseout();

    // 點擊導航切換
    for(var i=0,len=dots.length;i<len;i++){
       dots[i].id = i;
       dots[i].onclick = function(){
           index = this.id;
           changeImg();
       }
    }

    // 下一張
    next.onclick = function(){
       index++;
       if(index>=size) index=0;
       changeImg();
    }

    // 上一張
    prev.onclick = function(){
       index--;
       if(index<0) index=size-1;
       changeImg();
    }

    // 菜單
    for(var m=0,mlen=menuItems.length;m<mlen;m++){
        menuItems[m].setAttribute("data-index",m);
        menuItems[m].onmouseover = function(){
            subMenu.className = "sub-menu";
            var idx = this.getAttribute("data-index");
            for(var j=0,jlen=subItems.length;j<jlen;j++){
               subItems[j].style.display = 'none';
               menuItems[j].style.background = "none";
            }
            subItems[idx].style.display = "block";
            menuItems[idx].style.background = "rgba(0,0,0,0.1)";
        }
    }

    subMenu.onmouseover = function(){
        this.className = "sub-menu";
    }

    subMenu.onmouseout = function(){
        this.className = "sub-menu hide";
    }

    menuContent.onmouseout = function(){
        subMenu.className = "sub-menu hide";
    }
}

slideImg();

 

 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

項目管理必備及MyBatis入門--MyBatis入門

joker柒月 2020-05-06 13:24:52

項目管理必備及MyBatis入門---工廠模式

joker柒月 2020-05-05 14:34:15

項目管理必備及MyBatis入門---Maven入門

joker柒月 2020-05-04 17:32:07

Java數據庫開發與實戰運用---留言板

joker柒月 2020-05-04 17:32:07

Java數據庫開發與實戰運用---反射

joker柒月 2020-05-04 04:39:08

Java數據庫開發與實戰運用---JDBC

joker柒月 2020-05-02 21:33:23

Java數據庫開發與實戰運用---Junit

joker柒月 2020-05-02 21:33:23

Java數據庫開發與實戰運用---MySQL基礎之數據類型與表的管理

joker柒月 2020-05-01 10:48:08

JavaWeb入門基礎---Linux下環境搭建及項目部署

joker柒月 2020-05-01 00:05:06

JavaWeb入門基礎---單點登錄

joker柒月 2020-05-01 00:05:06

JavaWeb入門基礎---JavaWeb基礎綜合案例

joker柒月 2020-05-01 00:05:06

JavaWeb入門基礎---Linux基礎

joker柒月 2020-05-01 00:05:06

JavaWeb入門基礎---監聽器

joker柒月 2020-04-30 00:09:43

JavaWeb入門基礎---IDEA

joker柒月 2020-04-30 00:09:43

JavaWeb入門基礎---驗證碼

joker柒月 2020-04-30 00:09:33