正文
jquery图片循环,css图片循环
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery实现图片循环切换
试试这个焦点图切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
相关问答
Q1: Jquery图片轮播循环问题，求大神指教，怎么实现循环播放？
//js
var isround = "";
var i=0;
$(function(){
isround = setTimeout("change()",3000);
$("div[name=ban] div img:eq(0)").show().siblings().hide();
$(".num li:eq(0)").addClass("current").siblings().removeClass("current");
$(".num li").click(function(){
i=$(".num li").index(this);
$(this).addClass("current").siblings().removeClass("current");
$("div[name=ban] div img").eq($(".num li").index(this)).show().siblings().hide();
isround = setTimeout("change()",3000);
}).hover(function(){
clearTimeout(isround)
},function(){
isround = setTimeout("change()",3000);
})
})
function change(){
if(i==$(".num li").length) i=0;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$("div[name=ban] div img").eq(i).show().siblings().hide();
i++;
setTimeout("change()",3000);
}
//html
div name="ban"
div
!--图片--
img src="/resources/images/f1.jpg" width="369px" height="114px" /
img src="/resources/images/f2.jpg" width="369px" height="114px" /
img src="/resources/images/f1.jpg" width="369px" height="114px" /
img src="/resources/images/f2.jpg" width="369px" height="114px" /
img src="/resources/images/f1.jpg" width="369px" height="114px" /
/div
div class="numbox"
!--选项--
ul class="num"
li class="current"/li
li/li
li/li
li/li
li/li
/ul
/div
/div
不懂再问，这是我自己写的一个轮换，里面包括了点击事件，原理是控制图片的显示隐藏，
别的有控制高度等等之类的 。
Q2: 使用jQuery实现图片循环滚动效果，当把光标移动图上，停止滚动;当把光标从图上移出后，图片继续滚动
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
link rel="stylesheet" href=""
style
.swiper-wrapper {
height: 300px;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide:nth-child(1) {
background: red;
}
.swiper-slide:nth-child(2) {
background: green;
}
.swiper-slide:nth-child(3) {
background: blue;
}
/style
/head
body
div class="swiper-container"
div class="swiper-wrapper"
div class="swiper-slide"Slide 1/div
div class="swiper-slide"Slide 2/div
div class="swiper-slide"Slide 3/div
/div
/div
/body
script src=""/script
script language="javascript"
var mySwiper = new Swiper(document.querySelector(".swiper-container"), {
autoplay: true,
})
document.querySelector('.swiper-container').onmouseover = () = {
mySwiper.autoplay.stop();
}
document.querySelector('.swiper-container').onmouseout = () = {
mySwiper.autoplay.start();
}
/script
/html
请采纳
Q3: jquery，如何实现图片停留5秒后向上循环翻滚
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
style
* {
margin: 0px;
padding: 0px;
}
#d1 {
border: 1px solid #aaaaaa;
margin-left: 200px;
margin-top: 40px;
width: 548px;
height: 177px;
overflow: hidden;
position: relative;
}
#adv,#num {
position: absolute;
}
ul li {
list-style: none;
display: inline;
}
ul img {
width: 548px;
height: 177px;
display: block;
}
#num {
right: 5px;
bottom: 5px;
}
#num li {
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
}
.on {
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: red;
font-weight: bold;
}
/style
script type="text/javascript" src="js/jquery-1.4.3.js"/script
script type="text/javascript"
$(function(){
$('#num li').mouseenter(function(){
//需要知道光标指向的li的下标
var index = $('#num li').index(this);
//滚动图片
showImage(index);
}).eq(0).mouseenter();
var i = 0;
var taskId;
$('#d1').hover(function(){
//光标进来，停止滚动
clearInterval(taskId);
},function(){
//光标移出，开始滚动
taskId = setInterval(function(){
showImage(i);
i++;
if(i == 5){
i = 0;
}
},3500);
}).mouseleave();
});
function showImage(index){
stop(true);
$('#adv').animate({'top':-177*index},30);
$('#num li').eq(index).addClass('on').siblings().removeClass('on');
}
/script
/head
body
div id="d1"
ul id="adv"
liimg src="images/1.jpg" //li
liimg src="images/2.jpg" //li
liimg src="images/3.jpg" //li
liimg src="images/4.jpg" //li
liimg src="images/5.jpg" //li
/ul
ul id="num"
li1/li
li2/li
li3/li
li4/li
li5/li
/ul
/div
/body
/html
