已解决
本帖最后由 Samding 于 2019-12-5 12:10 编辑为什么鼠标移动到数字上的时候广告跟不上，求大神解决
1-5.jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
#div1{
border: 1px solid silver;
width: 426px;
margin:0 auto;
}
#div1 img{
display: block;
}
.samding{
width: 426px;
}
#div2{
height: 20px;
background: silver;
}
#div2 ul{
list-style: none;
display: block;
}
#div2 ul li{
float: left;
width: 18px;
height: 18px;
background: #9E2E07;
margin-left: 10px;
margin-top: 1px;
color: white;
text-align: center;
}
#div2 ul li a{
text-decoration: none;
color: white;
}
#div2 ul li a:hover {
text-decoration:underline;
color: red
}
.over{
width: 200px !important;
background: white !important;
color: red !important;
}
/*-------------------------------*/
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="div1">
<img src="images1/1.jpg" id="img1">
<div id="div2">
<ul>
<li><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>
<li><a href="javascript:void(0)">5</a></li>
</ul>
</div>
</div>
<script>
window.onload=init
var lis=document.getElementsByTagName('li')
function init(){
for (var i = 0; i < lis.length; i++) {
(function(i){
lis.onmouseover=function(){
click(i)
}
})(i)
}
update()
}
var img1=document.getElementById("img1")
var arr_img=['images1/1.jpg','images1/2.jpg','images1/3.jpg','images1/4.jpg','images1/5.jpg']
//--------------------------
var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
var index=0
var oldindex=-1
//-----------------------------
function update(){
img1.src=arr_img
//-----------------------
var arr=document.getElementsByTagName('li')
arr.innerHTML=arr_adv
arr.className='over'
if(oldindex!=-1){
arr.innerHTML=oldindex+1
arr.className='licopy'
}
oldindex=index
//-----------------------
index++
if(index==arr_img.length){
index=0
}
setTimeout('update()',2000)
}
function click(i){
img1.src=arr_img
}
</script>
</body>
</html> 网上不是很多现成的吗 用插件不是很方便吗 https://www.swiper.com.cn/ 你这种轮播图第一次见,可能是因为定时器,有时间再仔细看 楼主，您的这个js需要重构：：：
function update(){
img1.src=arr_img
//-----------------------
var arr=document.getElementsByTagName('li')
arr.innerHTML=arr_adv
arr.className='over'
if(oldindex!=-1){
arr.innerHTML=oldindex+1
arr.className='licopy'
}
oldindex=index
//-----------------------
index++
if(index==arr_img.length){
index=0
}
setTimeout('update()',2000)
}
我放在这个里面看了下，您看，这个是不是死循环在这个单次setTimeout里面了：
function init(){
for (var i = 0; i < lis.length; i++) {
(function(i){
lis.onmouseover=function(){
click(i);
update();
}
})(i)
}
} 你的javasript:vido(0) 是 点击 没有任何效果的，当用户链接时，void(0)计算为0,用户点击不会发生任何效果 本帖最后由 cglmj 于 2019-12-5 11:13 编辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
#div1{
border: 1px solid silver;
width: 426px;
margin:0 auto;
}
#div1 img{
display: block;
}
.samding{
width: 426px;
}
#div2{
height: 20px;
background: silver;
}
#div2 ul{
list-style: none;
display: block;
}
#div2 ul li{
float: left;
width: 18px;
height: 18px;
background: #9E2E07;
margin-left: 10px;
margin-top: 1px;
color: white;
text-align: center;
}
#div2 ul li a{
text-decoration: none;
color: white;
}
#div2 ul li a:hover {
text-decoration:underline;
color: red
}
.over{
width: 200px !important;
background: white !important;
color: red !important;
}
/*-------------------------------*/
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="div1">
<img src="images1/1.jpg" id="img1">
<div id="div2">
<ul>
<li><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>
<li><a href="javascript:void(0)">5</a></li>
</ul>
</div>
</div>
<script>
window.onload=init
var lis=document.getElementsByTagName('li')
function init(){
for (var i = 0; i < lis.length; i++) {
(function(i){
lis.onmouseover=function(){
click(i)
}
lis.onmouseout=function(){
myTime = setTimeout('update()',2000);
}
})(i)
}
update()
}
var img1=document.getElementById("img1")
var arr_img=['images1/1.jpg','images1/2.jpg','images1/3.jpg','images1/4.jpg','images1/5.jpg']
//--------------------------
var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
var index=0
var oldindex=-1
var myTime;
//-----------------------------
function update(){
img1.src=arr_img
//-----------------------
var arr=document.getElementsByTagName('li')
arr.innerHTML=arr_adv
arr.className='over'
if(oldindex!=-1){
arr.innerHTML=oldindex+1
arr.className='licopy'
}
oldindex=index
//-----------------------
index++
if(index==arr_img.length){
index=0
}
myTime = setTimeout('update()',2000)
}
function click(i){
img1.src=arr_img;
window.clearTimeout(myTime);
var arr=document.getElementsByTagName('li');
for(var j = 0; j < lis.length; j++){
var temp = arr;
if(temp.classList.contains("over")){
arr.innerHTML=j+1;
arr.className='licopy';
}
}
arr.innerHTML=arr_adv;
arr.className='over';
}
</script>
</body>
</html> 改写的一点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
#div1{
border: 1px solid silver;
width: 426px;
margin:0 auto;
}
#div1 img{
display: block;
}
.samding{
width: 426px;
}
#div2{
height: 20px;
background: silver;
}
#div2 ul{
list-style: none;
display: block;
}
#div2 ul li{
float: left;
width: 18px;
height: 18px;
background: #9E2E07;
margin-left: 10px;
margin-top: 1px;
color: white;
text-align: center;
}
#div2 ul li a{
text-decoration: none;
color: white;
}
#div2 ul li a:hover {
text-decoration:underline;
color: red
}
.over{
width: 200px !important;
background: white !important;
color: red !important;
}
/*-------------------------------*/
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="div1">
<img src="images1/1.jpg" id="img1">
<div id="div2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script>
window.onload=init
var lis=document.getElementsByTagName('li')
function init(){
for (var i = 0; i < lis.length; i++) {
(function(i){
lis.onmouseover=function(){
click(i)
}
})(i)
}
update()
}
var img1=document.getElementById("img1")
var arr_img=['images1/1.jpg','images1/2.jpg','images1/3.jpg','images1/4.jpg','images1/5.jpg']
//--------------------------
var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
var index=0
var oldindex=-1
//-----------------------------
function update(){
img1.src=arr_img
//-----------------------
var arr=document.getElementsByTagName('li')
arr.innerHTML=arr_adv
arr.className='over'
if(oldindex!=-1){
arr.innerHTML=oldindex+1
arr.className='licopy'
}
oldindex=index
//-----------------------
index++
if(index==arr_img.length){
index=0
}
setTimeout('update()',5000)
}
function click(i){
img1.src=arr_img
}
function clicks(i) {
var arr=document.getElementsByTagName('li')
for(var j=0;j<5;j++){
if(j == i){
arr.innerHTML=arr_adv
arr.className='over'
img1.src=arr_img
index = i
}else{
arr.className='licopy'
arr.innerHTML= j+1;
}
}
oldindex=index
index++
if(index==arr_img.length){
index=0
}
}
</script>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
#div1{
border: 1px solid silver;
width: 426px;
margin:0 auto;
}
#div1 img{
display: block;
}
.samding{
width: 426px;
}
#div2{
height: 20px;
background: silver;
}
#div2 ul{
list-style: none;
display: block;
}
#div2 ul li{
float: left;
width: 18px;
height: 18px;
background: #9E2E07;
margin-left: 10px;
margin-top: 1px;
color: white;
text-align: center;
transition: all 0.5s;
cursor: pointer;
}
#div2 ul li a{
text-decoration: none;
color: white;
}
#div2 ul li a:hover {
text-decoration:underline;
color: red
}
.over{
width: 200px !important;
background: white !important;
color: red !important;
}
/*-------------------------------*/
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="div1">
<img src="https://attach.52pojie.cn/forum/201912/05/101540yno0ppt2nuhronz0.jpg" id="img1">
<div id="div2">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
</ul>
</div>
</div>
<script>
var timer
window.onload=init
var lis=document.getElementsByTagName('li')
function init(){
for (var i = 0; i < lis.length; i++) {
(function(i){
lis.onmouseover=function(){
console.log(i)
click(i)
}
})(i)
}
update()
}
var img1=document.getElementById("img1")
var arr_img=[
'https://attach.52pojie.cn/forum/201912/05/101526lvovzvolvvzi9p24.jpg',
'https://attach.52pojie.cn/forum/201912/05/101540yno0ppt2nuhronz0.jpg',
'https://attach.52pojie.cn/forum/201912/05/101542d5z42h3whwmnccnn.jpg',
'https://attach.52pojie.cn/forum/201912/05/101544mbii1dqdxqpypqrl.jpg',
'https://attach.52pojie.cn/forum/201912/05/101547aaabza7rm4vqcvha.jpg'
]
var arr_adv=["广告1","广告2","广告3","广告4","广告5"]
var index=0
var oldindex=-1
function update(){
console.log('执行更新')
img1.src = arr_img
var arr=document.getElementsByTagName('li')
var old=document.getElementsByClassName('over')
arr.innerHTML=arr_adv
arr.className='over'
if(oldindex!=-1){
arr.innerHTML=oldindex+1
arr.className='licopy'
}
oldindex = index
clearTimeout(timer)
timer = setTimeout(() => {
next()
},5000)
}
function next () {
index ++;
if (index >= arr_img.length) index = 0
update()
}
function click(i){
console.log(index)
if (index === i) {
return;
}
index = i
update()
}
</script>
</body>
</html>
我也改了一下
页:
[1]