HTML+CSS+JS实现 ❤️touchSlider图片滚动图片轮播❤️

效果演示：

代码目录：

主要代码实现：

CSS样式：

@charset "utf-8";
* {margin: 0;padding: 0;list-style: none;border: 0;
}body {width: 100%;margin: 0 auto;overflow: hidden
}/* main_image */.main_visual {height: 422px;border-top: 1px solid #d7d7d7;overflow: hidden;position: relative;
}.main_image {height: 422px;overflow: hidden;position: relative;
}.main_image ul {width: 9999px;height: 422px;overflow: hidden;position: absolute;top: 0;left: 0
}.main_image li {float: left;width: 100%;height: 422px;
}.main_image li span {display: block;width: 100%;height: 422px
}.main_image li a {display: block;width: 100%;height: 422px
}.main_image li .img_1 {background: url('../images/img_main_1.jpg') center top no-repeat
}.main_image li .img_2 {background: url('../images/img_main_2.jpg') center top no-repeat
}.main_image li .img_3 {background: url('../images/img_main_3.jpg') center top no-repeat
}.main_image li .img_4 {background: url('../images/img_main_4.jpg') center top no-repeat
}.main_image li .img_5 {background: url('../images/img_main_5.jpg') center top no-repeat
}div.flicking_con {position: absolute;top: 360px;left: 50%;z-index: 999;width: 300px;height: 21px;margin: 0 0 0 -50px;
}div.flicking_con a {float: left;width: 21px;height: 21px;margin: 0;padding: 0;background: url('../images/btn_main_img.png') 0 0 no-repeat;display: block;text-indent: -1000px
}div.flicking_con a.on {background-position: 0 -21px
}#btn_prev,
#btn_next {z-index: 11111;position: absolute;display: block;width: 73px !important;height: 74px !important;top: 50%;margin-top: -37px;display: none;
}#btn_prev {background: url(../images/hover_left.png) no-repeat left top;left: 100px;
}#btn_next {background: url(../images/hover_right.png) no-repeat right top;right: 100px;
}

HTML代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>jQuery宽屏满屏焦点图切换特效touchSlider插件</title><link type="text/css" href="css/style.css" rel="stylesheet" /><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script><script type="text/javascript" src="js/jquery.touchSlider.js"></script><script type="text/javascript">$(document).ready(function() {$(".main_visual").hover(function() {$("#btn_prev,#btn_next").fadeIn()}, function() {$("#btn_prev,#btn_next").fadeOut()});$dragBln = false;$(".main_image").touchSlider({flexible: true,speed: 200,btn_prev: $("#btn_prev"),btn_next: $("#btn_next"),paging: $(".flicking_con a"),counter: function(e) {$(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");}});$(".main_image").bind("mousedown", function() {$dragBln = false;});$(".main_image").bind("dragstart", function() {$dragBln = true;});$(".main_image a").click(function() {if ($dragBln) {return false;}});timer = setInterval(function() {$("#btn_next").click();}, 5000);$(".main_visual").hover(function() {clearInterval(timer);}, function() {timer = setInterval(function() {$("#btn_next").click();}, 5000);});$(".main_image").bind("touchstart", function() {clearInterval(timer);}).bind("touchend", function() {timer = setInterval(function() {$("#btn_next").click();}, 5000);});});</script>
</head><body><div class="main_visual"><div class="flicking_con"><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a></div><div class="main_image"><ul><li><span class="img_3"></span></li><li><span class="img_4"></span></li><li><span class="img_1"></span></li><li><span class="img_2"></span></li><li><span class="img_5"></span></li></ul><a href="javascript:;" id="btn_prev"></a><a href="javascript:;" id="btn_next"></a></div></div><!--main_visual end--></body></html>

上面的图片和js需要引入