• January 28, 2024

    ปรับขนาดรูปยากถ้าไม่เท่ากัน

    <style>
    #container {
    	width: 100%;
    	margin: 10px auto;
    	text-align: center;
    }
    header {
    	margin-bottom: 20px;
    }
    #images {
    	width: 100%;
    	height: 300px;
    	overflow: hidden;
    	position: relative;
    	margin: 20px auto;
    }
    #images img {
    	width: 100%; /* 100% แสดงเต็มสัดส่วน ถ้า auto แสดงกว้างยาวจริงไม่เต็มรูป*/
    	max-width:1366px; /*ไม่เกินกว้างจริงนี้*/
    	height: auto;
    	position: absolute;
    	top: 0;
    	left: -400px;
    	z-index: 1;
    	opacity: 0;
    	transition: all linear 500ms;
    	-o-transition: all linear 500ms;
    	-moz-transition: all linear 500ms;
    	-webkit-transition: all linear 500ms;
    }
    #images img:target {
    	left: 0;
    	z-index: 9;
    	opacity: 1;
    }
    #images img:first-child {
    	left: 0;
    	opacity: 1;
    }
    #slider a {
    	text-decoration: none;
    	background: #E3F1FA;
    	border: 1px solid #C6E4F2;
    	padding: 4px 6px;
    	color: #222;
    }
    #slider a:hover {
    	background: #C6E4F2;
    }
    </style>
    
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var currentImageIndex = 1;
        var totalImages = 5; // Update this if you add or remove images
        var autoSlideInterval = 1000; // Set the interval in milliseconds (e.g., 3000 for 3 seconds)
    
        function showNextImage() {
            currentImageIndex = (currentImageIndex % totalImages) + 1;
            location.href = "#image" + currentImageIndex;
        }
    
        var autoSlideTimer = setInterval(showNextImage, autoSlideInterval);
    
        // Stop auto slideshow on mouse enter
        document.getElementById("container").addEventListener("mouseenter", function() {
            clearInterval(autoSlideTimer);
        });
    
        // Resume auto slideshow on mouse leave
        document.getElementById("container").addEventListener("mouseleave", function() {
            autoSlideTimer = setInterval(showNextImage, autoSlideInterval);
        });
    });
    </script>
    <div id="container">
    	<section>
    		<div id="images">
    			<img id="image1" src="1.jpg" />
    			<img id="image2" src="2.jpg" />
    			<img id="image3" src="3.jpg" />
    			<img id="image4" src="4.jpg" />
    			<img id="image5" src="5.jpg" />
    		</div>
    		<div id="slider">
    			<a href="#image1">1</a>
    			<a href="#image2">2</a>
    			<a href="#image3">3</a>
    			<a href="#image4">4</a>
    			<a href="#image5">5</a>
    		</div>
    	<section>
    </div>
    

    update

    <style>
    #container {
    	width: 100%;
    	margin: 10px auto;
    	text-align: center;
    }
    
    #images {
    	width: 100%;
    	/*height: 300px;*/
    	  max-height: 500px; /* Set a maximum height */
    	overflow: hidden;
    	position: relative;
    	margin: 20px auto;
    }
    #images img {
    	width: 100%; /* 100% แสดงเต็มสัดส่วน ถ้า auto แสดงกว้างยาวจริงไม่เต็มรูป*/
    	max-width:1000px; /*ไม่เกินกว้างจริงนี้*/
    	height: auto;
    	top: 0;
    	left: -400px;
    	z-index: 1;
    	opacity: 0;
    	transition: all linear 500ms;
    	-o-transition: all linear 500ms;
    	-moz-transition: all linear 500ms;
    	-webkit-transition: all linear 500ms;
    }
    #images img:target {
    	left: 0;
    	z-index: 9;
    	opacity: 1;
    }
    #images img:first-child {
    	left: 0;
    	opacity: 1;
    }
    #slider a {
    	text-decoration: none;
    	background: #E3F1FA;
    	border: 1px solid #C6E4F2;
    	padding: 4px 6px;
    	color: #222;
    }
    #slider a:hover {
    	background: #C6E4F2;
    }
    
    /* Set height to 500px when width is more than 1000px */
    /*@media (min-width: 1000px) {#images {height: 500px; }}
    @media (max-width: 600px) {
        #container {max-width: 100%;}
        #images {max-width: 100%;}
        #images img {width: 100%;}
    }*/
    </style>
    
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var currentImageIndex = 1;
        var totalImages = 5; // Update this if you add or remove images
        var autoSlideInterval = 1000; // Set the interval in milliseconds (e.g., 3000 for 3 seconds)
    
        function showNextImage() {
            currentImageIndex = (currentImageIndex % totalImages) + 1;
            location.href = "#image" + currentImageIndex;
        }
    
        var autoSlideTimer = setInterval(showNextImage, autoSlideInterval);
    
        // Stop auto slideshow on mouse enter
        document.getElementById("container").addEventListener("mouseenter", function() {
            clearInterval(autoSlideTimer);
        });
    
        // Resume auto slideshow on mouse leave
        document.getElementById("container").addEventListener("mouseleave", function() {
            autoSlideTimer = setInterval(showNextImage, autoSlideInterval);
        });
    });
    </script>
    <div id="container">
    	<section>
    		<div id="slider">
    			<a href="#image1">1</a>
    			<a href="#image2">2</a>
    			<a href="#image3">3</a>
    			<a href="#image4">4</a>
    			<a href="#image5">5</a>
    		</div>	
    		<div id="images">
    			<img id="image1" src="1.jpg" />
    			<img id="image2" src="2.jpg" />
    			<img id="image3" src="3.jpg" />
    			<img id="image4" src="4.jpg" />
    			<img id="image5" src="5.jpg" />
    		</div>
    	<section>
    </div>


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories