用JavaScript制作天猫轮播图

最新推荐文章于 2022-09-19 09:26:01 发布

空谷丶幽兰

最新推荐文章于 2022-09-19 09:26:01 发布

阅读量660

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/103179482

版权

JavaScript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

**pacity和rgba的区别：**
1. 都可以设置透明的效果,
2. 用opacity来设置透明效果时文本的内容也会
   变透明，而用rgba来设置是文本的内容不会改变。例如：opacity:0.3;
3. rgba语法为（r,g,b,a），r为红色值，g为绿色值 b为蓝色值，
  a为alpha（透明度）， 值为0 ~ 1之间的小数，0.0 （完全透明）
  到 1.0（完全不透明）例如：background-color:rgba(0,0,0,0.3);

在这里插入图片描述

实现效果：

      1.鼠标放在图片内部时，显示两个箭头，鼠标离开时不显示
      2.鼠标点击下方导航条时，可以移动到达数字对应的第几个图片
      3.点击左右两个箭头图片移动，并且图片移动到第几个时，
        导航条中的数字对应第几个图片

实现步骤：

   1.先给两个箭头（块级元素）设置onmouseover和onmouseout事件
   2.动态生成轮播图的导航元素，可以根据图片的个数来生成（或者li
     标签的个数,li标签对应一个img标签）， 并且生成对应的数字放在新
     生成的li标签中
   3.给每一个生成的li标签增加一个index属性和起始位置的current属性，
      index属性用于点击时获取序号，
   4.根据“排它原理”，给新生成的li标签设置onclick事件，鼠标点击该
      标签时设置current属性同时获取index里的值，将这个获取的值乘负
      的图片的宽度(这里的图片宽度为800， 这里为index的值*-800）
      来使图片移动.
   5.给两个箭头增加缓动动画效果，同时设置导航栏中的按钮为被选中项。

实现细节：

  1.使用background-color:rgba(0,0,0,0,0.3)，来设置span标签的半透明，
    内容不是半透明,这样不影响文本内容
  2.	
   var btn = document.getElementById('btn');
   var box = document.getElementById('box');
   	 //1.声明变量leader，幷赋初值为0，它用来计算盒子每一次移动到的位置
   	 //2.声明变量target，并赋初值为0，它的作用是用来设置盒子移动的终点，
   	 //3.在页面加载时启动定时器，并写好缓动动画公式
   	 //4.在触发缓动动画效果的事件中，设定target终点的坐标
   	 var leader = 0;
   	 var target = 0;
    setInterval(function(){
    	leader = leader + (target - leader) / 10;
    	box.style.left = leader + 'px';
    },50)
   	 btn.onclick = function(){
        target = 1000;
   	 }
    用来设置缓动动画

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 800px;
				height: 300px;
				position: relative;
				overflow: hidden;
				margin: 100px auto;
			}
			.box .slider{
				width: 100%;
				height: 100%;
			}
			.box .slider ul{
				width: 1000%;
				list-style: none;
				position: absolute;
				top: 0;
				left: 0;
			}
			.box .slider img{
				vertical-align: top;
			}
			.box .slider ul li{
				float: left;
			}
			.box .scroll_nav{
				list-style: none;
				position: absolute;
				right: 20px;
				bottom: 10px;
			}
			.box .scroll_nav li{
				float: left;
				width: 20px;
				height: 20px;
				background-color: #000;
				color: #fff;
				text-align: center;
				font-size: 12px;
				font-family: "微软雅黑";
				line-height: 20px;
				cursor: pointer;
				border-radius: 50%;
				margin-right: 5px;
			}
			.box .scroll_nav li.current{
				background-color: #356acb;
			}
			.box .arr{
				width: 40px;
				height: 50px;
				font-size: 35px;
				font-family: "黑体";
				line-height: 50px;
				background-color: rgba(0,0,0,0.3); /*这种方式能让背景透明而文本不收影响*/
				color: #fff;
				text-align: center;
				position: absolute;
				top: 125px;
				font-weight: bold;
				display: none;
				cursor: pointer;
				/* opacity: 0.1; opacity属性会让盒子半透明，与此同时它也会让黑子内部的文本半透明*/
			}
			.box .arr_prev{
				left: 5px;
			}
			.box .arr_next{
				right: 5px;
			}
        </style>
        <script type="text/javascript">
        	function $(id){
        		return document.getElementById(id);
        	}        
        	window.onload = function(){
        		$('scroll').onmouseover = function(){ //鼠标放在屏幕上的效果
        			var arrs = this.getElementsByClassName('arr');
        			for (var i = 0; i < arrs.length; i++) {
        				arrs[i].style.display = 'block';
        			}
        		}
        		$('scroll').onmouseout = function(){  //鼠标离开屏幕中心时不显示
        			var arrs = this.getElementsByClassName('arr');
        			for (var i = 0; i < arrs.length; i++) {
        				arrs[i].style.display = 'none';
        			}
        		}
        		
        		var imgCount = $('sl').getElementsByTagName('li').length;
        		for (var i = 0; i < imgCount; i++) {
        			var li = document.createElement('li');
        			li.innerHTML = i+1;
        			if(i == 0){
        				li.setAttribute('class', 'current');
        			}
        			//根据排它原理实现轮播导航样式
        			li.setAttribute('index', i);//给li标签添加一个index属性，用于在点击导航时，获取序号

        			li.onclick = function(){
        				var lis = $('sc_nav').getElementsByTagName('li');
        				for (var i = 0; i < lis.length; i++){
        					lis[i].className = '';
        				}
        				this.className = 'current';
        				//设置动画终点位置
        				var index = this.getAttribute('index');//getAttribute获得属性的值
        				target = index * -800;
        			}
        			$('sc_nav').appendChild(li);
        		}
        		//缓动动画实现动画效果
        		var leader = 0;
        		var target = 0;
        		setInterval(function(){
        			leader = leader +(target - leader)/10;
        			$('sl_ul').style.left = leader + 'px';

        		}, 20);

        		//点击箭头滚动
        		//左箭头点击事件
        		$('prev').onclick = function(){
        			if(target < 0){
        				target += 800;
        			}else{
        				target = -3200;
        			}
        			setCurrent();
        		}
        		//右箭头点击事件
        		$('next').onclick = function(){
        			if(target > -3200){
        				target -= 800;
        			}else{
        				target = 0;//如果已经是最后一张图，那么再点击就直接回到第一张图
        			}
        			setCurrent();
        		}
        		//修改对应的nav栏中的按钮为被选中项
        		function setCurrent(){
        			var index = Math.abs(target / 800);//取绝对值
        			var lis = $('sc_nav').getElementsByTagName('li');
        			for(var i = 0; i<lis.length; i++){
        				lis[i].className = '';
        			}
        			lis[index].className = "current";
        		}
        	}

        </script>
    </head>
    <body>
    	<div class="box" id="scroll">
    		<div class="slider" id="sl">
    			<ul id="sl_ul">
    				<li><img src="imgs/1.jpg" alt=""></li>
    				<li><img src="imgs/2.jpg" alt=""></li>
    				<li><img src="imgs/3.jpg" alt=""></li>
    				<li><img src="imgs/4.jpg" alt=""></li>
    				<li><img src="imgs/5.jpg" alt=""></li>
    			</ul>
    		</div>
    		<ul class="scroll_nav" id="sc_nav">
    			<!-- <li class="current">1</li>
    							<li>2</li>
    							<li>3</li>
    							<li>4</li>
    							<li>5</li> -->
    		</ul>
    		<span class="arr arr_prev" id="prev"><</span>
    		<span class="arr arr_next" id="next">></span>
    	</div>
    </body>
</html>