右边选项卡的焦点轮播图:
涉及到的JQUERY方法:(来自菜鸟教程)
1、 addClass() 方法:向被选元素添加一个或多个类名,不会移除已存在的class属性,只是添加一个或多个类名到class属性,如需添加多个类请使用空格分隔类名。
语法:KaTeX parse error: Expected 'EOF', got '&' at position 155: …s-返回被选元素的当前类名。 &̲emsp; 2、 s…(selector).siblings(filter) filter:规定缩小搜索同级元素范围的选择器表达式;
3、 setTimeout()方法:用于在指定的毫秒数后调用函数或表达式
语法:setTimeout(code,milliseconds,param1,param2)
Code/function:必需。要调用一个代码串,也可以是一个函数
4、 clearTimeout()方法可取消setTimeout()方法设置的定时操作
clear Timeout()方法的参数必须是setTimeout()返回的ID值
5、 setInterval()方法可按照指定的周期来调用函数或表达式setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
步骤:
思路:
1、 首先获取大盒子元素,通过大盒子找到各个子元素。
2、 设置右边点击图片,左边通过index找到对应的图片改变其透明度
3、 设置动画左边图片离开时更换图片,执行动画。
代码示例:
html代码:
<div class="box" id="focus">
<div class="wrap" id="left">
<ul class="Carousel">
<li style="opacity:1;">
<img src="img/1.jpg">
</li>
<li>
<img src="img/2.jpg">
</li>
<li>
<img src="img/3.jpg">
</li>
<li>
<img src="img/4.jpg">
</li>
</ul>
</div>
<div class="right">
<ul class="brink" >
<li>
<img src="img/1.jpg">
</li>
<li>
<img src="img/2.jpg">
</li>
<li>
<img src="img/3.jpg">
</li>
<li>
<img src="img/4.jpg">
</li>
</ul>
</div>
</div>
css代码:
.box{
width: 1000px;
height: 400px;
background-color: #1afa29;
border: 2px solid #bbbbbb;
margin-left: 50px;
}
.wrap{
width: 800px;
height: 100%;
background-color: #7f2ec2;
float: left;
/*overflow: hidden;*/
}
.brink{
width: 200px;
height: 100%;
float: right;
background-color: #2e6da4;
list-style-type: none;
}
.brink>li{
height: 98px;
border:1px solid black;
width: 100%;
}
.brink>li>img{
height: 98px;
width: 200px;
}
.Carousel{
/*width: 3220px;*/
height: 100%;
position: relative;
background-color: #4cae4c;
list-style-type: none;
}
.Carousel>li>img{
width: 800px;
height: 400px;
}
.Carousel>li{
display: inline-block;
position: absolute;
width: 800px;
height: 400px;
}
Jquery代码:
<script>
$(document).ready(function () {
// 先获取盒子的id以及需要的元素
var oFucus = $("#focus"),
oRight = $(".right"),
oLeft = $("#left"),
aLli = oLeft.find("li"),
aRli = oRight.find("li"),
timer = null,
index = 0;
// 右边点击左边图片更换
aRli.click(function () {
// 先获取图片的索引
index = $(this).index();
aLli.eq(index).animate({"opacity":1},300).siblings().stop().animate({"opacity":0},300)});
// 开始动画
function starAnimation(){
index++;
index = index > aRli.length-1?0:index;
aLli.eq(index).animate({"opacity":1},300).siblings().stop().animate({"opacity":0},300).stop();
}
// 动画参数
timer = setInterval(function () {
starAnimation()
},500);
// 停止动画
function stopAnimation(){
clearInterval(timer);
}
// 左边的动画
oLeft.mouseenter(function () {
stopAnimation()
}).mouseleave(function () {
starAnimation()
})
})
</script>