三、完成下图“标签切换”。当鼠标移到到“国内新闻”，下面显示内容为“国内新闻” 模块，鼠标依次移动新闻模块，下面显示内容为对应模块内容。
要求：鼠标移到标签时，字体颜色变为红色，新闻内容居中显示。
vue实现：
<template>
<div>
<el-tag id="news" style="margin: 10px;" v-for="i in datas" @mouseover.native="showContent(i)">{{i}}</el-tag>
<div>
<el-row style="margin-left: 120px;margin-top: 40px;">
{{name}}
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "test02",
data(){
return{
datas:["国际新闻","国内新闻","江西新闻","井冈山大学"],
name:"",
}
},
methods:{
showContent(i){
console.log(i);
this.name=i;
var t =document.getElementById("news");
console.log(t);
// t.innerText=i;
t.setAttribute("style","margin: 10px; color: #ff4d51");
},
}
}
</script>
<style>
</style>
html实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
text-align: center;
width: 80px;
float: left;
margin-right: 10px;
border: 1px solid black;
cursor: pointer;
}
li:hover{
color: red;
}
#news{
clear: left;
width: 356px;
height: 150px;
line-height: 150px;
border: 1px solid chocolate;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>国际新闻</li>
<li>国内新闻</li>
<li>江西新闻</li>
<li>井冈山大学</li>
</ul>
<div id="news">
<div class="newson" >国际新闻</div>
<div class="newson" style="display: none;">国内新闻</div>
<div class="newson" style="display: none;">江西新闻</div>
<div class="newson" style="display: none;">井冈山大学新闻</div>
</div>
<script type="text/javascript">
var li = document.getElementsByTagName("li");
var newsbody = document.getElementsByClassName("newson");
for(var i = 0;i<li.length;i++){
li[i].onmouseenter = function(){
for(var i = 0;i < li.length; i++){
if(li[i]==this){
newsbody[i].style.display="block";
}else{
newsbody[i].style.display="none";
}
}
}
}
//第一个for循环是用来绑定事件的，js的事件不能数组绑定（不能像jquery选中多个元素，绑定对象。只能单个对象绑定）
//第二个for循环是用来判断当前是哪个对象。进行排他处理（也可以不写）。
</script>
</body>
</html>
四、移动电商首页中，“轮播图”是商家用来展示重要活动及爆款商品广告的重要界面，请完成以下交互效果：
（1）引入四张广告图片，默认显示第一张，其他隐藏；
（2）左右两边运用CSS制作“三角形”，用来切换轮播图；
（3）鼠标点击“右三角”，广告图会进入下一张，如当前是最后一张，点击时会进入第一张广告图；
（4）鼠标点击“左三角”，广告图会进入上一张，如当前是第一张，点击时会进入最后一张。
vue实现：
<template>
<div class="block">
<span class="demonstration"></span>
<el-carousel trigger="click" height="720px">
<el-carousel-item v-for="item in imgs" :key="item">
<el-image
style="width: 100%; height: 100%"
:src="item"
fit="fit"></el-image>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
import homeImg1 from "../assets/banner/banner1.jpg";
import homeImg2 from "../assets/banner/banner2.jpg";
import homeImg3 from "../assets/banner/banner3.jpg";
import homeImg4 from "../assets/banner/banner4.jpg";
export default {
name: "test03",
data(){
return{
imgs:[homeImg1,homeImg2,homeImg3,homeImg4]
}
}
}
</script>
<style scoped>
</style>
html实现：
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<style type="text/css">
#content{margin: 100px auto;width: 800px;height: 450px;position: relative;}
#banner li img{width: 800px;height: 450px;}
#banner li{display: none;}
#radus{position: absolute;left: 45%;bottom: 0;}
#radus li{width: 24px;height: 24px;border-radius: 12px;display: inline-block;margin-right: 5px;background: rgba(0,0,0,0.5);}
#radus li a{text-decoration: none;text-indent:-9999px;margin: 0;padding: 0;display: block;width: 100%;height: 100%;}
#radus .on{background: #ff0000;}
#left{position: absolute;left: 70px;top: 50%; border: 10px solid rgba(0,0,0,-0.1);border-right-color:#F00; }
#right{position: absolute;right: 20px;top: 50%; border: 10px solid rgba(0,0,0,-0.1);border-left-color:#F00; }
/*三角形制作*/
#border{
/*width: 100px;*/
/*height: 100px;*/
/*border-top: 100px solid red;*/
/*border-bottom: 100px solid yellow;*/
border: 10px solid rgba(0,0,0,-0.1);
border-right-color:red;
}
</style>
</head>
<body>
<div id="content">
<ul id="banner">
<li style="display: block;"><img src="img/banner/banner1.jpg"></li>
<li><img src="img/banner/banner2.jpg"></li>
<li><img src="img/banner/banner3.jpg"></li>
<li><img src="img/banner/banner4.jpg"></li>
</ul>
<ul id="radus">
<li class="on"><a href="JavaScript:void(0)">1</a></li>
<li><a href="JavaScript:void(0)">2</a></li>
<li><a href="JavaScript:void(0)">3</a></li>
<li><a href="JavaScript:void(0)">4</a></li>
</ul>
<div id="left"></div>
<div id="right"></div>
</div>
<div id="border"></div>
<script type="text/javascript">
var banner = document.getElementById("banner");
var bannerLi = banner.getElementsByTagName("li");
var radus = document.getElementById("radus");
var radusLi = radus.getElementsByTagName("li");
var left = document.getElementById("left");
var right = document.getElementById("right");
var flag = 0;
var y = 0;
//实现鼠标悬停时切换焦点图
window.onload = function(){
for(var i=0;i < radusLi.length;i++){
radusLi[i].index = i;
radusLi[i].onmouseover = function(){
for(var j=0;j<radusLi.length;j++){
radusLi[j].setAttribute("class","");
}
this.setAttribute("class","on");
for(var i=0;i<bannerLi.length;i++){
bannerLi[i].style.display = "none";
}
bannerLi[this.index].style.display = "block";
}
}
//计时事件切换焦点图
window.setInterval(function(){change()},2000);
function change(){
if (flag == radusLi.length) { flag = 0;}
radusLi[flag].index = flag;
console.log("radusLi[flag]= "+radusLi[flag]);
for(var i=0;i<radusLi.length;i++){
radusLi[i].setAttribute("class","");
}
radusLi[flag].className = "on";
for(var i=0;i<bannerLi.length;i++){
bannerLi[i].style.display = "none";
}
bannerLi[flag].style.display = "block";
flag++;
}
//点击向右箭头切换焦点图
right.onclick = function(){
for(var j=0;j<radusLi.length;j++){
radusLi[j].setAttribute("class","");
}
for(var i=0;i<bannerLi.length;i++){
bannerLi[i].style.display = "none";
}
if (y == radusLi.length - 1) {
radusLi[0].setAttribute("class","on");
bannerLi[0].style.display = "block";
y = -1;
}else{
radusLi[y+1].setAttribute("class","on");
bannerLi[y+1].style.display = "block";
}
y++;
}
//点击向左箭头切换焦点图
left.onclick = function(){
for(var j=0;j<radusLi.length;j++){
radusLi[j].setAttribute("class","");
}
for(var i=0;i<bannerLi.length;i++){
bannerLi[i].style.display = "none";
}
if (y == 0) {
radusLi[radusLi.length-1].setAttribute("class","on");
bannerLi[radusLi.length-1].style.display = "block";
y = 4;
}else{
radusLi[y-1].setAttribute("class","on");
bannerLi[y-1].style.display = "block";
}
y--;
}
}
</script>
</body>
</html>
