當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/12 HTML 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 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></body></html>

上面的圖片和js需要引入?

源碼獲取

查看博主主頁或私信博主獲取

精彩推薦更新中：

HTML5大作業實戰100套

??打卡文章更新?40??/? 100天

大家可以點贊、收藏、關注、評論我啦、需要完整文件隨時聯系我或交流喲~！

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️touchSlider图片滚动图片轮播❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于javaweb jsp+servle
下一篇： c++语言 tcp例子,C++中TCP通