网页设计 图片轮播，将鼠标放在图片上，图片会自动播放，代码怎么改？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页设计 图片轮播，将鼠标放在图片上，图片会自动播放，代码怎么改？相关的知识，希望对你有一定的参考价值。
参考技术A 首先要做的不是把鼠标放上去轮播，而是先让图片能够自动轮播才行下面代码，有详解，你可以参考一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">下方悬浮标题</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
<!--<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>-->
</li>
</ul>
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
<p class="mui-slider-title">Color of SIP CBD</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/shuijiao.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
// alert("!!!!!");
var slider = mui("#slider");
slider.slider(
interval: 5000
);
</script>
</html>
定时器图片轮播淡入淡出基本功能已实现，正在修改BUG中。。（附图效果和源代码）
用JQ写的源码如下：
实现功能：
1，图片自动按顺序轮播，轮播选中的图片透明度为1，其他为0.1；
2，鼠标停在的图片上透明度为1，其他为0.1；
3，鼠标离开，继续轮播，起始位置为鼠标停在的图片的下一张图片；
存在BUG：
当鼠标在多个图片上滑动的时候，图片的轮播顺序会被打乱！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动轮播图片淡入淡出</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin-left:146px;
}
img{
width: 320px;
height: 440px;
margin-top:10px;
margin-bottom: 10px;
}
body{
background: #000;
}
</style>
<script src="jquery.js"></script>
<script>
//执行定时器让图片淡入淡出；
var n=0;
function res () {
$("img").fadeTo(500,0.1); //所有的图片淡入；
$("img").eq(n).fadeTo(500,1); //指定图片淡出；
n++; //遍历所有的图片
if(n>9){ //判断下标
n=0;
}
}
var str=setInterval("res()",1000); //定时器 1秒执行一次res这个定时器
$(function () { //当页面加载时；
$("img").mouseenter(function () { //当鼠标经过时，
clearInterval(str); //停止定时器
$("img").fadeTo(500,0.1) //让图片恢复初始状态
$(this).fadeTo(1000,1).siblings().fadeTo(0,0.1); //鼠标停在的图片上淡出,其他图片恢复初始0.1透明度
n = $(this).index()+1; //让图片的下标等于鼠标停在的图片的下一张图
});
$("img").mouseleave(function () { //当鼠标离开的时候；
str=setInterval("res()",1000); //继续调用定时器，并让定时器的返回值等于str
});
});
</script>
</head>
<body>
<div>
<img src="image/1.jpg" >
<img src="image/2.jpg" >
<img src="image/3.jpg" >
<img src="image/4.jpg" >
<img src="image/5.jpg" >
<img src="image/6.jpg" >
<img src="image/7.jpg" >
<img src="image/8.jpg" >
<img src="image/9.jpg" >
<img src="image/10.jpg">
</div>
</body>
</html>
以上是关于网页设计 图片轮播，将鼠标放在图片上，图片会自动播放，代码怎么改？的主要内容，如果未能解决你的问题，请参考以下文章
定时器图片轮播淡入淡出基本功能已实现，正在修改BUG中。。（附图效果和源代码）
在图片轮播过程中，采用jquery，如何将除了第一张以外的图片全部隐藏？