這個是兩個輪播圖代碼用的圖片是一樣的效果不一樣：下載鏈接：http://download.csdn.net/detail/yelang0111/9920578
1，效果圖：
下面一個效果圖
2，效果圖：
第一個實現方式：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js">
</script>
<script type="text/javascript" src="js/index.js">
</script>
</head>
<body>
<img id="myImg" src="img/1.jpg"/>
</body>
</html>js代碼：
$(function(){
changeImg("#myImg","img/");
var obj= setInterval("changeImg('#myImg','img/')",300);
$("#myImg").mouseover(function(){
window.clearInterval(obj);
});
$("#myImg").mouseout(function(){
obj= setInterval("changeImg('#myImg','img/')",300);
});
});
var count=1;
function changeImg(id,srcUrl){
$(id).attr("src",srcUrl+count+".jpg");
count++;
if(count>6){
count=1;
}
}注意樣式的引入還有js的。
第二個實現方式：
html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../js/index.js" defer="defer"></script>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
</head>
<body>
<div class="wrapper">
<ul>
<li><img src="../img/1.jpg"/></li>
<li><img src="../img/2.jpg"/></li>
<li><img src="../img/3.jpg"/></li>
<li><img src="../img/4.jpg"/></li>
<li><img src="../img/5.jpg"/></li>
<li><img src="../img/6.jpg"/></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>
</html>
css代碼：
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.wrapper{
width: 670px;
height: 240px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
width: 190px;
}
ol li{
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: default;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
js代碼：
$(function(){
$(".wrapper ol li").mouseenter(function(){
$(this).addClass("current").siblings().removeClass("current");
$(".wrapper ul li").eq($(this).index()).fadeIn(1000).siblings().fadeOut();
});
});源代碼下載：http://download.csdn.net/detail/yelang0111/9920578
這裏有幾個屬性說下一，
mouseenter----鼠標經過元素的事件
addClass-----向得到的元素添加樣式，如上面的就是給當前標籤添加一個.current樣式，
removeClass---這個是移出標籤的樣式current
siblings---這個屬性的意思是除了當前選中的元素外的其他元素，這裏我把標籤稱爲了元素，習慣了知道就行了。
eq----是得到標籤下標和index一起使用的多
fadeIn--是淡入，一般用在圖片數字的多
fadeOut--淡出。
