JS end: write a fully functional e-commerce rotation chart with JavaScript

Rotation chart: automatic rotation + click the corresponding point to switch + next + menu navigation
Let's talk about the idea first, and then the code:

First take the overall HTML layout, first rotate the map, and then click the corresponding small circle to jump to the previous one and the next one.
Then the layout of the left menu bar, the mouse moved up to display different contents.

Click on the style and position to replace the content with the CSS. Look at the picture first:

Finally, JS is used to realize the dynamic effect of rotation and page interaction. It mainly uses dom to obtain elements, and then traverse the array, simple loop judgment and the use of timer.
1. Complete the automatic rotation first
First, encapsulate a function byId that obtains elements through ID, so that it can be called later

function byId(id){  //id is a string type. Judge first, encapsulate and obtain the element
	return typeof(id)==="string"?document.getElementById(id):id;
}

Change picture function:

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

At the beginning, the picture rotation and clicking the corresponding decimal point want to write separately. Later, it is found that it can be put together, and the number of elements is the same. Then why write it again. So write it with the following.
2. Perfect and click the corresponding button
When the mouse slides in:

function slideImg(){
    var main = byId("main");
    var banner = byId("banner");
    var menuContent = byId("menu-content");
    main.onmouseover = function(){
    	stopAutoPlay();//Slide in to stop the rotation
    }
    main.onmouseout = function(){
    	startAutoPlay();
    }
    main.onmouseout();//Automatically trigger sliding on main

    // Click the dot navigation switch
    for(var i=0,len=dots.length;i<len;i++){
       dots[i].id = i;
       dots[i].onclick = function(){
           index = this.id;
           changeImg();//Click to call to switch pictures
       }
    }
}

3. Then go up and down

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

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

The complete code is later.

Nothing can be done perfectly at one time. Only by modifying it again and again can we continuously improve the function.
It's impossible to do html at once and then write css and js. It is realized by constantly trying and verifying based on experience.

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>
		<!--content-->
		<div class="sub-menu hide" id="sub-menu">
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">Mobile phones, accessories</div>
					<div class="sub-row">
						<span class="bold mr10">Mobile communication:</span>
						<a href="">mobile phone</a>
						<span class="ml10 mr10">/</span>
						<a href="">Cellphone Repairs</a>
						<span class="ml10 mr10">/</span>
						<a href="">Trade in old for new</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">Mobile Accessories:</span>
						<a href="">Mobile phone shell</a>
						<span class="ml10 mr10">/</span>
						<a href="">Mobile phone memory card</a>
						<span class="ml10 mr10">/</span>
						<a href="">data line</a>
						<span class="ml10 mr10">/</span>
						<a href="">Charger</a>
						<span class="ml10 mr10">/</span>
						<a href="">Battery</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">Operator:</span>
						<a href="">China Unicom</a>
						<span class="ml10 mr10">/</span>
						<a href="">China Mobile</a>
						<span class="ml10 mr10">/</span>
						<a href="">China Telecom</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">Smart devices:</span>
						<a href="">Smart Bracelet</a>
						<span class="ml10 mr10">/</span>
						<a href="">Smart home</a>
						<span class="ml10 mr10">/</span>
						<a href="">Intelligent Watch</a>
						<span class="ml10 mr10">/</span>
						<a href="">Other accessories</a>
					</div>
					<div class="sub-row">
						<span class="bold mr10">Entertainment:</span>
						<a href="">headset</a>
						<span class="ml10 mr10">/</span>
						<a href="">sound</a>
						<span class="ml10 mr10">/</span>
						<a href="">radio</a>
						<span class="ml10 mr10">/</span>
						<a href="">Microphone</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">computer</div>
					<div class="sub-row">
                       <span class="bold mr10">computer:</span>
                       <a href="">notebook</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Flat</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Integrated machine</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Computer accessories:</span>
                       <a href="">monitor</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">CPU</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">a main board</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Hard disk</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Power Supply</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Graphics card</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Other accessories</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Game equipment:</span>
                       <a href="">recreational machines</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">headset</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Game software</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Network products:</span>
                       <a href="">Router</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Network set top box</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Switch</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Memory card</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">network card</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">External products:</span>
                       <a href="">mouse</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">keyboard</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">U disc</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">mobile hard disk drive</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Mouse pad</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Computer cleaning</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">Household Electric Appliances</div>
					<div class="sub-row">
                       <span class="bold mr10">TV:</span>
                       <a href="">Domestic brand</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Korean brand</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">European and American brands</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">air conditioner:</span>
                       <a href="">monitor</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Cabinet type</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">center</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Wall mounted</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Refrigerator:</span>
                       <a href="">Multi door</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Opposite door</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Three doors</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Double door</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Washing machine:</span>
                       <a href="">Drum washing machine</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Mini washing machine</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Integrated washing and drying machine</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Kitchen appliances:</span>
                       <a href="">Lampblack machine</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">dishwasher</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Gas stove</a>
					</div>
				</div>
			</div>
			<div class="inner-box">
				<div class="sub-inner-box">
					<div class="title">furniture</div>
					<div class="sub-row">
                       <span class="bold mr10">Home textiles:</span>
                       <a href="">quilt</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">pillow</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Four piece suit</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">mattress</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">lamps and lanterns:</span>
                       <a href="">Desk lamp</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">top light</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">energy saving light</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">emergency lamp</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Kitchenware:</span>
                       <a href="">Cooking pot</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">tableware</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Chopping board cutter</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Home decoration:</span>
                       <a href="">carpet</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Sofa cushion cover</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Decorative calligraphy and painting</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Photo wall</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">window curtains</a>
					</div>
					<div class="sub-row">
                       <span class="bold mr10">Daily use:</span>
                       <a href="">Storage supplies</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Bathroom supplies</a>
                       <span class="ml10 mr10">/</span>
                       <a href="">Umbrella raincoat</a>
					</div>
				</div>
			</div>
		</div>
		<!-- Main menu -->
		<div class="menu-content" id="menu-content">
			<div class="menu-item">
				<a href="">
					<span>Mobile phones, accessories</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="">
					<span>computer</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="">
					<span>Household Electric Appliances</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href="">
					<span>furniture</span>
					<i class="icon">&#xe665;</i>
				</a>
			</div>
		</div>
		<!-- The rotation chart is realized first-->  
		<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>
		<!-- Up and down -->
		<a href="javascript:void(0)" class="button prev" id="prev"></a>
		<a href="javascript:void(0)" class="button next" id="next"></a>
		<!-- Dot navigation -->
		<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:"Microsoft YaHei ";
	color: #14191e;
}

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

.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;/*Let the left above not work, because left and right will choose left at the same time*/
	right:0;
}

.button:hover{
	/*background:#333;This won't work. The background color will cover the background picture above. Write the background color below*/
	background-color:#333;
	opacity: 0.8;
	filter:alpha(opacity=80);/*For browser compatibility*/
}

.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: #fff;
}

/* 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;/*Raise priority*/
}

.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;
}

JS

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){  //id is a string type. Judge first, encapsulate and obtain the element
	return typeof(id)==="string"?document.getElementById(id):id;
}

// Clear the timer and stop automatic playback
function stopAutoPlay(){
	if(timer){
       clearInterval(timer);//Clear timer
	}
}

// Automatic picture rotation
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";//Traverse all pics hidden
   }
   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();//Slide in to stop the rotation
    }
    main.onmouseout = function(){
    	startAutoPlay();
    }
    main.onmouseout();//Automatically trigger sliding on main

    // Click the dot navigation switch
    for(var i=0,len=dots.length;i<len;i++){
       dots[i].id = i;
       dots[i].onclick = function(){
           index = this.id;
           changeImg();//Click to call to switch pictures
       }
    }

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

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


    // menu
    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";
    }

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

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

slideImg();

Summary:
Although there are not many functions, it still takes about 2h to implement. In short, we should first have ideas and overall layout, then step by step, and then constantly adjust the code. Anyway, there are so many functions. We can only say that we should learn more. Practice makes perfect!
Word of the day: brilliant / significant / impressive / marvelous replace grand!

Tags: Javascript css3 html5 html css

Posted by bluntster on Fri, 13 May 2022 14:33:24 +0300