示例如下:
HTML代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>横向滑动的悬停焦点图全代码</title>
<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="slideBox">
<ul>
<li><img src="image/001.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/002.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/003.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/004.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/005.jpg" alt="" width="300" height="480"/></li>
<li><img src="image/006.jpg" alt="" width="300" height="480"/></li>
</ul>
<div class="spanBox">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div class="prev"><span><<span></div>
<div class="next"><span>></span></div>
</div>
</body>
</html>
CSS代码段
<style>
*{
padding:0px;
border:0px;
margin:0px;
}
ul {
list-style:none;
}
.slideBox {
margin:50px auto;
width:300px;
height:480px;
box-shadow:2px 2px 10px #C38DD4;
border-radius:20px;
position:relative;
overflow:hidden;
}
.slideBox ul {
position:relative;
width:2000px;}
.slideBox ul li {
float:left;
width:300px;
height:480px;
position:relative;
}
.spanBox {
position:absolute;
width:300px;
height:20px;
bottom:10px;
left:80px;
}
.spanBox span {
width:18px;
height:18px;
margin-left:5px;
background-color:rgba(201,178,207,1.00);
float:left;
line-height:16px;
text-align:center;
text-shadow:2px 2px 2px #C5EBF0;
font-family:cabin-sketch;
font-size:15px;
}
.slideBox .spanBox .active {
background-color:rgba(155,83,244,0.79);
border:solid 1px #BEEBEC;
border-radius:4px;
}
.prev span{
position:relative;
bottom:240px;
font-size:40px;
font-weight:bold;
opacity:0.5;
float:left;
cursor:pointer;
}
.next span{
position:relative;
bottom:240px;
float:right;
font-size:40px;
font-weight:bold;
opacity:0.5;
cursor:pointer;
}
</style>
Jquey代码段
<script type="text/javascript">
$(document).ready(function(){
var slideBox = $(".slideBox");
var ul = slideBox.find("ul");
var oneWidth = slideBox.find("ul li").eq(0).width();
var number = slideBox.find(".spanBox span"); //注意分号 和逗号的用法
var timer = null;
var sw = 0;
//每个span绑定click事件,完成切换颜色和动画,以及读取参数值
number.on("click",function (){
$(this).addClass("active").siblings("span").removeClass("active");
sw=$(this).index();
ul.animate({
"right":oneWidth*sw, //ul标签的动画为向左移动;
});
});
//左右按钮的控制效果
$(".next").stop(true,true).click(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
$(".prev").stop(true,true).click(function (){
sw--;
if(sw == number.length){sw = 0};
if(sw == -1){sw = number.length - 1};
number.eq(sw).trigger("click");
});
//定时器的使用,自动开始
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
//hover事件完成悬停和,左右图标的动画效果
slideBox.hover(function(){
$(".next,.prev").animate({
"opacity":1,
},200);
clearInterval(timer);
},
function(){
$(".next,.prev").animate({
"opacity":0.5,
},500);
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
})
})
</script>