Late at night, only to hear the beating sound of the ticking of the clock and keyboard, presumably this time only the programmer's work. Long time no update, a rare free to write about what they have learned their own these days.
The following highlights several ways:
give everyone to see a rendering
mode 3: native js achieve (relatively more suitable for beginners)
relatively more suitable for people to realize the new science's
implementation principle:
Div:
<img src="img/3_1.png" id="lunbo" alt="" width="400" height="220" />
JS
var jx_speed = 5000; //轮播图片时间设置
var jxlunbo = document.getElementById("lunbo");
var num = 1;
var time1 = setInterval(getlunbo, jx_speed);
function getlunbo() {
num++;
if (num == 3) {
num = 1;
}
jxlunbo.src = "img/3_" + num + ".png";
}
The method is mainly implemented by changing the label src img
Mode 2: jquery achieve turning around, there is the case where the suspension button below
Div
<div class="img_part" id="box">
<ul>
<li>
<img src="img/2_1.jpg" alt="" width="400" height="220" />
</li>
<li style="display:none">
<img src="img/2_2.jpg" alt="" width="400" height="220" />
</li>
<li style="display:none">
<img src="img/2_3.jpg" alt="" width="400" height="220" />
</li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
<div class="left left2">
< </div> <div class="right right2">
>
</div>
</div>
JS
function func_1(){
var interval = setInterval(function(){
right();
},4000);
}
function func_2(){
var index =0;
var timer = setInterval(function(){
index = (index == 2) ? 0 : index + 1;
$("#box ul li").hide().eq(index).show();
$('#box ol li').eq(index).addClass('current').siblings().removeClass('current');
}, 4000);
$("#box ol li").hover(function(){
var index = $(this).index();
$("#box ul li").eq(index).show().siblings().hide();
$(this).addClass('current').siblings().removeClass('current');
})
}
Core code is then realized in that find elements call this method: .addClass ( 'current') siblings ().
1 embodiment, the same effect as a similar flip albums (intermediate amplifier)
Div's
<div class="img_part">
<div class="img_1_1"></div>
<div class="img_1_2"></div>
<div class="img_1_3"></div>
</div>
<div class="text_detail">实例2</div>
<div onclick="left()" class="left">
<</div> <div onclick="right()" class="right">>
</div>
JS
function left() {
debugger;
var curl = [];
var tlarr = [];
for (var i = 0; i < 3; i++) {
var k = i + 1;
if (k >= 3) {
k = k - 3;
}
curl[i] = imgurl[k];
tlarr[i] = titlearr[k];
$(".img_1_" + (i+1)).css({
"background-image": "url('" + imgurl[k] + "')",
"background-size": "100% 100%"
});
}
debugger;
imgurl = curl;
titlearr = tlarr;
$(".text_detail").html(titlearr[1]);
debugger;
}
function right() {
var curl = [];
var tlarr = [];
for (var i = 0; i < 3; i++) {
var k = i - 1;
if (k < 0) {
k = k + 3;
}
curl[i] = imgurl[k];
tlarr[i] = titlearr[k];
$(".img_1_" + (i + 1)).css({
"background-image": "url('" + imgurl[k] + "')",
"background-size": "100% 100%"
});
}
imgurl = curl;
titlearr = tlarr;
$(".text_detail").html(titlearr[1]);
debugger;
}
The principle is mainly to change its background-images, stored in an array traversal inside.
The main code has been posted, what do not understand we welcome message, the original code, I hope you like it.