jQuery Banner image rotation switching special effects
jQuery Banner image rotation switching special effects
<script>
$(function () {
/*图片位置数据*/
var datas = [
{'z-index': 6, opacity: 1, width: 760, height: 330, top: 40, left: 0},
{'z-index': 4, opacity: 0.6, width: 560, height: 243, top:80, left: -225},
{'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: -170},
{'z-index': 2, opacity: 0.2, width: 620, height: 269, top: -60, left: 110},
{'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: 430},
{'z-index': 4, opacity: 0.6, width: 560, height: 243, top: 80, left: 420},
]
move();
function move() {
/*图片分布*/
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
$('#slide ul li').eq(i).css('z-index',data['z-index']);
$('#slide ul li').eq(i).stop().animate(data, 1200);
}
}
/*左箭头事件*/
$('.prev').on('click', function () {
var last = datas.pop();
datas.unshift(last);
move();
})
/*右箭头事件处理函数*/
function nextYewu(){
var first = datas.shift();
datas.push(first);
move();
}
/*右箭头事件*/
$('.next').on('click', nextYewu);
/*自动播放*/
var timer = setInterval(function(){
nextYewu();
},5000);
/*鼠标进入slide显示箭头,清除自动播放*/
$('#slide').on({
mouseenter: function () {
$('.arrow').css('display', 'block');
clearInterval(timer);
}, mouseleave: function () {
$('.arrow').css('display', 'none');
/*鼠标离开时自动播放*/
clearInterval(timer);
timer = setInterval(function(){
nextYewu();
},5000)
}
})
})
</script>
这是一款仿海风教育的师资力量页面的网站banner图片切换特效，jQuery图片旋转切换代码。
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
jquery implements image ad rotation special effects
24 Apr 2018
This time I will bring you jquery to implement image ad carousel special effects. What are the precautions for jquery to implement image ad carousel special effects? Here is a practical case, let’s take a look.
jQuery focus map switching special effects plug-in encapsulation example_jquery
16 May 2016
This article introduces the jQuery focus map switching special effects plug-in encapsulation example. Friends in need can refer to it.
16 May 2016
This article mainly introduces jQuery to implement image carousel effects. The image carousel effect is particularly suitable for product display. Interested friends can refer to it.
HTML, CSS and jQuery: Tips for achieving image rotation effects
25 Oct 2023
HTML, CSS and jQuery: Techniques for Implementing Image Rotation Special Effects Introduction: In modern web design, in order to bring a better visual experience to users, image special effects play an important role in web design. Among them, the image rotation effect can not only attract the user's attention, but also add a sense of dynamics and fashion to the page. This article will introduce how to use HTML, CSS and jQuery to achieve image rotation effects, and give specific code examples. 1. HTML structure: First, we need to create a basic HTML structure
HTML, CSS and jQuery: Techniques for achieving image transparency switching effects
25 Oct 2023
HTML, CSS and jQuery: Tips for realizing image transparency switching effects In modern web design, image transparency switching effects have become a very common design element. By controlling the transparency changes of images, you can add dynamic effects to web pages and improve user experience. To achieve such special effects, we can use HTML, CSS and jQuery. The specific techniques will be introduced below, with code examples attached. HTML part First, we need to create pictures and corresponding control buttons in HTML
16 May 2016
This article mainly shows the automatic 360-degree rotation display effects of products implemented by jQuery. Interested friends can refer to it.
16 May 2016
This article mainly introduces the jquery code to implement horizontal image carousel special effects. The effect is very exquisite and the implementation method is very simple. I recommend it to everyone. I hope you will like it.
16 May 2016
This article mainly introduces the special effects of automatic carousel switching with index buttons implemented by jquery. The pictures are simple and elegant. Interested friends can refer to it.
Hot Tools
jQuery2019 Valentine's Day Confession Fireworks Animation Special Effects
A very popular jQuery Valentine's Day confession fireworks animation special effect on Douyin, suitable for programmers and technical geeks to express their love to the girl they love. No matter you choose to be willing or not, you have to agree in the end.
layui responsive animated login interface template
layui responsive animated login interface template
520 Valentine's Day confession web animation special effects
jQuery Valentine's Day Confession Animation, 520 Confession Background Animation
Cool system login page
Cool system login page
HTML5 tape music player-CASSETTE PLAYER
HTML5 tape music player-CASSETTE PLAYER